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]

<p class="a">测试数据1</p>

p[class]{color:green;}

E[att="val"]

<p class="qq">测试数据2</p>

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

E[att~="val"]

<p class="xyz abc">测试数据3</p>

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

E[att=^"val"]

<p class="aa123">测试数据4</p>

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

E[att=$"val"]

<p class="test-abc">测试数据5</p>

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

E[att=*"val"]

<p class="hello-z-world">测试数据6</p>

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

E[att=|"val"]

<p class="y-1">测试数据7</p>

<p class="y-2">测试数据7</p>

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  设置右边的内边距

缩写型式：

padding: 上边距  右边距  下边距  左边距

padding : 上下边距  左右边距

padding : 上边距  左右边距  下边距