「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。
css层叠样式表
选择器
基础选择器
-
标签选择器 ：
标签名{属性:属性值;}， 选择页面上所有同类型的标签来设置样式。 -
类选择器 ：
. +类名{属性:属性值;}，定义类名类名调用class="类名"特点 ： 一对多 一个类选择器可以被多个标签调用 多对一 多个类选择器可以被同一个标签调用 类选择器的命名规范 ： 1.不能以纯数字或者数字开头定义类名 2.定义类名不能出现特殊符号,但是 _ 和 - 除外用于连接符使用 3.不能使用中文定义类名 4.最好用有意义的英文单词 -
id选择器 ：
#+id名{属性:属性值;}，定义 id 名 id 名调用 id ="id 名"特点 ：一对一 同一个id选择器只能被调用一次,一个标签只能调用一个id选择器 -
通配符选择器 ：
*{属性:属性值;}，选择页面所有的标签设置样式 选择范围过大
复合选择器(将两个或者两个以上的基础选择器通过不同的方式连在一起)
-
后代选择器 : 选择父元素里面的子元素,父元素在前,子元素在后,用空格连在一起，只要能代表父元素和子元素后代选择器可以是任意基础选择器组合
-
子代选择器 :
父选择器>子选择器,选择父元素直接下一代(亲儿子),用>连接 -
并集选择器 :
选择器,选择器,选择器,同时给多个选择器设置样式,用逗号连接 -
交集选择器 :
标签+类名(id),满足最少两个条件(注意:紧挨着写没有空格) -
链接伪类选择器 :
a:link{} 超链接未点击状态 :link可以省略 a:visitend{} 超链接访问后的状态 a:hover{} 鼠标悬停状态 a:active{} 超链接激活后的状态(鼠标按住不松手) 实际开发中只会用:hover :hover可以用在任意标签上
字体样式
常用基础属性
-
font-size:数字+px;: 字体大小 ( 谷歌浏览器默认 16px ) -
font-weight:值;: 文字粗细normal 默认值 不加粗=400 bold 加粗 =700 -
font-style:值;: 文字风格(文字倾斜)normal 默认值 不倾斜 italic 倾斜 取消em标签倾斜 -
font-family :值;: 文字字体无衬线字体 sans-serif 常见 : arial, 'microsoft yahei' 衬线字体 serif 常见:宋体 等宽字体 编程代码字体 英文字体写前边, 中文字体写后边 -
line-height:数字+px;: 行高 , 控制行与行的间距
文字属性简写
font: font-style font-weight font-size/line-height font-family; 按照顺序写- 文字属性练写文字大小和字体必须写
- 文字粗细 风格 行高不写取默认值
文本样式
常用基础属性
text-indent:2em;: 首行缩进, 1个em相当于1个汉字的大小text-decoration:值;文本修饰none 默认值 没有线 清楚a标签下划线 underline 下划线 line-through 删除线 overline 上划线text-align:值;: 水平对齐方式left 左对齐 默认 center 居中 right 右对齐
水平居中
a标签、span标签、img标签、input标签，水平居中给其父元素添加 text-align:center;
css引入方式
内嵌样式表
- 在head标签里边写 style标签, style标签里边写样式
- 只能控制当前页面,结构和表现没有完全分离
外链样式表
- 外边新建一个css文件, 在html页面
<link rel="stylesheet" href="css的路径"> - 控制范围是整个项目, 结构和表现完全分离
行内样式表
<div style="width: 200px; height: 200px;"></div>- 结构和表现完全混在一起, 控制范围只有当前标签
