码迷,mamicode.com
首页 > Web开发 > 详细

CSS记录

时间:2016-03-15 23:38:56      阅读:510      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!