Css样式（cascading style sheet）层叠样式表
B
ody a .box{ }
C
ss的目的：给html加各种各样的样式----html结构和css样式样式分离---便于维护更新
C
ss语法
选择器
{
属性名:属性值
;
属性名:属性值;
}
说明：
-
一个css样式包括选择器和 格式声明语句
-
选择器就是选择给哪个html标签加样式
-
格式声明语句包括属性名:属性值;
-
格式声明语句要用{ }
-
属性名，w3c已经定义好，想用的时候，直接使用
-
属性值不用双引号
-
属性值的有单位是通常是以像素 px为单位 ,通常的情况下 必须带单位
如何在html结构中引入css样式
-
行内样式表：临时做测试用
每一个标签都有style属性
格式:<标签 style=
”
属性名:属性值;
”
>内容</标签>
行内样式，只能应用当
前文档
中的
当前对应的html标签
加样式，或者里面包含的标签加该样式
例如
![]()
-
内嵌样式表：常用的一种
格式:在head标签中输入xhtml
<style
type=
”
text/css
”
>
选择器{属性名:属性值; }
</style>
内嵌样式：在当
前的文档
可以使用该样式，需要的时候可以使用
-
外部样式表常用的一种
格式:<link rel=
”
stylesheet
”
href=
”
外部样式表文件 xx.css
”
/>
保存的时候扩展名为.css文件
第一步，建立一个css页面，保存为扩展名为.css文件
2在不同的页面引入<link rel=
”
stylesheet
”
href=
”
外部css文件的地址
”
/>
可以应用多个文档，哪个html标签需要用，就可以引入
-
导入样式表：管理css样式
格式:@import url(另外一个css样式)
注意 @import是css样式标签，所以必须放到css文件中
必须放到css样式表的最上面例如
选择器的分类
基本选择器
-
-
-
标签选择器：选择给哪个标签加样式，自动指向该标签
-
-
语法：标签选择器名{ 属性:属性值; }
body { } p{ } div{ } table{ } td{ } ul{
}
注意：不用引用，把样式自动套到对应的标签，所有的对应标签都加上该样式
-
-
-
类选择器：给一类html标签加样式
-
-
语法：类选择器名{属性：属性值; }
选择器名是自己定义，要起得有意义
类用 .来表示【但在引用的时候不加
’
.
’
】
例如: .myclass{ } .page_header1{ } .login-content-input{ }
必须的引用，每一个标签都有一个class属性
<标签 class=
”
选择器名
”
></标签>
注意：类选择器可以引用多次
<!--输入两个段落，要求第二段，文本颜色为蓝色，大小为14px ，
输入两个无序列表，第一个无序列表文本颜色为浅蓝色，文本加粗-->
-
-
-
I d选择器：给 特定 的html标签加样式
-
-
格式:id选择器名{属性:属性值; }
I
d 用#来表示
选择器名自定义，要起得有意义
例如 #myid{ } ,#id1 #checkform1{ }
I
d必须得引用，引用的方法，每一个标签都有id属性
<标签 id=
”
选择器名
”
></标签>
注意：id只能引用一次，表示唯一，通常id给javascript用，不是用来设置样式的，如果想设置样式，用类选择器
<!--两个div ，第一个div 中标题3，下面是一个有序列表，标题三的颜色为蓝色，去掉加粗，有序列表文本为浅蓝色，大小为12像素，行间距为24像素，第二个div ，有一个标题3，下面有一个无序列表，不设置样式
-->
-
-
-
通用选择器：（*所有）给所有的标签加样式
-
-
语法： * { 属性:属性值; }
不是所有的浏览器都支持
，Ie6
版本不支持
复合选择器
多元素选择器：多个标签共有的属性和属性值，放到一起
语法：选择器，选择器，选择器
……
..{共有的属性：属性值; }
淘宝
后代元素选择器：给html的后代标签加样式
语法：选择器1 选择器2 选择器3{属性:属性值; }
注意空格！
选择器1 里面的选择器2
D
iv的后代标签<h3><ul><li><b>
<div>
<h3>PS免费早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>
“
人造美人
”
，</b>你认为谁最美呢</li>
<li>最近惊现一批
“
人造美人
”
，你认为谁最美呢</li>
<li>最近惊现一批
“
人造美人
”
，你认为谁最美呢</li>
</ul>
</div>
.login .login_content_input .login_content_input_outspan{ }
.login_content_input .login_content_input_outspan{ }
.login_content_input_outspan{ }
子元素选择器 :给html标签的子标签加样式
格式:选择器>选择器{属性:属性值; }
某个标签里面的
第一层
<div
class=
”
news
”>
<h3>
PS中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>
“
人造美人
”
，</b>你认为谁最美呢</li>
<li>最近惊现一批
“
人造美人
”
，你认为谁最美呢</li>
<li>最近惊现一批
“
人造美人
”
，你认为谁最美呢</li>
</ul>
</div>
.news>h3{color:blue; } .news h3{color:blue; }
U
l>li{color:red; }
伪类：----锚<a> (内容必须做好链接)
a:link: 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动链接上
a:active 单击鼠标左键的那一时刻的样式
文本属性
-
font-size 文本的大小例如 font-size:12px;
-
font-weight 文本是否加粗font-weight:bold///normal ;
-
font-style 文本是否倾斜font-style:italic ;倾斜font-style:normal;正常
-
font -family:文字的字体例如 font-family:隶书; 默认是宋体
-
text-decoration 文本是否有线条
-
-
text-decoration:underline ;下划线，
-
text-decoration:overline; 上划线
-
text-decoration:line-through;删除线
-
text-decoration:none;去掉所有的线条
-
-
text-indent:文本首行缩进例如 text-indent:2em;
-
color 文本的颜色例如color:red;
-
letter-spacing:字母和字母之间的距离例如letter-spacing:2px;
-
word-spacing:单词和单词之间的距离例如 word-spacing:2px;
-
text-align:文本的对齐方式 left center right 例如 text-align:center;
背景的属性
-
Ba ckground-color 背景颜色例如：background-color：#ff0000;background-color:red;
-
B ackground-image:背景图片例如background-image:url(图片的路径)
-
B ackground-repeat:背景图片是否平铺取值：no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺 repeat横向和纵向都平铺（默认）
-
B ackground-attachment:背景附件，背景是否随着上方的内容一起滚动
取值：fixed 背景固定 scroll 滚动
例如：background-attachment:fixed;
-
Back ground-position:背景图片的展开方式例如：background-position:水平 垂直;
英文：水平 left center right 垂直 top center bottom
数值：正值负值
例如background-position:
left
top
;
例如:background-positon:
0
0
; background-position:10px 20px;
可以简写
B
ackground:
背景颜色
背景图片 背景图片是否平铺（附件通常仅用
body标签
）
水平垂直
；
注意：只有水平和垂直不能颠倒，其他的属性值可以顺序颠倒
<!
—
设置主体标签，背景图片，纵向平铺水平居中垂直距离顶端20px-->
列表
去掉列表前面的项目符号
-
L ist-style-type:none; 可以简写为 L ist-style:none;
-
用小图代替列表前面的符号
L
ist-style-image:url(图片的地址)
之前rules=
”
all
”
表格<table>的属性合并表格的边框线
C
ss样式如何实现
B
order-collapse:collapse; 合并表格的边框线
例如
边框（html标签就可以加边框线）
上边框/右边框/下边框/左边框[top/right/bottom/left]
-
B order-top-color:颜色值;上边框的颜色
-
B order-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
-
B order-top-width:粗细；例如border-top-width:2px;
简写为
B
order-top: 粗细 线型 颜色;
盒子模型
内容区：width 和height
边框 border:
内边距 padding
内容和边框之间的距离
-
Padding - top ：数值；内容和上边框之间的距离
-
Padding -right：数值；内容和右边框之间的距离
-
Padding -bottom：数值；内容和下边框之间的距离
-
Padding -left：数值；内容和左边框之间的距离
简写形式
P
adding：10px 20px 30px 40px; 上边框距离10px 右 20px 下30px 左 40px
P
adding:10px 20px 30px; 上10px
左右 20px
下 30px
P
adding:10px 30px; 上下10px 左右 30px
P
adding:10px; 上右下左都是10px
外边距
边框以外的距离
M
argin-top:数值；上边框往外的距离
M
argin-right:数值；右边框往外的距离
M
argin-bottom:数值；下边框往外的距离
M
argin-left:数值；左边框往外的距离
简写同边距一样！
网站布局的一个思想
网站的结构就是两部分（横向和纵向）如果是纵向的就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的距离padding ,边框往外的部分margin,border调这些属性就可以
如果是横向排列，我们就要使用浮动
浮动
F
loat：left；
F
loat:right;
right
left
left
L
eft3
L
eft2
L
eft1
三个盒子
①
左左右
②
左左左【不使用右右右因为 文档流的顺序会对命名造成混乱】
浮动的特点：
设置浮动的元素，不占空间
设置浮动的元素层级高于普通元素
设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素
如果在一行中的元素想横向排列，都设置浮动就可以
通常情况下div里面还有div （外面的div父盒子，）盒子里面还有盒子
如何让盒子在页面水平居中
M
argin: xx
auto
;
-
例如：margin: 0 auto;
-
M argin-left:auto; margin-right:auto;
清除格式：
清除所有的html标签的格式，后期如果使用，在重新设置
*{margin:0;padding:0; }
B
ody,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,
I
,b,a
…
.{margin:0;padding:0; }
网页的布局思想
-
清除格式
-
设置页面属性设置 body{ }
B
ody{font-size:14px; font-family
:
宋体; color:#000000; background-color:
#e2e2e2
; line-height:150%;}
B
ody{背景颜色/背景图片 文本的大小 文本的颜色 文本的字体 行间距}
-
把整个页面划分结构
行内元素和块元素
行内元素：输入完标签之后，不是自己占一行,行内元素的宽度和高度是由内容来决定，
宽度和高度width height 不能用
css样式是display:inline;
S
pan b
I
u strong a
块元素 ：输入完标签之后，自己独占一行,可以设置宽度和高度，width和 height
C
ss样式 display :block;
D
iv p table ul li ol dl dt dd h1
…
.
块
—
转换---行内
D
isplay:inline;
行内
—
转换---块
D
isplay:block;
O
verflow
当内容溢出，如何显示
H
idden; 隐藏
A
uto;如果盒子装不下，就会出现滚动条
S
croll,无论是否能装下都有滚动条边框
继承
外层元素的样式，会被里面的元素所继承
那些标签可以继承
文本的属性的可以继承 font-size font-family font-weight font-style:italic ; text-decoration:none/underline; color:red;
注意：自己有的属性，不向外继承，不会继承祖先元素的属性
优先级
单个选择器的优先级
标签选择器 <类选择器 < id选择器 <行内样式表
标签选择器 类选择器 id选择器
比喻 1 10 100
复合选择器优先级
L
i -------1
.box ul li{ } ----12
.box .one .two ul li{ } ----32
#myid ul li{ }----102
写的越精确，优先级越高
清除浮动
案例需求
C
lear:left;
C
lear:right;
C
lear:both; /*清除左浮动，右清除右浮动*/
【问题】
D
iv里面还有<div >(外面的div父盒子>)div父盒子没有设置固定高，里面设置了浮动，父元素受影响，无法正常的计算，如何让父元素得到一个自然高？
①
在父盒子里面的最下方加<div>给该div设置清除浮动的属性clear:both;
②
浏览器的一个bug ----在父元素的样式中加overflow:hidden;
可以让父元素得到一个自然高
盒子的深入
最外面蓝色的盒子内容区的宽度为
1000px，
width=1000
红盒子width=500，border=2px padding:5px; margin:10px;
红盒子总的宽度是 =内容区的宽度+边框的宽度+padding+margin（左右）=
534px
黑盒子width=400 ，border=2 padding=10px ：margin：10px；
400+2+2+10+10+10+10=
444px
蓝盒子width>=红盒子+黑盒子
注意：里面所有的值加到一起一定不能大于父盒子的内容区的宽度width
总的宽度=内容区的宽度width+border(左右)+padding（左右）+margin(左右)
①
如果没有设置浮动，是正常的文档流，设置margin，如果有叠加取叠加部分的最大值。
②
如果设置了浮动，不是正常的文档流，要把所有的margin值相加，距离是它们之和。
定位
P
osition:定位方式有：static默认 fixed 固定 relative 相对定位 absolute 绝对定位
默认 如果你不设置就是static
坐标：偏离目标元素多远的距离
坐标的属性：
L
eft:数值；
R
ight:数值;
T
op:数值；
B
ottom：数值；
Fixed 固定定位
-
相对于 浏览器窗口 来进行的定位
-
如果不设置定位坐标，就在原来的位置
-
层级 要被普通标签高
-
如果结合定位坐标，就是相对于目标位置的距离
-
设置固定定位之后，一定是块元素
Relative相对定位
-
相对定位占空间
-
如 果不结合定位坐标，就是在原来的位置
-
如果结合定位坐标，相对 【自身】 ，作为参考点
-
层级要高于普通的元素
绝对定位(absolute)
设置绝对定位，不占空间
设置层级高于普通的元素
不结合定位坐标，就是在原来的位置
绝对定位如果定位坐标，以祖先元素（设置绝对定位，
相对定位）作为坐标的参考点
如果祖先没有设置定位，一直往上找，直到找到body,就以body来进行定位，相对于整个窗口来进行定位
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
