01.css简介
网页分成3个部分
html 结构 30个左右的标签 先用一段时间
css 表现 外在显示的样子
js 行为
html 超文本语言
css -层叠样式表
-网页是一个多层的结构,css可以给每一层结构做样式
最终你看到的是最上面的一层
02.css书写位置
第一种方式:内部样式/行内样式
书写位置:开始标签 style属性,讲css样式写在style属性值里面
可以写多个样式,只有用分隔号;隔开即可
优点:有针对性
缺点:修改麻烦、结构和表现耦合了
注意:不推荐使用
css语法:样式名,样式值
color 设置字体的颜色 red green yellow
font-size 设置字体大小 px
background-color 设置背景颜色 red green yellow
03.css语法
css的注释,作用和html注释类似,只不过他必须编写在style标签中,或者是css文件中
css语法:
选择器 声明块
选择器:有多种选择器
声明块:具体的css样式,是写在花括号里面
样式的结构
04.css常用选择器
1.元素选择器(标签选择器)
作用:选中
语法:标签名{css样式...}
2.id选择器
语法:#id属性值
注意:id属性值不能重复使用
3.class选择器的用法跟id选择器是一样,只不过class属性值可以重复使用
语法:.class属性值{}
列子:.s1{},.ss{}
4.通配选择器
选中所有的标签,进行设置
05.css符合选择
1.交集选择器
作用:选中同时符合多个条件的内容
语法:选择器1选择器2选择器3
注意:如果选择器当中有元素选择器,元素选择器必须放在最前面
例子:p#p1.pp{},div.ss{}
2.并集选择器(群组选择器)
作用:同时选中对应的内容
语法:选择器,选择器2,选择器3
例子:.red,#red1,div,ss{}
06.关系选择器
1.子元素选择器
语法:父>子{}
2.后代选择器
作用:通过指定的祖先元素找到指定的后代元素
语法:祖先元素 后代元素{}
3.下一个兄弟选择器
作用:通过指定的兄长找到选择下一个兄弟
语法:兄+弟{}
4.
作用:通过指定的兄长找到下面所有的兄弟
语法:兄~第{}
07.属性选择器
1:属性选择器
通过确定属性以及属性值来选中对应的内容,例如id属性,class属性,src属性,href属性
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
作业展示