关于css的一些总结

属性选择器

1.x[xxx]{xx:xx}  选择含有xxx属性x元素 例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p[class]{color: #f00;}
    </style>
</head>
<body>
    <p class="abc">哈哈哈哈</p>
    <p class="ab-cab">哈哈哈哈</p>
    <p class="aaccbb">哈哈哈哈</p>
    <p class="abcabc">哈哈哈哈</p>
    <p class="cba">哈哈哈哈</p>
    <p class="a-bca">哈哈哈哈</p>
    <p id="d 2ca">哈哈哈哈</p>
    <p id="dy ac">哈哈哈哈</p>
  
</body> </html>

2.x[x="y"]{xxx:xx} 选择属性x的值是y的x元素 例如

p[class="abc"]{color: #f00;}

3.x[x^="y"]{xxx:xxx} 选择属性x的值开头是y的x元素 例如

p[class^="ab"]{color: #f00;}

4.x[x$="y"]{xx:xxx} 选择属性x的值结尾是y的元素x 例如

p[class$="a"]{color: #f00;}

5.x[x*="y"]{xxx:xxx} 选择属性x的值含有y的元素x 例如

p[class*="bc"]{color: #f00;}

6.x[x~="y"]{xxx:xx} 选择属性x的值开头是y接着就是空格的x元素 例如

p[id~="d"]{color: #f00;}

7.x[x|="a"]{xxx:xx} 选择属性x的值开头是y接着就是-的的x元素 例如

p[class|="a"]{color: #f00;}

 

伪对象选择符

E::first-letter 选择E元素的第一个字符 例如

p[class*="a"]::first-letter{color: #f00;}

E::first-line 选择E元素的文本的第一段落 例如

p[class*="a"]::first-line{color: #f00;}

E::before 

E:after/E::after

 

E::placeholder 选择E元素的占位符(要加上前缀 比如input::-webkit-input-placeholder{color:#f00})

E::selection 选择被选中E元素( 就是拉拽选中的那种 也是最好也是加上前缀)

 

字体样式(font)

缩写:font{(非必要:style,weight,variant等)size/(非必要:line-height) family}

font-style :字体样式 比如斜体(italic)

font-weight:粗细 比如粗体(bold)

font-variant:大写设置 比如小型大写(small-caps)

font-size:字体大小 比如16px

font-family:字体名称 比如宋体

line-height:行高 比如22px

text-decoration:文本装饰线条 比如下划线

color:字体颜色 比如red

text-shadow: 文字阴影 比如2px(x轴偏移) 2px(y轴偏移) #f00(颜色);

 

元素样式


width:宽度 比如90%(是父元素的90%)

height:高度 比如100px

margin:外边距 比如0 auto(外边距是0且居中)

padding:内边距 比如5px

以上属性的缩写是{上 右 下 左}或{上 下 左右}又或者{上下 左右}和{上下左右}

 

posted @ 2016-08-11 11:36  昵称字符数不少于2个  阅读(116)  评论(0编辑  收藏  举报