CSS概述
CSS的作用
引入CSS的几种方式
1.标签内引用style:style="样式名:样式值;..."
2.内部引用在head标签下
CCS内部引用head.PNG
3.外部引用
-
利用head元素下的link标签,利用href引入外部的css文件
link引入外部CSS文件.PNG -
外部的css文件为body元素下的标签加上样式
-
一个文本,后缀为 .css
外部css的名称与后缀.PNG - 文件中只能包含样式规则
-
样式规则由选择器和样式声明组成
外部的css文件.PNG - 根据标签名获取对应的标签,叫做选择器
样式的优先级
- 内部引用和外部引用优先级一致,靠先后决定样式,写在后面的生效.也就是就近优先
CSS样式表特征
继承性:应用于后代,子元素
！important 规则，强制改变优先级
通用选择器
类名选择器
元素选择器
ID选择器
id是唯一的,不能有id相同的标签
<#>井号
id选择器.PNG
类选择器
- 加上class的名称 获取对应的选择器
.voo{font-size: 30px} - class命名不能数字开头
- 元素选择器
.名称{}pt为字体的号数 - 标签名后面跟
.名称{}
群组选择器
选择器声明以逗号隔开的选择器列表
- 将一些相同的规则作用于多个元素
后代选择器
div span {color:red;}
div span {color:blue;}
后代选择器,获取div里面的所有span
子代选择器,直系子代,和后代选择器优先级一致,谁靠的近渲染谁
子代选择器,直选亲系子代
伪类选择器
link 尚未访问的链接,默认状态下（不显示默认时，清除缓存）伪类选择器.PNG
visited 访问过的链接.
hover 最常用,鼠标悬停时的样式.
active 鼠标按压时的样式.
focus 点上去就触发,光标点上去
按照顺序,顺序不能颠倒伪类选择器focus属性.PNG
伪类选择器可以使用其他选择器去获取对应标签
CSS单位
颜色单位
- rgb();
rgba();CSS颜色单位rgba.PNGa 代表透明度
- 十六进制数
#rrggbb 如#ff0000
rgb简写的十六进制数,如#f00
和颜色的英文单词
尺寸
-
宽度属性
width
max-width
min-width
p的id的最大最小宽度.PNG - 高度属性
height
max-height
min-height
溢出
- overflow:当内容溢出元素框时如何处理
visible 默认属性
hidden 表示溢出部分不显示
scroll 表示总是显示滚动条阅读
auto 也表示滚动阅读,内容多就有滚动条,内容足够显示就没有滚动条
溢出overflow.PNG
哪些HTML元素可以设置尺寸属性
- 可以设置宽高的标签为块标签,img,table.行标签设置宽高需要转化块标签
p
div
h1 h2 h2 h3 h4 h5 h6
ul ol li dl dt dd
img
table
结构化标签都是块标签
边框属性
- 简写方式
border:width style color;
边框样式:实线:solid 虚线:dotted
-
单边方式
边框单边方式.PNG -
transparent 用于创建有宽度的不可见边框
transparent 有宽度不可见边框.PNG
边框倒角
左上，右上，，顺时针
边框倒角的使用 可以设计角.PNG
边框倒角角度.PNG
边框阴影 box-shadow
box-shadow 向方框加一个或多个阴影
取值为多个属性值
box-shadow:h-shadow v-shadow blur spread color inset
边框阴影顺序用法.PNG
图片边框 border-image
border-image: source width repeat;
应用图片边框.PNG
也可以分开设置.PNG
图片边框(续1)
图片续一.PNG
轮廓，在边框外围，突出元素的作用
轮廓.PNG
