CSS(Cascading style sheet) 层叠样式表:用来对页面添加样式
一、CSS的四种导入方式
行内样式: <h1 style=”color:blue;font-size:50px;”>蓝色</h1>
嵌入样式:在head中添加一个style标签
引入样式:创建一个CSS后缀的文件,在head中添加link标签,case是要引入的CSS文 件:<linkrel=”stylesheet” type=”text/css” href=”case.css”/>
导入样式:在已有的CSS文件中导入另一个CSS文件
@import url(”b,css”);
二、CSS的选择器
标签选择器:选择页面中所有的p标签
P{
Color:red;
}
ID选择器:根据ID选择要修改的标签,每个页面中每个ID都是唯一的。
#ID{
Color:red;
}
类选择器:选择页面上所有class为cla的标签
.cla{
Color:red;
}
交叉选择器:class=hd的p标签,交叉选择器之间无空格
P.hd{
}
子代选择器(父子选择器、包含选择器):选择id为box的p标签,空格表父子关系
#box p{
}
群组选择器:class为hd,标签名是span,id是two的
.hd,span,#two{
}
通用选择器:选择页面中所有的元素
*{
}
三、伪类选择器:选择的是元素的状态
选择id为link的标签,将其设置为当鼠标放在这个标签上时,将其颜色置为红色。
#link:hover{
Color:red;
}
当id为link的标签曾经被访问过时,将其颜色置为紫色;
#link:visited{
Color:purple;
}
四、CSS的继承性和叠加性
继承性:子级元素会继承父级元素身上的文字相关样式。
叠加性:不同的选择器给同一个元素添加的不同样式可以同时生效。当添加了相同类 型的样式时,会根据选择器的优先级生效。
五、CSS选择器的优先级
无任何干扰条件时,继承的样式<浏览器默认样式<通用选择器<标签选择器<class选择器<id选择器<子代选择器<行内样式。
选择范围越小,选择的越精准,优先级越高。
六、行级元素、块级元素
块级元素:
1. 能设置宽高
2. 独占一行,不和其他元素待在同一行
行级元素:
1. 不能设置宽高
2. 能和其他行级元素待在一行
3. 常见的行级元素: a span strong em u
行内块级元素:
1. 能设置宽高
2. 能和其他元素待在一行
3. 常见的行内块级元素:img 表单
七、CSS控制文字样式
文字水平方向位置:text-align:center/right/left
行高:line-height,文字在行中是垂直居中的
首行缩进:text-indent: 10px; 缩进10像素
大小设为em时em参照文字大小,与文字大小一致
字体倾斜:font-style:italic;
字符间距:letter-spacing:10px;
字体粗细:font-weight:700;//加粗
*网页开发三部曲(静态网页)
1. 根据内容选标签,将内容放到页面中
2. 给元素加样式
3. 给元素定位置