1 CSS入门 1.1 引入 html：负责网页的结构 css： 负责网页的美观（样式） 1.2 体验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> a{ font-size:18px; color:#F00;} </style> </head> <body> <a href="">超链接</a><br /> <a href="">超链接</a><br /> <a href="">超链接</a><br /> <a href="">超链接</a><br /> </body> </html>1.3 定义 CSS（Cascading Style Sheet 层叠样式表） 简称，样式。 主要负责网页的美观。 1.4 css的使用方式 1）行内样式
注意： 1）使用标签的style属性进行css控制，css写在style属性值中 2）弊端：只能控制一个标签的样式 <a href="xxxx" style="font-size:19px;color:#090">超链接</a>2）内部样式
注意： 1）使用style的标签进行css控制，css内容写在style标签体内 2）一次控制多个标签的样式 3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用 <style type="text/css"> a{ font-size:24px; color:#0F0; } </style>3）外部样式（推荐使用） 注意： 1）建立独立后缀为css的文件，css内容写在该文件中 2）在使用css的html页面中，导入外部css文件
<!-- 导入外部css文件 href : 表示外部css文件的位置 rel: 表示关联的是样式表 --> <link href="01.css" rel="stylesheet"/> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <!-- <style type="text/css"> /*1.使用选择器选中你要设置样式的标签 2.给标签设置样式, 样式属性:样式值 */ a{ font-size:36px; color:#0F0} </style> --> <!--将外部的css文件导入此html代码中--> <link href="1.css" rel="stylesheet" /> </head> <!-- css的使用方式: 1.行内样式:使用标签内部的style属性给每一个标签设置样式 缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更改起来比较麻烦 2.内部样式:使用style标签,给style标签中写css的样式代码 缺点:css代码和html代码混杂在了一起,管理起来比较麻烦 3.外部样式(推荐):在html代码的外部,创建一个css文件,css文件中写独立的css代码,使用的时候,直接将css文件导入到html文件中即可 <link href="1.css" rel="stylesheet" /> href : 表示外部css文件的位置 rel: 表示关联的是样式表 --> <body> <a href="" >超链接</a><br /> <a href="" >超链接</a><br /> <a href="" >超链接</a><br /> <a href="" >超链接</a><br /> </body> </html> a{ font-size:36px; color:#0F0}2 CSS语法
a{ font-size:24px; color:#F00; } 选择器（selector）：使用选择器来选择需要添加样式的标签。 CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景..... CSS值（value）：添加样式的具体值。12px , 红色，背景图片....2.1 选择器 标签选择器
作用： 选择同名的标签 div{ font-size:24px; color:#F00; } 注意： 1）选择到所有同名的标签类选择器
作用： 选择同类的标签 /*类选择器*/ .c1{ font-size:24px; color:#F00; } 注意： 1）选择的标签必须有class的属性。同类的标签使用同名 2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！id选择器
作用： 选择一个标签 #d1{ font-size:24px; color:#0F0; } 注意： 1）选择的标签必须有id属性。 2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值") 3）id选择器的优先级最高！并集选择器
/*并集选择器*/ .c1,#d1{ font-size:24px; color:#0F0; } 作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。交集选择器
/*交集选择器 div里面的span标签 */ .c1 span{ font-size:24px; color:#0F0; } 作用： 选择某个选择器中的子标签。通用选择器
/*通用选择器*/ *{ font-size:24px; color:#0F0; } 作用； 选择所有的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*标签选择器*/ div{ font-size:14px; color:#F00;} /*类选择器,给div1和div2设置样式*/ /*.c1{ font-size:16px; color:#00F;}*/ /*使用id选择器给div1设置样式*/ #d1{ font-size:24px; color:#600;} /*将div4和div5的c2样式设置为和c1完全相同*/ /*.c2{ font-size:16px; color:#00F; }*/ /*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ .c1,.c2{ font-size:16px; color:#00F; } /*给div中的span标签设置一个样式,交集选择器*/ div span{ font-size:36px; color:#006; } </style> </head> <body> <div id="d1">div1</div><br /> <div class="c1">div2</div><br /> <div class="c1">div3</div><br /> <div class="c2">div4</div><br /> <div class="c2">div5</div><br /> <div><span>div中的span标签</span></div><br /> <span>独立的span标签</span> </body> </html>伪类选择器
作用：控制标签在不同状态下的样式。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <!-- 设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active) 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 --> <style type="text/css"> a:link{ /*在a标签的link状态下需要展示的样式*/ font-size:24px; color:#00F; } a:visited{ font-size:24px; color:#900; } a:hover{ font-size:24px; color:#F00; text-decoration:line-through; } a:active{ font-size:24px; color:#9F0; } </style> </head> <body> <a href="3.css语法及选择器.html">伪类选择器</a> </body> </html>标签有四种状态：
link: 没有访问过的状态 hover: 鼠标经过的状态 active:鼠标激活（按下但没有松开）的状态 visited: 已经被访问过的状态（鼠标点下且松开） <style type="text/css"> /*使用link伪类控制--没有访问过的状态*/ a:link{ font-size:24px; color:#F00; } /*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/ a:visited{ font-size:24px; color:#CCC; text-decoration:none; } /*使用hover伪类控制-鼠标经过的状态*/ a:hover{ font-size:24px; color:#00F; text-decoration:none; } /*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/ a:active{ font-size:24px; color:#0F0; text-decoration:underline; } /*注意： 1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有 效的。 正确顺序： link visited hover active */ </style> </head> <body> <a href="01.css入门.html">超链接</a> </body> </html>案例：给表格每一行鼠标经过加上背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*使用类选择器选中下面的三行*/ .c:hover{ background-color:#036; } </style> </head> <body> <table border="1" align="center" width="400px" height="300px"> <tr> <td>姓名</td> <td>班级</td> <td>成绩</td> </tr> <tr class="c"> <td>刘德华</td> <td>java</td> <td>60</td> </tr> <tr class="c"> <td>张学友</td> <td>java</td> <td>70</td> </tr> <tr class="c"> <td>郭富城</td> <td>java</td> <td>80</td> </tr> </table> </body> </html>2.2 常用的CSS属性和值 CSS文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{ /*设置字符间距*/ letter-spacing:4px; /*设置文本的位置*/ text-align:center; /*给文本设置上划/下划/中划线*/ text-decoration:underline; /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/ word-spacing:10px; } </style> </head> <body> <div>中国 共产党 万岁</div> </body> </html>CSS字体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{ /*设置字体*/ /*font-family:"黑体";*/ /*设置字体大小*/ /*font-size:36px;*/ /*设置字体样式*/ /*font-style:italic;*/ /*设置字体的粗细*/ /*font-weight:bold;*/ /*字体设置的简写属性,一定要注意属性的顺序*/ font:italic bold 36px "黑体"; } </style> </head> <body> <div>中国共产党万岁</div> </body> </html>CSS背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body{ /*给标签设置背景颜色*/ /*background-color:#006;*/ /*将背景设置为图片*/ /*background-image:url(05.素材/mm.jpg);*/ /*设置背景图片的重复规则 repeat:默认显示的重复方式,x,y方向都重复 repeat-x:设置图片仅在x方向上重复 repeat-y:设置图片仅在y轴方向上进行重复 no-repeat:图片不重复 */ /*background-repeat:no-repeat;*/ /*设置图片的位置*/ /*background-position:top right ;*/ /*设置图片背景的简写样式*/ background:#006 url(05.素