一.层叠样式表
1.什么是CSS
CSS是Cascading Style Sheets的缩写，它除了可以设置网页元素的显示位置和格式外，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果；一个样式表由样式规则组成，以告诉浏览器怎样去呈现一个文档；简而言之，CSS就是对网页显示效果实现与word一样的排版控制
2.CSS语言语法
格式: 属性1：值1；属性2：值2；
单位：颜色：#rgb #8fa #aaffaa red green rgb(255,0,10)
大小：em px pt(点，1点=1/72英寸) pc(帕，1帕=12点) cm mm(米) in(英寸)
注释：/* */ 在其中不要再包含注释
3.CSS的四种设置方式
内联样式表：在HTML元素中使用style属性内联
每个HTML标签都可以加样式；代码量大，不利于更新
嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用
可以控制当前页面的所有样式；不能控制其他页面的样式
外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用
多个页面都可以使用
输入样式表 :可以将一个样式文件输入到另外一个文件中，或将一个样式文件输入到<style>元素中 @import url(css文件)
他们的优先级：内联的高于其他的，其他三个看加载的顺序
内联：
<html>
<head><title>CSS练习</title>
</head>
<body>
<p>111111</p>
<p style="color:#FF0000;background-color:#00FF00;border:2px solid blue;font-size:4cm;text-align:center">222222</p>
<p>333333</p>
</body>
</html>
嵌入：
<html>
<head><title>CSS练习</title>
<style>
p{
color:red;
background-color:green;
font-size:2cm
}
</style>
</head>
<body>
<p>111111</p>
<p>222222</p>
<p>333333</p>
</body>
</html>
外部： layout.css
/* 这里直接写入CSS即可 */
p{
color:green;
background-color:red;
border:5px solid #000;
font-size:3cm;
}
css设置.html
<html>
<head><title>CSS练习</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<p>111111</p>
<p>222222</p>
<p>333333</p>
</body>
</html>
二.CSS多种选择器的使用
1.什么是样式选择器
selector{ /* selector是样式选择器 */
property:value; /* color:red; */
property:value; /* font-size:4cm */
}
selector:当定义一条样式规则时，必须指定这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。
HTML选择器
HTML有标签，CSS就有选择器；选择符就是赋予内部或外部样式表的名字；
HTML的标签，用来改变一个指定标签的样式；任何一个HTML元素都可以是一个CSS选择器
类选择器：同一个选择器有不同的类，因而允许同一个元素有不同的样式
定义的方式：[tag].类名（类名是自定义的，如果不加tag则代表所有HTML元素）
<tag class="类名 类名1 类名2"> （同一个元素可以使用多个类，类名之间使用空格分开）
<html>
<head><title>HTML 类样式选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" >
<style>
p.cla1{ color:red;
}
p.cla2{ background-color:#00ff00;
}
p.cla3{ font-size:1cm;
}
p { border:1px solid #0000ff;
}
</style>
</head>
<body>
<p class="cla1">1111111111</p>
<p class="cla2">2222222222</p>
<p class="cla3">3333333333</p>
<p class="cla3">4444444444</p>
<p class="cla2">5555555555</p>
</body>
</html>
ID选择器:在HTML页面中，ID属性指定了某个单一元素，ID属性就是用来对单一元素定义单独样式;一个HTML页面中，ID属性值要唯一
#idname{} (idname是自定义的名称)
<tag id="idname">
<html>
<head>
<title>ID选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
#id1{ color:#ff0000;
font-size:1cm ;
}
#id2 { color:#00ff00;
font-size:30px;
}
#di { color:#0000ff;
font-size:20px;
}
</style>
</head>
<body>
<p id="id1">111111111111</p>
<p id="id2">222222222222</p>
<b id="di">333333333333</b>
</body>
</html>
关联选择器：只不过是一个用空格隔开的两个或更多单一选择器组成的字符串；因为层叠顺序的规则，他们的优先级比单一的选择符大；必须按关联关系使用，顺序不能反；只要能保持关联关系就可以，不管是在多少层
<html>
<head><title>关联选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
div #one .cla p{ color:#ff0000;
font-size:4cm;
}
</style>
</head>
<body>
<div>
<div id="one">
<div class="cla">
<p>5555555555555</p>
</div>
</div>
</div>
</body>
</html>
组合选择器：为了减少样式表的重复声明，组合是允许的；只要使用英文逗号（,）隔开每个选择符就可以了
<html>
<head><title>组合样式选择器</title>
<meta equiv="Content-Type" content="text/html;charset=gb2312">
<style>
div,#one,.cla,a,h1,h2{ color:#ff0000;
font-size:3cm;
}
</style>
</head>
<body>
<div>aaaaaaaaaaaa</div>
<a>bbbbbbbbbbbb</a>
<h1>cccccccccccccc</h1>
</body>
</html>
伪元素选择器：是指同一个HTML元素在不同的状态下的一种定义方式；目前只有a和p两个HTML元素可以使用； 语法： 标签[.类名]：伪元素
a:link 没有任何动作前的状态 a:hover 光标移动到超链接的状态
a:active 选中超链接的状态 a:visited 访问过超链接的状态
p:first-letter 一个段落中首个字母的状态 p:first-line 一个段落首行的状态
<html>
<head><title>伪元素选择器</title>
<meta http-equiv="Contetn-Type" content="text/html;charset=gb2312">
<style>
a:link{ color:#00ff00;
font-size:1cm;
}
a:hover { color:#0000ff;
font-size:2cm;
}
a:active { color:#ff0000;
font-size:2cm;
}
a:visited { color:yellow;
font-size:1cm;
}
</style>
</head>
<body>
<a href="www.xxxx.com">xxxx</a><br>
<a href="www.yyyy.com">yyyy</a><br>
<a href="www.zzzz.com">zzzz</a><br>
</body>
</html>
样式规则的继承：所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。
<html>
<head><title>样式的继承选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
div { color:#0000ff;
font-size:3cm;
background-color:yellow;
}
</style>
</head>
<body>
<div><p>aaaaaaaaaaaaaa</p>
</div>
</body>
</html>
样式规则的优先级：关联选择器>ID选择器>CLASS选择器>HTML标签选择器
三.CSS常见的属性和值
CSS中修饰字体的属性
font-family 字体族科 任意字体族科名称都可以使用例如Times、serif、courier、sans-serif等，而且多个族科的赋值是可以使用的，中间用逗号分隔，以防止选择不存在的字体族科
font-size 字体大小 可以使用绝对大小、相对大小、长度或百分比
font-style 字体风格 normal(普通) italic(斜体) oblique(倾斜)
font-weight 字体加粗 normal、bold、bolder、lighter
font-variant 字体变形 normal(普通) small-caps(小型大写字母)
格式：font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[/<行高>]?<字体族科>
font:italic bold 12px courier,serif;
CSS中常见的控制文本的属性
letter-spacing 字母间隔 该值必须符合长度格式，允许使用负值
word-spacing 文字间隔 该值必须符合长度格式，允许使用负值
text-decoration 文字修饰 underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)或默认使用无
text-align 横向排列 left right center或justify
text-indent 文本缩进 该值必须是一个长度或一个百分比，若百分比则视上级元素的宽度而定
text-transform 字母大小写 lowercase uppercase
line-height 行高 可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值
CSS中常见的控制背景的属性
background-color 背景颜色 值和color属性值设定方式相同，或使用transparent(透明)值
background-image 背景图像 图片URL或none
background-repeat 背景重复 repeat repeat-x repeat-y no-repeat
background-attachment 背景附件 scroll(滚动)或 fixed(固定)
background-position 背景位置 横向的关键字(left center right)，纵向的关键字(top center bottom)百分比和长度也可用作安排背景图像的位置
格式： background:<背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置>
应用多个图标放到同一个图片里
多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度。
边框属性
任何一个元素都可以设置边框；边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写，可以一起设置四边的边框，也可以对上边框、右边框、下边框和左边框单独设置。
通过边框风格属性border-style设定上右下左边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，他们分别应用于上、右、下和左边框的式样；如果给出一个值，他将被运用到各边上；如果给两个或三个值，省略的值与对边相同；也可以分别使用border-top-style、border-right-style、border-bottom-style和border-left-style属性单独设置各边的风格。
各边的风格使用的属性值：
none：无边框 dotted：点线式边框
dashed：破折式边框 solid：直线式边框
double：双线式边框 groove：槽线式边框
ridge：脊线式边框 inset：内嵌效果边框 outset：突起效果边框
边框宽度属性：
可以通过边框宽度属性border-width设定上右下左边框的宽度，该属性用1到4个值来设置元素的边框，值是一个关键字或长度，不允许使用负值长度；如果只给一个值，它将被运用到各边上；如果给两个或三个值，省略的值与对边相同；如果给四个值，它们分别应用于上、右、下和左边框的式样；也可以分别使用border-top-width、border-right-width、border-bottom-width和border-left-width属性单独设置各边的宽度。除了可以使用长度单位定值外，还可以使用medium(是默认值)、thin(比medium细)或thick(比medium粗)
边框颜色设置：
可以通过边框颜色属性border-color设定上右下左边框的颜色，该属性用1到4个值来设置元素的边框颜色；如果只给一个值，它将被运用到各边上；如果给两个或三个值，省略的值与对边相同；如果给四个值，它们分别应用于上、右、下和左边框的式样
略写的边框属性：
CSS属性border是边框属性的一个快捷的综合写法，是一个用于设置一个元素边框的宽度、式样和颜色的略写，它包含border-width、border-style、border-color属性；边框属性border只能设置四种边框，也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框宽度、边框式样、边框颜色、上边框宽度、右边框宽度、下边框宽度和左边框宽度。
鼠标光标属性：
在网页中默认的鼠标指针只有两种，一种是最普通的箭头，另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术，当鼠标移动到链接上时，可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变，其属性可以是默认的鼠标形状default、小手形状pointer、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及各个方向的箭头属性值。
CSS中常见的控制列表的属性：
list-style-type 设定引导列表项的符号类型，可以设置多种符号类型，值为disc、circle、square等
list-style-image 使用图像作为定制列表符号
list-style-position 决定列表项目缩进的程度
<html>
<head> <title>列表属性</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body>
<ul style="list-style-type:circle list-style-image:url(../picture/01.jpg)" >
<li>aaaaaaaaa</li
<li>bbbbbbbb</li>
<li>cccccccccc</li>
</ul>
</body>
</html>
四.DIV CSS标准化网页布局
DIV+CSS标准化布局的优势：使用“DIV+CSS”对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块，然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单的说，div用于搭建网站结构（框架）、css用于创建网站表现（样式/美化）。该标准简化了HTML页面代码，获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局，例如数据页面、报表之类的页面，还是使用HTML的表格会比较方便，web标准里并没有说要抛弃table。优点：表现和内容分离；代码简洁，提高页面浏览速度；易于维护和改版；提高搜索引擎对页面的索引效率
各个浏览器之间的差异：安装多种浏览器，对比差异进行调试；在FF浏览器中安装firebug（firebug为你的firefox集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的CSS、HTML和JavaScript进行实时编辑、调试和监控）；就算在不同的浏览器中效果不完全一致，也要做到大概一致。
“无意义”的元素div和span
HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用
它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。
div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
盒子模型
每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
布局中的主要模式
font line-height color margin
padding border text-align background
•
•height
•float:
•clear
•display
定位属性：
position：用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）
top：层距离顶点纵坐标的距离
left：层距离顶点横坐标的距离
width：层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值
height：层的高度，可以用一个长度或“auto”值来指定其高度，不允许使用负值
z-index：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
display：是一个显示属性，设定block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示
visibility：这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏
overflow：用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才显示滚动条
<html>
<head><title>DIV+CSS网页设计</title>
<style>
#main{ 300px;
height:200px;
border:solid 2px;
background-color:#ff0000;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
</style>
</head>
<body>
<div id="main">
aaaaaaaaaa
</div>
</body>
</html>
使用区块框设计页面布局