/*div{
border: 1px solid red;
width:400px;
padding: 20px;
margin:50px auto;
background-color: green;
}*/通用选择器
div{
margin: 20px auto;
}元素选择器
#div1{
background-color: pink;
color: gray;
width: 200px;
height: 300px;
}ID选择器
#div2{border: 2px dashed red;
width: 200px;
height: 200px;}ID选择器
.map{
font-size: 12px;
color: gray;
height: 36px;
line-height: 36px;
border: 2px solid blue;
width: 500px
}类选择器
span{
font-size: 12px;
color: red;
}
.mys1,.mys2,.mys3{
background-color: yellow;
}群组选择器
ul li{
color:blue;
text-decoration:overline;
}
ul li a{
color:blue;
text-decoration:overline;
}后代选择器
body{
}类型选择器
a:hover{
}伪类选择器
div>p{
}子元素选择器
伪类选择器
链接伪类
link 适用于未访问的链接
visited 适用于饭访问的链接
动态伪类
hover适用于鼠标悬停在HTML元素上时
active 适用于html元素被激活时
focus适用于HTML元素获取焦点时
选择器优先级
内联样式大于ID选择器大于伪类选择器大于元素选择器
overflow:当内容益处框内时如何显示
scroll 滚动条
hidden 隐藏
inherit
规定应该从父元素继承 overflow 属性的值。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
visible
默认值。内容不会被修剪，会呈现在元素框之外。
/*border-radius边角: 10px 15px 20px 25px;上右下左*/
/*border-radius: 20px上下 50px右左*/
/*border-radius: 10px 20px 50px ;上 右左 下*/
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:必须，为水平阴影的位置
v-shadow:必须，为垂直阴影的位置
blur：可选，模糊距离
spread 阴影的尺寸
color 阴影颜色
inset 将外部阴影outset改为内部阴影
outline轮廓
outline width style color;
outline:0px;
-webkit-border-image:url(border.jpg) 27 stretch;拉伸
/*火狐*/
-moz-border-image:url(border.jpg) 27 stretch;
/*欧朋浏览器*/
-o-border-image:url(border.jpg) 27 stretch;
border-image:url(border.jpg) 27 stretch;
/*所以浏览器*/round圆、循环
网友评论