一、引入CSS样式表
1、行内式
通过标记的style属性来设置元素的样式。基本语法如下：
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 主体内容 </标记名>
示例：
<!doctype> <html> <head> <meta charset="utf-8"> <title>行内式引入CSS样式表</title> </head> <body> <h2 style="font-size:20px; color:red;">使用CSS行内式修饰二级标题的字体大小和颜色</h2> </body> </html>
注：只在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。
2、内嵌式
将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标记定义。基本语法如下：
<head> <style type="text/css"> 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } </style> </head>
示例：
<!doctype> <html> <head> <meta charset="utf-8"> <title>内嵌式引入CSS样式表</title> <style type="text/css"> h2{text-align:center;} p{ font-size:16px; color:red; text-decoration:underline; } </style> </head> <body> <h2>内嵌式CSS样式</h2> <p>使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，title标记之后。</p> </body> </html>
3、链入式
将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中，基本语法为：
<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
<link/>标记必须放在<head>头部标记中，并且必须指定<link/>标记的三个属性：
- href：定义所链接外部样式表文件的URL。
- type：定义所链接文档的类型，在这里需要指定为"text/css"。
- rel:定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
html文档：
<!doctype> <html> <head> <meta charset="utf-8"> <title>链入式引入CSS样式表</title> <link href="style/css" type="text/css" rel="stylesheet" /> </head> <body> <h2>链入式CSSY样式</h2> <p>通过link标记可以将扩展名为.css的外部样式表文件链接到HTML文档中。</p> </body> </html>
css文档：
h2{ text-aligh:center; }
p{
font-size:16px;
color:red;
text-decoration:underline;
}
二、CSS基础选择器
1、标记选择器
指用HTML标记名作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
基本语法:
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
代码：
<head> <style> /* 标签选择器 */ p{ font-size:12px; color:#666; font-family:"微软雅黑"; } </style> </head> <!--标签选择器 --> <body> <p>这段文字用标签选择器设置CSS样式</p> </body>
注：优点：能快速为页面中同类型的标记统一样式。 缺点：不能设计差异化样式。
2、类选择器
类选择器使用"."(英文点号)进行标识，后面紧跟类名。
基本语法:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
优势：可以为元素对象定义单独或相同的样式。
代码：
<!doctype> <html> <head> <meta charset="utf-8"> <title>类选择器</title> <style type="text/css"> .red{color:red;} .green{color:green;} .font22{font-size:22px;} p{ text-decoration:underline; font-family:"微软雅黑"; } </style> </head> <body> <h2 class="red">二级标题文本</h2> <p class="green" font22>段落一文本内容</p> <p class="red" font22>段落二文本内容</p> </body> </html>
注：类名第一个字符不能使用数字，并且严格区分大小写。
3、id选择器
id选择器使用"#"进行标识，后面紧跟id名。
基本语法:
#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
代码：
<!doctype> <html> <head> <meta charset="utf-8"> <title>id选择器</title> <style type="text/css"> #bold {font-weight:bold;} #font24 {font-size:24px;} </style> </head> <body> <p id="bold">段落1:id="bold",设置粗体文字。</p> <p id="font24">段落2:id="font24",设置字号为24px。</p> <p id="font24">段落3:id="font24",设置字号为24px。</p> <p id="bold font24">段落4:id="bold font24",同时设置粗体和字号24px。</p> </body> </html>
4、通配符选择器
通配符选择器用“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本格式：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
代码：
*{
margin:0; /*定义外边距*/
padding:0; /*定义内边距*/
}
注：实际开发中不建议使用通配符选择器。
5、标签指定式选择器
标签指定选择器又称交集选择器，由两个选择器构成。第一个为标记选择器，第二个为class选择器或id选择器。
代码：
<!doctype> <html> <head> <meta charset="utf-8"> <title>标签指定式选择器的应用</title> <style type="text/css"> p{color:blue; } .special{color:red; } </style> </head> <body> <p>普通段落文本(蓝色)</p> <p class="special">指定了.special类的段落文本(红色)</p> <h3 class="special">指定了.special类的标题文本(绿色)</h3> </body> </html>
注：两个选择器之间不能有空格。如h3.special或p#one。
6、后代选择器
后代选择器用来选择或元素组的后代，其写法就是把外层标记写在前面，内层标记写在外面，中间用空格分隔。
当标记发生嵌套时，内层标记就成为外层标记的后代。
代码：
<!doctype> <html> <head> <meta charset="utf-8"> <title>后代选择器</title> <style type="text/css"> p strong{color:red;} Strong{color:blue;} </style> </head> <body> <p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本(红色)。</strong></p> <strong>嵌套之外由strong标记定义的文本(蓝色)。</strong> </body> </html>
7、并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器(包括标记选择器、类选择器及id选择器等)，都可以作为并集选择器的一部分。
代码：
<!doctype> <html> <head> <meta charset="utf-8"> <title>并集选择器</title> <style type="text/css"> h2,h3,p{color:red; font-size:14px;} h3,special,#one{text-decoration:underline;} </style> </head> <body> <h2>二级标题文本。</h2> <h3>三级标题文本，加下划线。</h3> <p class="special">段落文本1,加下划线。</p> <p id="one">段落文本3:加下划线。</p> </body> </html>
三、字体样式属性
1、font-size：字号大小
用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
CSS长度单位：
相对长度单位:
em: 相对于当前对象内文本的字体尺寸
px: 像素，最常用，推荐使用
绝对长度单位:
im: 英寸
cm: 厘米
mm: 毫米
pt: 点
2、font-family：字体
用于设置字体。
示例:
p{font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开：
body{font-family:"华文彩云","宋体","黑体";}
注:使用font-family设置字体时，需要注意以下几点。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前，例如：
body{font-family:Arial,"华文彩云","宋体","黑体";} /*正确*/
body{font-family:"华文彩云","宋体","黑体",Arial;} /*错误*/
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号。
3、font-weight：字体粗细
用于定义字体的粗细。
font-weight可用属性值
nomal: 默认值。定义标准的字符
bold: 定义粗体字符
bolder: 定义更粗的字符
lighter: 定义更细的字符
100~900(100的整数倍):
定义由细到粗的字符。
注;常用的font-weight的属性值为normal和bold。
4、font-style：字体风格
用于定义字体风格，如设置斜体、倾斜或正常字体。其可用属性值为：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
- oblique：浏览器会显示斜体的字体样式。
注：实际工作中一般用italic定义斜体。
5、font：综合设置字体样式
基本语法格式：
选择器{font:font-style font-weight font-size/line-height font-family;}
注：必须按上面语法格式中的顺序书写，各个属性以空格隔开。
p{
font-family:Arial,"宋体";
font-size:30px;
font-style:italic;
font-weight:bold;
font-variant:small-caps;
line-height:40px;
}
注：必须设置font-size和font-family属性，否则font属性将不起作用。
<!doctype> <html> <head> <meta charset="utf-8"> <title>font属性</title> <style type="text/css"> .one{ font:italic 18px/30px "隶书";} .two{ font:italic 18px/30px;} </style> </head> <body> <p class="one">段落1:使用font属性综合设置段落文本的字体风格、字号、行高和字体。</p> <p class="two">段落2:使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family,这时font属性不起作用。</p> </body> </html>
6、word-wrap属性
用于实现长单词和URL地址自动换行。
基本语法格式：
选择器{word-wrap:属性值;}
word-wrap属性值：
normal: 只在允许的断字点换行
break-word: 在长单词或URL地址内部进行换行
示例：
<!doctype> <html> <head> <meta charset="utf-8"> <title>word-wrap属性</title> <style type="text/css"> p{ width:100px; height:100px; border:1px solid #000; } .break_word{word-wrap:break-word;} </style> </head> <body> <span>word-wrap:normal;</span> <p>百度浏览器网址:http://baidu.com</p> <span>word-wrap:break-word;</span> <p class="break_word">百度浏览器网址:http://baidu.com</p> </body> </html>
四、文本外观属性
1、color:文本颜色
用于定义文本的颜色，其取值方式有如下3种。
预定义的颜色值，如red,green,blue等。
十六进制，如#FF0000,#FF6600,#29D794等。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
2、letter-spacing：字间距
用于定义字间距。允许使用负值，默认为normal。
3、word-spacing：单词间距
用于定义单词之间的间距，对中文字符无效。允许使用负值，默认为normal。
示例：
<!doctype> <html> <head> <meta charset="utf-8"> <title>word-spacing和letter-spacing</title> <style type="text/css"> .letter{ letter-spacing:20px; } .word{ word-spacing:20px; } </style> </head> <body> <p class="letter">letter spacing(字母间距)</p> <p class="word">word spacing word spacing(单词间距)</p> </body> </html>
4、line-height：行间距
用于设置行间距。
示例：
<!doctype> <html> <head> <meta charset="utf-8"> <title>word-spacing和letter-spacing</title> <style type="text/css"> .one{ font-size:16px; line-height:18px; } .two{ font-size:12px; line-height:2em; } .three{ font-size:12px; line-height:120%; } </style> </head> <body> <p class="one">段落1:使用像素px设置line-height。该段落字体大小为16px,line-height属性值为18px。</p> <p class="two">段落2:使用相对值em设置line-height。该段落字体大小为12px。line-height属性值为2em。</p> <p class="three">段落3:使用百分比%设置line-height。该段落字体大小为14px。line-height属性值为150%。</p> </body> </html>
5、text-transform：文本转换
用于控制英文字符的大小写。
- name：不转换(默认值)
- capitalize：首字母大写
- uppercase：全部字符转换为大写
- lowercase：全部字符转换为小写
- 6、text-deciration：文本装饰
用于设置文本的下划线，上划线、删除线等装饰效果。
- none：没有装饰(正常文本默认值)
- underline：下划线
- overline：上划线
- line-through：删除线
注：text-transform后可以赋多个值，用于给文本添加多种显示效果。
示例：
<!doctype> <html> <head> <meta charset="utf-8"> <title>文本装饰text-decoration</title> <style type="text/css"> .one{text-decoration:underline;} .two{text-decoration:overline;} .three{text-decoration:line-through;} .four{text-decoration:underline line-through;} </style> </head> <body> <p class="one">设置下划线(underline)</p> <p class="two">设置上划线(overline)</p> <p class="three">设置删除线</p> <p class="four">同时设置下划线和删除线(underline line-through)</p> </body> </html>
7、text-align：水平对齐方式
用于设置文本内容的水平对齐，相当于html中的align对齐属性，其可用属性值：
- left：左对齐(默认值)
- right：右对齐
- center：居中对齐
注：
1.text-align属性仅适用于块级元素，对行内元素无效。
8、text-indent：首行缩进
用于设置首行文本的缩进。
<!doctype> <html> <head> <meta charset="utf-8"> <title>首行缩进text-indent</title> <style type="text/css"> p{font-size:14px;} .one{text-indent:2em;} .two{text-indent:50px;} </style> </head> <body> <p class="one">这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent:2em;。</p> <p class="two">这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent:50px;。</p> </body> </html>
注：text-line属性仅适用于块级元素。对行内元素无效