1.CSS的定义
CSS,层叠样式表,Cascading Style Sheet,主要负责使网页更加美观
2.CSS的使用方式
1)行内引用
使用标签的style属性直接书写css属性,缺点是只能控制一个标签。
2)内部引用
使用style标签,在标签内写入属性与属性值,通过id或者类名等方式引用。
3)外部引用
将style标签写入单独的以css为后缀的文件中,在要使用的页面中通过link标签引入并使用。
3.CSS语法
css由三部分构成,分别是选择器、属性、和属性值。
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
4.常用选择器
1)标签选择器
格式:
标签名称{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:所有同名标签
2)类选择器
格式:
.自定义类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:通过class属性引入该css的标签
注意:引入类选择器的标签必须可以使用class属性,类选择器优先级高于标签选择器。
3)id选择器
格式:
#自定义id{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:通过id属性引入该css的标签。
注意:id最好只使用一次。使用的标签必须有id属性。id选择器优先级最高。
4)并集选择器
格式:
选择器1,选择器2{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:使用选择器中任意一个选择器的标签。
5)交集选择器
格式:
选择器名 标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:使用选择器的标签内的 子标签
6)通用选择器
格式:
*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:引入该css标签下的所有标签
7)伪类选择器
格式:
标签名:标签状态{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
作用范围:控制标签在不同状态下的样式。
说明:标签有四种状态,按正确顺序来说是。link:没有访问过的状态。visited:访问过的状态。hover:鼠标经过的状态。active:鼠标激活(按下未松开)的状态。