css语法
cacadiong style sheets 层叠样式表。
简称css,规定HTML标签在页面上显示的方式。
使用HTML也可以写样式,但是有四个缺点
1.代码比较臃肿
2.可读性较差
3.不便维护
4.对搜索引擎不友好,搜索引擎更关心内容
使用css的优点:
1.代码简洁
2.可读性较强
3.便于维护
4.对搜索引擎友好,更关心内容
css基础语法
选择器{
属性:属性值:
}
属性:属性值;(声明)
声明都是由属性和属性值组成。中间用:或, 用;结尾分开
选择器:选择页面中的那些元素去修改样式
属性:属性值;要修改成什么样式
书写位置
1.行内式
直接写在标签style属性中
写法
<标签 style="…"></标签>
优缺点:写法简单,但是结构样式没有分离,只对当前标签生效,不能重复使用
2.内嵌式
在head标签内,使用style标签,写在里面
写法
优缺点:如果样式较多,页面代码就会比较多。
只对当前页面生效,如果有多个页面有共同的样式,就需要写多次
结构和样式分离
样式可以重复利用
3.外链式
写到外部文件中,通过link标签链接引入
写法
4.导入法
在head标签内,使用style标签,写在里面
写法
先加载HTML页面,在加载css
选择器
选择器就是选择页面上的元素进行样式的修改
1.标签选择器
通过标签名来选择相应的标签
会选择页面中所有相应的标签,不管嵌套多少标签
利用标签选择器进行默认样式的初始化
它会选择当前页面中的所有相应的标签,说以不会用来更改某一个标签的样式
2.ID选择器
通过标签设置一个ID值,通过ID值来选择标签
写法
#id值{
属性:属性值;
)
写法规范
以字母开头,后面可以是数字,下划线或横线
因为一个页面的ID值是唯一的,ID选择器只会选择一个标签
所以如果有多个标签要写相同的样式,使用ID选择器的时候需要分别给他们设置ID值,然后在重复的设置一样的样式
ID常用的场景;配合js去添加事件的
3.类选择器
通过标签的class属性选择相应的标签
class值是可以重复的
写法
.class属性值{
属性:属性值;
}
类选择器选择的是拥有相同class属性的元素标签
class属性是可以有多个的,css样式书写最多的就是类选择器