<!--
CSS的引入
外链式 定义一个css文件,直接写 然后在head标签内用 link引入 <link rel="stylesheet" href="">
内嵌式 head标签内 写style标签
行内式 直接在标签内 写style定义,没有做到结构与样式分离 ,所以不用
CSS 样式的功能
1 尺寸类
宽高 边框 内边距
2 外观类
文字(字体大小 字体 字体样式) 背景(背景图片 颜色 位置 背景大小)
3 位置类
外边距 定位 浮动
CSS颜色色值相关设置
rgb(红,绿,蓝) 0~255
rgba(红,绿,蓝,透明度) 0~255 0~1 alpha
#ffffff 十六进制 每两个字母代表 红 绿 蓝
CSS的选择器
通配符* 标签选择器 类 id 行内式 !important
复合选择器
交集 并集 子代 后代
CSS的三大特性:
层叠性 不同选择器,选择同一标签所设置的不同样式会共同作用在该标签上
继承性 子标签会继承父标签的样式 2点 1.h标签继承父类的字体大小单位是em(通常不要这样设置) 2.a标签不继承字体颜色
优先级 默认(body) < 通配符 < 标签 < 类 < id < 行内式 < !important
选择器的权重叠加 继承的权重值为0
标签选择器 类 id 行内式 !important
0001 0010 0100 1000 ∞
伪类选择器
针对a标签的 :link普通链接状态 :visited点击后的状态 :hover鼠标悬停的状态 :action鼠标点击的状态
:focus 针对表单元素获取焦点时的状态
行高的使用 line—height 行高 = 字体上边距 + 字体高度 + 字体下边距
块级标签
p div h1~h6 body table ul>li ol>li dl>dt dd html form
特点;
独占一行 可以设置宽高
行内元素:
span a i/em u/ins b/strong s/del
特点:
可以在一行显示 不可以设置宽高
行内块元素:
input img
特点:
可以在一行显示还可以设置宽高\
嵌套规则:
块元素嵌套一切其他元素,注意p标签虽然是块元素标签,但是不要嵌套其他块标签
行内元素和行内块互相嵌套,不要嵌套块级元素
font-weight 字体粗细
font-style 字体倾斜
font-size 字体大小
font-family 字体样式
连写 最少写两个属性
font:weight style size family
font:style size family
font:size family
设置文本水平方向对齐方式
text-align: center;
文本垂直方方式用行高来设置 line-height
设置文本是否有下划线 decoration(房屋内部的)装饰,装潢;装饰;装饰品;勋章;装饰图案;装饰风格
text-decoration:none 表示取消
text-decoration: underline 表示设置下划线
-->
标签:css01,行内,标签,字体,设置,font,小结,选择器
From: https://www.cnblogs.com/RepublicLine/p/17721688.html