css02
1.emmet语法
div*10
ul>li
div+p
p.nar p#nar
.demo*5 自动排序
2.css复合选择器
后代选择器：可以选择父元素里面的子元素
格式：父 子
改的是子的样式
<style> ul li{ color:deeppink; }
ul li a{
color:deeppink;
}
</style> <body> <ul> <li></li> <li></li> <li><a href="#"></a></li> </ul>
3.并集选择器
通过英文逗号链接而成。
ul,div{样式声明}
最后一个选择器不加，
4.伪类选择器
用冒号：
<style>
a:link{
color: blue;
text-decoration: None;
}
a:visited{
color:skyblue;
text-decoration: None;
}
a:hover{
color:pink;
text-decoration: underline;
}
a:active{
color:yellow;
}
</style>
<body>
<a href="#">小猪猪</a>
</body>
5.focus伪类选择器
获取焦点的表单元素
<style>
input:focus{
background-color: yellow;
}
</style>
<body>
<input type="text">
<input type="text">
</body>
6.css的元素显示模式
块元素和行内元素
块元素：
块元素：<h1>~<h6>,<p>,<div>，<ul>，<ol>，<li> 自己独占一行
高度，宽度，外边距及内边距可以控制
是一个容器盒子可以放行内元素或块元素
文字类元素不能放块级元素。
<p>里不能放块级元素，特别是<div>
行内元素：
<a>,<strong><b><em><span>
一行可以放多个行内元素
宽度，高度直接设置无效。默认宽度是本身内容的宽度/
行内元素只能放其他行内元素。
<a>可以放块级元素
行内块元素：
<img><input><td>
一行可以放多个，元素之间有空白缝隙，可以设置宽度高度。
元素显示模式转换
转换成块级元素：display,block
<style>
a{
width: 150px;
height: 50px;
background-color: aquamarine;
display: block;
}
</style>
<body>
<a href="#">little pig</a>
</body>
行内元素转换成行内块元素
display,inline-block
<style>
a{
width: 230px;
height: 40px;
display: block;
background-color: grey;
font-size: 14px;
text-decoration: None;
text-indent: 2em;
color: white;
}
/*鼠标经过的链接变为背景色*/
a:hover{
background-color: orange;
}
</style>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
7.css的背景
默认背景颜色是透明的。transparent
