CSS基础学习
1、CSS介绍
- CSS：层叠样式表（cascading style sheets)
- CSS作用？？
结构：HTML决定身体
表现：CSS决定样式美观
行为：Javascript决定交互的动态效果
2、语法规则
2.1 写在哪里？
CSS写在style标签中，style标签一般写在head标签里面，title标签下面。
2.2 怎么写？
- 首先在上述位置定义一个解释器。比如
p{ color:red }，color是属性名，red是属性值。 - 然后在body里面调用，一个style里面可以定义多个解释器，一个解释器里可以添加多个属性。
下面定义一个颜色为蓝色的标签实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: royalblue;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
结果如下：
填加除颜色外，字体大小，背景色，长宽度属性。
<style>
p {
/* 文字颜色变红色 */
color: red;
/* 字体变大 px:像素 */
font: 30 px;
/* 背景颜色 */
background-color: antiquewhite;
/* width height */
width: 400px;
height: 300px;
}
</style>
得到下图结果：
3、CSS引入方式
- 内嵌式：CSS写在style标签中。
style标签虽然可以写在页面任意位置，但是通常约定写在head标签中。 - 外联式：CSS写在一个单独的.css文件中
需要通过link标签在网页中引入 - 行内式 ：CSS写在标签的style属性中。
3.1 内嵌式
上面第二点采用的方法便是。
3.2 外联式：
- 首先需要新建一个
my.css文件，里面定义一个p选择器。
/* 选择器 {}*/
p {
color: red;
}
- 新建一个
CSS引入方式.HTML文件，在title下 加入下行代码
<link rel="stylesheet" href="./my.css">
rel表示关系：样式表 ，href是引入css的路径（绝对/相对路径），这里采用相对路径。
- 刷新浏览器得到下图结果：这个时候颜色属性已经引入到文字身上。
3.3 行内式 ：将CSS写在标签内部，意思是在标签内部添加CSS属性。
比如：下述HTML源码，此时文字没有任何属性。
<body>
<p>我是CSS的外联式引入方式!</p>
<br>
<div>行内式引入方式</div>
</body>
在div标签内，添加下面代码，于是蓝色字体属性便加入到字体身上了。
<body>
<p>我是CSS的外联式引入方式!</p>
<br>
<div style="color: blue;">行内式引入方式</div>
</body>
3.4 三种引入方法的区别
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
