和cool一起学前端----第四天

继续奋战css

伪类

• :hover 鼠标悬停时候
• :visited 鼠标点击之后
• :first-child 父元素的第一个子元素
• :last-child 父元素的最后一个子元素

列表样式&&初始化样式

ul,ol会有默认的一些样式，包括一些其他的标签，都可能有一些自带的样式，例如a标签默认会有一个下划线，还有p标签默认会有边距，这些都不利于我们页面的布局，所以我们需要初始化一下css代码，以下代码仅供参考

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 微软雅黑, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, i, var { font-style: normal; }
ul, ol { list-style: none; }
ul,ol,li{ list-style:none;}
legend { color: #000; }
fieldset, img { border: 0; vertical-align: bottom; }
section, article, aside, header, footer, nav, dialog, figure { display: block; }
figure { margin: 0; }
button, input, select, textarea { font-size: 100%; border:0; background:none; outline:none; }
table { border-collapse: collapse; border-spacing: 0; }
.clear { display: block; height: 0; overflow: hidden; clear: both; }
.clearfix:after { content: '\20'; display: block; height: 0; clear: both; }
.clearfix { *zoom:1;}
a:link, a:visited, a:hover, a:active { text-decoration: none; }
input{ background:none; border:none; outline:none; appearance:normal;}
textarea{ background:none; border:none; outline:none; appearance:normal;}
s{ text-decoration:none;}
a { text-decoration: none; outline: none;}

浏览器兼容

css样式需要浏览器支持,一模一样的代码，在不同的浏览器上有着不同的渲染效果实在是太正常了，当然主要是ie的问题，曾几何时，ie连width都识别不了（可能识别_width，需要加下划线），需要做单独的处理，当然这个估计是ie6，现在ie版本都10+，表现都正常了，毕竟不是一家独大的时代了，所以我们写代码的时候也需要注意浏览器的兼容性问题，尤其是用到css3.0的东西的时候。当然像ie6那么古老的东西，我们代码也没必要去支持了，就是这么任性。

css3.0 酷炫拽

border-radius：3px 4px 5px 6px 圆角边框

属性值分别表示左上右上右下左下的圆角，当然前提你要设置border样式，才能看到圆角哦,当然针对css3的样式，需要分别写四个兼容处理，分别是-moz-border-radius,-webkit-border-radius,-moz-border-radius,-o-border-radius,最后再写上一个通用的border-radius,没错，为了保证兼容性，就是要这么写，以下所有的css3的样式都要这样加，我就不过多赘述了

box-shadow：10px 10px 3px 5px red outset 容器阴影

阴影可以写多个,中间用逗号隔开，默认是外部阴影，outset设置为inset为内部阴影，前俩个10px确定阴影的开始位置，可以为负值，表示容器水平和垂直阴影的位置，3px为阴影模糊度，5px为阴影大小

<div style="width: 100px; height: 100px; box-shadow: 5px 0 5px green,-5px 0 5px red,0 5px 5px yellow,0 -5px 5px purple; border: 1px solid #333333"></div>

text-shadow:3px 3px 3px red 文字阴影

text-overflow:ellipsis

超出文本的文字用省略号代替，配合overflow:hidden,white-space:nowrap使用

<div style="width: 50px; height:50px; text-overflow: ellipsis; border: 1px solid red;overflow: hidden;white-space:nowrap;">css3真的好有趣css3真的好有趣css3真的好有趣css3真的好有趣css3真的好有趣css3真的好有趣css3真的好有趣css3真的好有趣</div>

transform:translate(),rotate(),scale()

translate，位置平移
rotate，旋转
skew,倾斜
scale 缩放

<div style="transform: translate(50px,100px); width: 200px; height: 200px; background: red"></div>

<div style="transform: rotate(45deg); width: 200px; height: 200px; background: blue"></div>

45deg表示旋转的度数，度数大于0为顺时针旋转，小于0为逆时针旋转

<div style="transform: scale(1.5); width: 200px; height: 200px; background: green"></div>

scale(x,y) 设置x,y代表元素沿着x,y轴缩放多少倍，小于1就是缩小，大于1就是放大
好了，今天就分享到这，还有css3的知识我在之后css高级里面会详解，有不清楚的可以给我留言哦