CSS3初学篇章_3(属性选择符/字体样式/元素样式)
属性选择符
选择符 | 说明 |
E[att] | 选择具有att属性的E元素。 |
E[att="val"] | 选择具有att属性且属性值等于val的E元素。 |
E[att~="val"] | 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。 |
E[att^="val"] | 选择具有att属性且属性值为以val开头的字符串的E元素。 |
E[att$="val"] | 选择具有att属性且属性值为以val结尾的字符串的E元素。 |
E[att*="val"] | 选择具有att属性且属性值为包含val的字符串的E元素。 |
E[att|="val"] | 择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 |
上表格例子如下:
p[class]{color:green;} p[class="qq"]{color:red;} p[class~="abc"]{color:blue;} p[class^="aa"]{color:yellow;} p[class$="abc"]{color:black;} p[class*="z"]{color:orange;} p[class|="y"]{color:#ccc;}
<p class="a">测试数据1</p> <p class="qq">测试数据2</p> <p class="xyz abc">测试数据3</p> <p class="aa123">测试数据4</p> <p class="test-abc">测试数据5</p> <p class="hello-z-world">测试数据6</p> <p class="y-1">测试数据7</p>
字体样式font
1. font-family(字体名称)
说明:设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器则按照先后顺序依次使用可用字体。
h1{font-family:'微软雅黑','黑体','宋体';}
2. font-size(字体大小)
说明:设置文字的尺寸,可用px、%为单位,当用%为单位时,是基于父元素字体的大小。
h1{font-size:14px;} h2{font-size:50%;}
3. font-weight(字体加粗)
说明:控制字体粗细
语法:font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
normal:正常的字体。相当于数字值400
bold:粗体。相当于数字值700。
bolder:定义比继承值更重的值
lighter:定义比继承值更轻的值
h1{font-weight:bold;}
4. font-style(字体斜体)
说明:控制字体是否倾斜
语法:font-style:normal | italic | oblique
normal: 指定文本字体样式为正常的字体
italic: 指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
oblique: 指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字
h1{font-weight:italic;}
5. font(字体样式缩写)
语法:font:font-style || font-variant || font-weight || font-size || / line-height || font-family
h1{font:italic bold 14px/20px 微软雅黑;}
6. color(字体颜色)
说明:控制文本的字体颜色
颜色属性值分三种值的格式
1.英文单词,比如 red , yellow ,green …
2.十六进制表示方式,#开头,6个十六进制的字符或数字 组合。比如:#FFFFFF,#000000,
#CCCAAA,#22BCAD。十六进制: 0-9 和 a-f
3.RGB模式,红 0-255,绿 0-255,蓝 0-255。比如: RGB(120,33,234)
RGBA(255,0,0,.5) RGBA模式,最后的A表示透明度50%
h1{color:#000000;}
7. text-decoration(文本装饰线条)
说明:控制文本装饰线条
语法:text-decoration : none || underline || blink || overline || line-through
none:无装饰
underline:上划线
blink:闪烁文字(需浏览器兼容,慎用!)
overline:下划线
line-through:删除线
h1{text-decoration:none;}
8. text-shadow(文字阴影)
说明:控制文字的阴影部分。
语法:text-shadow: h-shadow v-shadow blur color;
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
h1{text-shadow:5px 5px 2px #ccc;}
元素样式
1.宽度
语法:width : auto | length
p { width:300px;} div { width:50%;}
2.高度
语法:height : auto | length
img { height:200px;} div { height:100px;}
3.外边距
语法:margin : auto | length
margin-top : 设置上边的外边距
margin-bottom : 设置下边的外边距
margin-left : 设置左边的外边距
margin-right : 设置右边的外边距
缩写型式:
margin : 上边距 右边距 下边距 左边距
div { width:300px; height:100px; margin:10px 20px 30px 40px; }
margin : 上下边距 左右边距
div { width:300px; height:100px; margin:10px 20px; }
margin : 上边距 左右边距 下边距
div { width:300px; height:100px; margin:10px; 20px 30px; }
4.内边距
语法:padding : auto | length
padding-top : 设置上边的内边距
padding-bottom : 设置下边的内边距
padding-left : 设置左边的内边距
padding-right : 设置右边的内边距
缩写型式:
padding : 上边距 右边距 下边距 左边距
div { width:300px; height:100px; padding:10px 20px 30px 40px; }
padding : 上下边距 左右边距
div { width:300px; height:100px; padding:10px 20px; }
padding : 上边距 左右边距 下边距
div { width:300px; height:100px; padding:10px; 20px 30px; }
5.透明度
语法:opacity:number
说明:number的取值范围0~1。
div { opacity: .3 ; } /*30%透明,小数点之前的0可以省略*/