CSS基础（2）
Emmet语法生成HTML标签
生成标签：标签名+Tab
生成多个标签：标签名*n
例：div*3
<div></div>
<div></div>
<div></div>
生成父子关系的标签：例：ul>li
<ul>
<li></li>
</ul>
生成兄弟关系的标签：例：div+p
<div></div>
<p></p>
生成带有类名或id名字的标签：
例：.demo或#two 加Tab键(写.是默认给div添加)
<div class="demo"></div>
<div id="two"></div>
例：p.one Tab
<p class="one"></p>
例：ul>li#two
<ul>
<li id="two"></li>
</ul>
生成的div类名有顺序的使用自增符号$
例：.demo$*5
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
生成标签内部写内容用{}表示
例：div{这里有内容}*2
<div>这里有内容</div>
<div>这里有内容</div>
快速生成CSS语法
采用简写形式
例：w200 或tac tab
width: 200px;
text-align: center;
CSS复合选择器
后代选择器
包含选择器，可以选择子元素、
父元素1 子元素2{样式声明}
注：元素1和元素2中间一定有空格；
例：选择ol下li中的子元素并改变。
ol li{
color:pink;
}
ol li a{
color:pink;
}
.nav li{
color:pink;
}
<ol>
<li>ol的子元素</li>
<li><a href="#">子元素</a></li>
</ol>
<ol class="nav">
<li>ol的子元素</li>
</ol>
子选择器
选择最近一级的子元素
元素1>元素2{样式声明}
.nav>a{
color:pink;
}
<div class="nav">
<a href="#">最近一级的子元素</a>
<p>
<a href="#">不是最近的</a>
</p>
</div>
并集选择器
一同改变并列的标签
元素1,元素2{样式声明}
注：逗号为英文逗号
任何形式的选择器都可以成为并集选择器的一部分。
语法规范：并集选择器一般竖着写；
最后一个选择器不需要逗号。
div,
p,
.pig li{
color:pink;
}
<div>元素1</div>
<p>元素2</p>
<span>元素3</span>
<ul class="pig">
<li>佩奇</li>
<li>妈妈</li>
<li>爸爸</li>
</ul>
伪类选择器
给某些选择器添加特殊效果
书写特点是用冒号（：）表示
链接伪类选择器
a:link{}
把没有点击过的链接选出来
<stlye>
/*未访问的链接*/
a:link{
color:black;
text-decoration: none;
}
</style>
a:visited{}
已被访问过的链接
<stlye>
/*访问过的链接*/
a:visited{
color:black;
}
</style>
a:hover{}
鼠标经过的链接
<stlye>
/*鼠标经过的链接*/
a:hover{
color:black;
}
</style>
a:active{}
鼠标按下还没有弹起的链接
<stlye>
a:active{
color:black;
}
</style>
<body>
<a href="#">链接 </a>
</body>
注：为确保生效，按照link,visited,hover,active顺序声明
因为a链接在浏览器中具有默认样式，所以需要单独指定样式
a{
color: #000;
}
链接伪类选择器实际开发中的写法
/*a是标签选择器 所有链接*/
a{
color: #000;
text-decoration: none;
}
/*hover是连接伪类选择器 鼠标经过*/
a:hover
{
color:red;/*鼠标经过由黑变红*/
text-decoration: underline;
}
focus伪类选择器
用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素。
input:focus{
background-color:yellow;
}
//光标移动到就会变成黄色背景
CSS的元素显示模式
元素显示模式就是元素（标签）以什么方式显示，比如<div>独占一行。
块元素
如：<h1>~<h6>,<p>,<div>,<ul>等
特点：
独占一行。
高度，宽度，外边距以及内边距都可以控制。
宽度默认是容器（父级元素)。
是一个容器即盒子，里面可以放行内或者块级元素。
注：文字类元素内不能使用块级元素，如：<p>标签主要用于存放文字，因此p标签里不能放块级元素，特别是<div>;<h1>~<h6>同理。
行内元素
行内元素（内联元素）
特点：相邻行内元素上，一行可以显示多个。
高，宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
<p>元素</p><strong>元素</strong>
注：链接里不能再放链接。
特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
行内块元素
行内元素中，<img/>,<input/>,<td>,他们同时有块元素和行内元素的特点。
特点：
和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
<input type="text">
<input type="text">
默认宽度是他本身内容的宽度（行内元素特点）。
高度，行高，外边距以及内边距都可以控制（块级元素特点）。
元素显示模式转换
一个模式的元素需要另一种的特性，比如想要增加链接<a>的触发范围
a{
/*转换为块级元素*/
display:block;
}
div{
/*转换为行内元素*/
display:inline;
}
span{
/*转化为行内块元素*/
width:100px;
height:30px;
display:inline-block;
}
<body>
<a href="#">元素</a>
<span>行内元素转换为块级元素</span>
</body>
转化为块元素：display:block;
转化为行内块元素：display:inline-block;
转化为行内元素：display:inline;
单行文字垂直居中的原理
解决方案：让文字的行高(line-height)等于盒子的高度(height)，就可以使其垂直居中。
div{
width:200px;
height：40px;
line-height:40px;
}
原理：上下空隙把文字挤在中间，行高小于盒子的高度，文字偏上。
CSS的背景属性
背景颜色background-color
background-color：颜色值；
一般情况下，背景颜色默认为transparent（透明）
<style>
background-color：颜色值；
</style>
背景图片background-image
大的图片，小的logo，装饰性图片，便于控制位置。
background-image: none(无背景图）或url(url)（使用绝对或相对地址指定图像。
注不要落下url**
div{
width:200px;
height：40px;
background-image: url(images/logo.png);
}
背景平铺background-repeat
参数：
repeat:图像在纵向和横向平铺
no-repeat:背景图像不平铺
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向上平铺
默认情况下，背景都是平铺的：
背景位置background-position
background-position:x y;
x,y代表x坐标,y坐标，可以使用方位名词或精确单位。
方位名词
如果两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐(center)。
精确单位
如果参数值是精确单位，则第一个一定是x坐标，第二个一定是y坐标。
background-position:20px 50px;
如果只指定了一个参数，那该数值一定是x坐标，另一个默认垂直居中和。
混合单位
如果两个值是精确单位和方位名词混合使用的，则第一个是x坐标，第二个值是y坐标。
background-position:20px center;
背景图像固定（背景附着）
background-attachment属性设置图像是否固定或随着页面的其余部分滚动。可以制作视差滚动的效果。
background-attachment：scroll(随着内容滚动) | fixed（固定，图像不随着内容走）
背景属性复合写法background
没有特定书写顺序，习惯上按颜色，图片地址，平铺，图像滚动，背景图片位置书写。
例：
background: black url(images/logo.png) no-repeat fixed center top;
背景半透明
background: rgba(0,0,0,0.3)
最后一个参数是alpha透明度，取值范围在0~1之间，1是黑色，0是透明。
0.3前面的0可以省略：
background: rgba(0,0,0,.3)
盒子背景变为半透明，盒子内容不变。
CSS三大特性
层叠性
相同选择器设置相同样式，此时一个样式会覆盖另一个冲突的样式。
原则：就近原则，哪个样式离结构近，就执行哪个。
若有字体等不冲突属性，则可以执行不会覆盖。
继承性
子标签会继承父标签的一些样式，如文本颜色和字号。
<style>
body{
color:pink;
font:12px/1.5;
}
div{
font-size:14px;
}
</style>
<body>
<div>元素</div>
<p>元素</p>
</body>
子元素div继承了父标签body的行高1.5
这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div行高是21像素。
font:12px/1.5;
注：行高可以跟单位也可以不跟单位。
如果子元素没有设置行高，则会继承父元素的行高为1.5；
此时元素的行高是：当前元素的文字大小*1.5。
优先级
选择器相同，执行层叠性。
选择器不同，根据选择器的权重执行。
<style>
.text{
color:red;
}
div{
color:pink;
}
#demo{
color:green;
}
</style>
</head>
<body>
<div class="text" id="demo">优先级</div>
</body>
</html>
结果为绿色字体。
如果在pink后加上：
div{
color: pink !important;;
}
结果为粉色字体。
注：
权重是由4位数字组成的，但是不会有进位。
类选择器>元素选择器，id选择器>类选择器。
等级判断从左向右，如果某一位数值相同，正则判断下一位数值。
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.
#father{
color:red;
}
/*p继承的权重为0*/
/*p这个标签被直接选出来了，所以结果为粉色*/
p{
color:pink;
}
<div id="father">
<p>你</p>
</div>
以后看标签执行哪个样式，先看这个标签有没有被直接选出来
body{
color:red;
}
a{
color:green;
}
<a href="#">单独的样式</a>
a继承过来的权重为0，执行浏览器默认样式，结果不是绿色。
注：a链接浏览器默认指定了一个样式，蓝色的，有下划线。
权重叠加
ul li{
color:red;
}
li{
color:green;
}
li的权重是0，0，1；
ul li的权重是0，0，1+0，0，1；
结果是红色字体。
权重虽然会叠加，但是不会进位
继承来的权重是0
盒子模型
组成
border边框，content内容，padding内边距，margin外边距
border边框
边框粗细（px），边框样式，边框颜色
border: border-width || border-style || border-color
border-style
solid:实线边框
dashed:虚线边框
dotted:点线边框
边框的复合写法
border:1px solid red；
/*没有顺序*/
边框分开写
border-top:1px solid red;
/*只设定上边框，其余同理，bottom*/
border:1px solid blue;
border-top:1px solid red;
利用层叠性，**上下颠倒不可以遵循就近原则。**层叠了上边框，其余边框为蓝色。
表格的细线边框
引例：
table{
border:1px solid pink;
}
table就是一个盒子，所以只能改变最外圈边框。加上td才能是全部边框线。
table,
td,th{
border:1px solid pink;
}
把单元格交界处较粗线条变细。
border-collapse:collapse;
collapse合并，相邻边框合并在一起。
边框会影响盒子的实际大小
解决方案：
测量盒子大小时，不量边框。
如果测量时包含了边框，则需要width/height减去边框宽度。
padding内边距
设置内边距，即盒子边框和内容的距离。
padding-left:20px;
padding复合属性
padding会影响盒子实际大小
如果盒子已经有了宽度和高度，此时再指定内边框，就会撑大盒子，（可以利用撑开盒子使表格整齐）。
div{
width: 200px;
height: 200px;
background-color:pink;
padding:20px;
}
解决方法：
让width/height减去多出来的内边距大小(左右/上下各20)。
如上：width:160px;
height:160px;
padding不会撑开盒子的情况
如果盒子本身没有指定宽高，就不会被撑大。
div{
width: 160px;
height: 160px;
background-color:pink;
padding:20px;
}
div p{
padding:30px;
}
div为p的父标签，p没有指定宽高，它继承了父标签的宽高。
margin外边距
盒子与盒子之间的距离
margin-left/right/top/bottom(左右上下外边距)
margin复合属性
margin简写方式与padding完全一致
外边距可以让块级盒子水平居中
必须满足：盒子指定了宽度。
盒子左右的外边距都设置为auto.
width:960px;
margin:0 auto;(常用)
/margin:auto;
/margin-left:auto;
margin-right:auto;
行内元素和行内块元素水平剧中
行内元素和行内块元素没有宽度。
方法：给其父元素添加text-align:center
.header{
width:900px;
height: 200px;
margin:100px auto;
text-align: center;
}
<div class="header">
<span>文字</span>
<img src="down.jpg" alt="">
</div>
外边距合并
使用margin定义块元素的垂直外边距时，会出现外边距的合并。
相邻块元素垂直外边距的合并
解决方案：尽量只给一个盒子添加margin。
取两个值中较大的。
嵌套块元素垂直外边距的塌陷
.father{
width: 400px;
height: 400px;
background-color:pink;
margin-top:50px;
}
.son{
width: 200px;
height: 200px;
background-color:red;
margin-top:100px;
}
<div id="father">
<div class="son"></div>
</div>
对于两个嵌套关系的块元素，父元素上边有外边距同时子元素也有上边距，此时父元素会塌陷较大的上边距值。
解决方案：可以为父元素定义上边框；
.father{
width: 400px;
height: 400px;
background-color:pink;
margin-top:50px;
border:1px solid red;
}
可以为父元素定义上内边距；
.father{
width: 400px;
height: 400px;
background-color:pink;
margin-top:50px;
padding:1px;
}
可以为父元素添加overflow:hidden。
.father{
width: 400px;
height: 400px;
background-color:pink;
margin-top:50px;
overflow:hidden;
}
清除内外边距
不同网页有不同的内外边距，在布局前首先去除网页内外边距。
*{
padding：0；/*清除内边距*/
margin:0;/*清除外边距*/
}
注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距，需要时转换为块级和行内元素就可以。
圆角边框
border-radius:length;
border-radius:20px 10px 30px 40px;
盒子阴影
box-shadow增添阴影
box-shadow:h-shadow v-shadow blur spread color inset;
文字阴影
text-shadow给文字加阴影
text-shadow:h-shadow v-shadow blur color;
可以为父元素定义上内边距；
.father{
width: 400px;
height: 400px;
background-color:pink;
margin-top:50px;
padding:1px;
}
可以为父元素添加overflow:hidden。
.father{
width: 400px;
height: 400px;
background-color:pink;
margin-top:50px;
overflow:hidden;
}
清除内外边距
不同网页有不同的内外边距，在布局前首先去除网页内外边距。
*{
padding：0；/*清除内边距*/
margin:0;/*清除外边距*/
}
注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距，需要时转换为块级和行内元素就可以。
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
