Css的第二天
快速生成html骨架
序号 符号 含义 示例
1 N 连续生成 N 个 div5
2 父>子 生成父子关系结构 ul>li5
3 兄+弟 生成兄弟关系结构 h1+div2+h4+p*2
4 .class / #id 生成带 class 或 id 的 div .red / #app
5 tag.class / tag#id 生成带 class 或 id 的 tag p.red / span#nav
6 $*N $ 位置会被连续的数字替换 .demoKaTeX parse error: Expected '}', got 'EOF' at end of input: *5 7 {内容} 标签内容 p{段落$}*5
快速生成css
tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;
ow100 → width: 100px;
oh200 → height: 200px;
复合选择器
类别
4 类，本别是：后代、子代、并集、伪类
选择器 作用 频率 用法示例
后代 找后代 较高 使用空格分隔 .nav a
子代 找亲儿子 较少 使用 > 分隔 .nav>a
并集 找大伙 较多 使用 , 分隔 .nav, .header
链接伪类 链接状态 较多 a:hover LoVe HAte
focus 表单状态 较少 input:focus
后代选择器
选择器1 选择器2 {样式声明;}
子元素选择器
选择器1 > 选择器2 {样式声明;}
并集选择器
选择器1,
选择器2 {
样式声明;}
连接伪类选择器
a:link {
color: #333;
text-decoration: none;}
a:visited {
color: orange;}
a:hover {
color: skyblue;}
a:active {
color: green;}
链接伪类选择器 说明
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择**链接（鼠标按下未抬起的链接
Focus选择器
input:focus {
width: 800px;
background-color: pink;
color: red;
border: solid 0px pink;
}
交集选择器
div1中的span标签
div2中的span标签
p中的span标签
元素显示模式
块元素 —— block
行内元素 —— inline
行内块元素 —— inline-block
Block
1.独占一行
2.可以设置宽度、高度、外边距、边框和内边距
3.宽度默认是父级容器的宽度
4.可以存放其他行内元素和块级元素
Inline
1.相邻行内元素在一行显示，一行多个
2.给行内元素设置宽高是无效的
3.默认宽度是内容的宽度（被内容撑开）
4.只能容纳文本或其他行内元素
Inline-block
1.相邻行内元素在一行显示，一行多个（行内元素特点）
2.默认宽度就是本身内容的宽度（行内元素特点）
3.可以设置宽度、高度、外边距、边框和内边距（块级元素特点）
背景颜色
background-color: pink;
transparent 透明的为特殊颜色
背景图片
background-image: none | url(url);
背景平铺
background-repeat
参数 说明
repeat 默认，水平垂直平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
背景位置
background-position (背景位置)
水平方向：left / right / center
垂直方向：top / bottom / center
背景固定
background-attachment
scroll 默认，背景图像跟随滚动
fixed 背景图像固定
背景元素复合写法
font: font-style font-weight font-size/line-height font-family
没有顺序要求
背景颜色半透明
background: rgba(0, 0, 0, 0.3) ；
需要pink老师一手学习资料请留言