8.10 CSS知识点3

7.属性选择符

选择符	版本	描述
E[att]	CSS2	选择具有att属性的E元素
E[att="val"]	CSS2	选择具有att属性值等于val的E元素
E[att~="val"]	CSS2	选择具有att属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att=^"val"]	CSS3	选择具有att属性值为以val开头的字符串的E元素。
E[att=$"val"]	CSS3	选择具有att属性值为以val结尾的字符串的E元素。
E[att=*"val"]	CSS3	选择具有att属性值为包含val的字符串的E元素。
E[att=\|"val"]	CSS2	选择具有att属性值为以val开头并用连接符"-"分隔的字符串的E元素。

E[att]

测试数据1

p[class]{color:green;}

E[att="val"]

测试数据2

p[class="qq"]{color:red;}

E[att~="val"]

测试数据3

p[class~="abc"]{color:blue;}

E[att=^"val"]

测试数据4

p[class^="aa"]{color:yellow;}

E[att=$"val"]

测试数据5

p[class$="abc"]{color:black;}

E[att=*"val"]

测试数据6

p[class*="z"]{color:orange;}

E[att=|"val"]

测试数据7

测试数据7

p[class|="y"]{color:#ccc;}

字体样式

1.font-family 字体名称

语法：

font-family：<family-name>

说明：

设置文字名称，可以使用多个名称，或者使用逗号分隔，浏览器则按照先后顺序依次使用可用字体。

例：

P{font-family:'宋体','黑体','Arial'}

2.font-size 字体大小

语法：

font-size：<length>|<percentage>

例：

p{font-size:14px;}

3.font-weight 字体加粗

语法：

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

例：

p { font-weight:bold;}

4.font-style 字体斜体

语法：

font-style : normal | italic | oblique

例：

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

5.font 字体样式缩写

语法：

font : font-style || font-variant || font-weight || font-size || / line-height || font-family
例：
p{
   font-style:italic;
   font-weight:bold;
   font-size:14px;
   line-height:22px;
   font-family:宋体;
}
缩写后：
p { font:italic bold 14px/22px 宋体}

6.color 字体颜色

语法：

color：<color>

p{color:#FF0000;}

7.text-decoration 文本装饰线条

控制文本装饰线条

text-decoration : none || underline || blink || overline || line-through

例：

p { text-decoration:overline;}

p { text-decoration:underline;}

p { text-decoration:line-through;}

8.text-shadow 文字阴影

说明：

控制文字的阴影部分。

text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。

color 可选。阴影的颜色。

实例：

h1{text-shadow: 2px 2px #ff0000;}

元素样式

1.width 宽度

width : auto | length

例：

p { width:300px;}

div { width:50%;}

2.height 高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

3.margin 外边距

margin : auto | length

例：

div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

说明：

margin-top 设置上边的外边距

margin-bottom 设置下边的外边距

margin-left 设置左边的外边距

margin-right 设置右边的外边距

缩写型式：

margin: 上边距右边距下边距左边距

margin: 上下边距左右边距

margin: 上边距左右边距下边距

4.padding 内边距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

说明：

padding-top 设置上边的内边距

padding-bottom 设置下边的内边距

padding-left 设置左边的内边距

padding-right 设置右边的内边距