一、CSS:cascading style sheets 层叠样式表,规定了HTML标签在网页上的显示方式。
1)使用HTML写样式的痛点:
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好,搜索引擎更关心内容。
2)使用css的优点:
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容,对搜索引擎比较友好。
3)CSS基础语法:
选择器{
属性: 属性值;(声明)
属性: 属性值;
}
选择器:选择页面中哪些元素去做样式的修改。
声明:要做什么样的样式修改。均由属性和属性值组成的。中间用 :, 结尾用 ;。
4)css分为五类:文本,盒子,浮动,定位,背景。css对缩进和空格不敏感,可通过合理缩进来提高代码的可读性
1.文本:
字体,大小,颜色。
2. 盒子:宽,高,背景色,边框、
5)CSS书写位置:行内式,内嵌式,外链式,导入式。
1. 行内式写法:直接写在标签style属性中 例:【p style=“color: #000; font-size: 20px”>我爱我的祖国</p】
优点:写法简单。
缺点:1.结构和样式没有分离。
2.只对当前的标签生效,不能够复用,开发中不推荐使用。
2. 内嵌式写法:使用style标签,写在head标签内。CSS属性写在style标签内。
<style>
.....
</style>
优点:结构和样式分离,样式可以复用
缺点:1.如果样式比较多,页面代码会比较多。
2.只对当前页面生效。
3.外链式:写法:<link rel="stylesheet" href="css/demo.css"> 通过link标签,引入外部的css文件。
优点:
1.结构和样式分离。
2.样式可以复用。
3.可以多个页面使用。
4.导入式
写法:
<style>
@import url(css/demo.css);
</style>
注:外链式和导入式区别:
外链式:会先加载css,再去加载HTML页面。
导入式:会先加载HTML页面,再加载css。故不推荐使用导入式,使用最多的是外链式。
二、选择器:选择页面上的元素进行样式的修改。
1.标签选择器:
通过标签名来选择相应的标签,会选择页面中所有的相应标签,不管嵌套关系是怎么样的。
用途:a标签,li标签。利用标签选择器,进行默认样式的初始化。
由于标签选择器会选择页面中所有的相应标签,实际工作中,不会用来更改某一个标签的样式。
2.ID选择器:
通过给标签设置一个ID值,然后通过ID值来选择标签。一个页面中ID值唯一,ID选择器只会选择一个标签。
格式:
#id值{
声明;
}
写法规范:以字母开头,后面可以是数字、下划线、横线。
缺点:
假如有多个标签,有相同样式,使用ID选择器的时候,需要分别给他们设置ID值,然后再重复的设置一样的样式。
id常用场景:不是用来设置样式,配合js去添加事件的。
3.类选择器
通过标签的class属性来选择相应的标签,选择的是拥有相同class属性的标签元素。CSS书写样式中最常用的选择器。
格式:
.class属性值{
声明;
}
class属性值:
可以多个、可重复,命名规则同ID值。以字母开头,后面可以是数字、下划线、横线。
4.通配符:*
格式:
*{
声明;
}
注:可选择包括body在内的所有标签。无论标签是否有相应属性,均会去执行一次。因效率不高,不常用。