CSS3初学篇章_3（属性选择符/字体样式/元素样式）

时间：2022-06-06 01:16:43

属性选择符

 选择符  说明
 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可以省略*/

相关文章