1、 字体样式
(1) 字体名称
语法:
font-family : <family-name>
说明:
设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器则按照先后顺序依次使用可用字体,因为有些浏览器并不具备一些字体
例:
p { font-family:‘宋体','黑体', 'Arial’ }
(2) font-size(字体大小)
语法:
font-size :<length> | <percentage>
注:如果用百分比作为单位,则是基于父元素字体的大小
例:
CSS:p { font-size:14px;}
HTML:<body>
<p>数风流人物</p>
</body>
(3) font-weight(字体加粗)
语法:
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
例:
CSS: p { font-weight:bold;}
HTML:<body>
<p>这个文体加粗 </p>
</body>
(4) font-style(字体斜体
语法:font-style : normal | italic | oblique
例:
CSS:
.box1{ font-style: normal; }
.box2{ font-style: italic; }
.box3 { font-style: oblique; }
HTML:
<p class="box1">美女</p>
<p class="box2">美女</p>
<p class="box3">美女</p>
(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>
说明:
颜色属性值分三种值的格式
- 英文单词,比如 red , yellow ,green …
- 十六进制表示方式,#开头,6个十六进制的字符或数字 组合。比如:#FFFFFF,#000000,#CCCAAA,#22BCAD。十六进制: 0-9 和 a-f
- RGB模式,红 0-255,绿 0-255,蓝 0-255。比如: RGB(120,33,234)
RGBA(255,0,0,.5) RGBA模式,最后的A表示透明度50%
例1:p{
color:#FF0000;
}
例2:
<html>
<head>
<title></title>
<style type="text/css">
a[class^="col"]{
background-color: red;
}
a[href$=".doc"]{
background-color: green;
}
a[title*="box"]{
background-color: blue;
}
</style>
</head>
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
</body>
</html>
后续.......................