CSS记录

标签：

CSS：Cacxading Style Sheets.（层叠样式表/级联样式表）
样式表：（1）外部样式表：head-(新建.FIRE(HTML) .CSS)-LINK
(2) 内联样式表：head-style
(3) 内嵌样式表：body里面（属性：属性值）
选择器:<p>、<h1>、<hr>
(1)元素选择器em（color:blue；）
(2)类选择器.类名（属性：值；）
(3)ID选择器#ID名（属性：值；）
(4)包含选择器<li><em></em></li>
(5)通配符选择器*｛color:blue;｝
(6)派生（包含）选择器 p span (子选择器)
(7)并集选择器:h1,h2
权重： 内嵌 ID class 元素
内嵌 1 0 0 0
ID 0 1 0 0
CLASS 0 0 1 0
元素/伪元素0 0 0 1
通配符* 0
！important 最高(css元素选择器里面)
！important >内嵌>ID(ID具有唯一性)(#)>class（.）>元素>通配符（*代替）>
设置元素内容的字体
（1）字体名称 font-family
(2) 字体倾斜程度 font-style
(3) 自体的变体（normal、small-caps比正常的字母小一些跟<small></small>有异曲同工之处）
（4）字重 fiont-weight 100-900
（5）自体大小 font-size
设置元素内容的文本属性
（1）设置文本缩进 text-indent:3em
(2) 对齐 text-align center/left/right
（3）文本修饰 text-decoration overline(上化纤)
（4）文本阴影 text-shadow :black
（5）行高 line-height
（6）字间距 letter-spacing
（7）词间距 word-spacing
（8）设置文本大小写形式 text-transform
（9）空白显示形式 white-space
设置元素内容的字体颜色和背景
（1）前景色 color
（2）背景色 background-color
（3）背景图像是否铺排 background-repeat
（4）背景图像随内容滚动还是固定background-attachment
（5）背景图片显示位置 background-postion
(6) 设定背景图像 background-image
body:not(div){
background: green;
}body里面除了哪个其它的都
h1{
color: red;
background: pink;
/*font-family: Arial;*/
}
.test{
border: 1px solid #909;
}

input[type="text"]{
outline: none;
border: 10px solid skyblue;
}
a{
text-decoration: none;
color: black;
}连接
a:link{
font-size: 30px;
color: red;
}链接的样式
a:visited{
color: grey;
}链接以后的样式
a:hover{
background: greenyellow;
}鼠标移入的样式
a:active{
font-size: 60px;
｝鼠标点击时的效果
.test2:focus{
border: 3px solid #990099;
}获取光标的时候
::selection{
background: peachpuff;
color: steelblue;
}复制文本时的颜色
table :empty{
background: lightgrey;
}空白表格
.div1:first-line{
font-size: 25px;
}第一行
.div1:first-letter{
color: red;
}第一个字
a:before{
content: "请点击";
}之前加入字
a:after{
content: "才怪嘞！";
}之后加入字 乱码时第一行添加@charsest"utf-8"
(通配符)*{
/*margin: 0;*/
/*padding: 0;*/
}（元素属性之间定义后会缩进）
ul li:nth-child(2){
background: moccasin;
}第几个改变
ul li:nth-child(3){
background: #ebccd1;
}
ul li:nth-last-child(2){
background: #df1f0d;
}倒第二个改变
ul li:nth-child(odd){
background: moccasin;
}奇数改变
ul li:nth-child(even){
background: royalblue;
}偶数改变
ul li:nth-child(2n+1){
background: greenyellow;
}每两个改变
table td(tr)里面就可以同理可得

CSS记录

标签：

原文地址：http://www.cnblogs.com/ldcxj/p/5281550.html