外部样式表-独立的一个文件（myStyles.css）
<head><link rel="myStyles"
type="text/css" href="样式表的URL"/></head>
内联样式表
<h1
style="color:red;">……</h1>
嵌入式样式表
<head><style
type="text/css">…………<style></head>
<head><style type="text/css">@import
url(myStylses.css);<style></head>
——在嵌入表中引入外部表
link
@import——当你的网页须要引入多个外部CSS文件时.你可以运用
link引入一个CSS,然后在这个CSS文件中用@import形式引入其它多个 CSS文件
- 样式继承
不可继承——margin、padding、border、background
可被继承——
计算值继承——front-size
- 样式层叠
优先级：
浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)
排放次序判断
-
找出选择器对特定元素的所有声明
-
根据样式声明重要性(!import)和来源进行优先级排序——浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)
-
特殊性排序-制定更详细的选择器将覆盖更一般的选择器。特殊性：a(内联)>b（id选择器数量）>c（属性（类、伪类）选择器数量）>d（元素（元素、伪元素）选择器数量）
-
CSS规则在文档中出现顺序——后出现的>先出现的>@import(样式表本身规则前出现)
z-index
z-index在设置了position=absolute/relative时有效
值较高的覆盖较低的
z-index=-1时元素在默认文本下
<style
type="text/css">
middle{position:absolute;left:60px;top:60px;z-index:2;background-color:orange;}
</style>
-
效果控制：
制定裁剪区域（clip）
<style
text="text/css">
auto auto);}
</style>
设置元素可见性
display——none、block（块级）、inline（内嵌级）
visibility——visible（可见）、hidden（影藏）、inherit（继承；默认值）
两者的区别在于visibility属性定义的元素任然保留原来的显示空间
-
CSS控制的区域：
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
ems |
|
|
|
|
||
|
|
|
||
|
|
|
rgb |
|
|
|
|
||
|
|
|
||
|
|
aqua（水绿/ |
||
|
|
|
||
font-style（倾斜程度）normal、italic=oblique
font-variant（字体变形）normal、small-caps
font-weight（粗细）100、200、300、400=normal、500、600、700=bold、800、900、lighter、bolder
font-size（大小）xx-small、x-small、small、medium、large、x-large、xx-large
font-family（字体名）times new Roman、Arial、Verdana
元素内容文本属性
text-indent(首行缩进)
text-algn（对齐方式）left、right、center
vertical-align
text-decoration（文本装饰）none、underline、overline、line-through、blink
text-shadow（文本阴影）none、color值
line-height（行高）normal、auto
word-spacing（词间距）——空格为词的分割线
letter-spacing（字间距）
text-transform（大小写形式）capitalize（词首大写——空格为分隔符）、uppercase、lowercase、none
white-space
normal pre nowrap(不换行)
背景和颜色
color 16进制、rgb()、颜色名字
background
#idDiv{bachground:red url(rdl_cup.jpg) no-repeat scroll right
bottom}
background-color transparent
background-image
background-repeat repeat no-repeat repeat-x
repeat-y
background-position {1,2}
top/center/buttom||left/center/right
background-attachment scroll fixed
定位
在正常流中，文本元素按从上到下、从左到右的格式布局。——块级元素从上到下，内嵌元素从左到右。
正常流中的元素影响其相邻元素的位置
-
初始化容器快——根元素（html）
-
块级元素、表格单元的内容区——静态或相对定位的费根元素
-
不是静态定位（relative、absolute、fixed）的祖先元素——绝对定位的非根元素——祖先元素为块级元素：容器块扩充到该元素的padding边缘；祖先元素是内嵌元素的容器快为内容区；无祖先元素的为初始化块
定位（position top、right、bottom、left）
-
静态定位(static)——系统默认，按照它们在HTML的出现顺序生成。
-
相对定位(relative)——相对于他在正常情况下的默认位置。去而留其位(不影响文本流中接下来的其它层的位置)，可能覆盖其它元素
<style
type="text/css">
div{position:relative;height:80pc;width:80px;}
.style1{left:30px;top:30px;border:1px solid
black;margin-bottom:10px;background-color:#acd373;}</style>
-
绝对定位(absolute)——孤立（脱离流）、空间被释放、相对其容器块定位
<style
type="text/css">
.style{position:absolute;top:10px;left:10px;}</style>
溢出（overflow）
visible——默认值；不裁剪、无滚动、强制显示全部内容
hidden——裁剪多余内容、
scroll——裁剪多余内容、有滚动
auto
<style
type="text/css">
<div{width:250px;height250px;position:absolute;overflow:scroll;}
</style>
-
固定定位(fixed)——孤立、相对视口=viewpoint（浏览器窗口）定位——永远显示在视区内。
浮动（float）——none、left、right
功能：多列的网页布局、从无序列表创建导航工具条、不使用表格而创建内饰表格的对齐方式
-
float!=none时，元素被视为块级元素
-
浮动文本类型元素必须制定width
-
浮动元素margin不会重合
-
浮动元素在内容区内，不进padding
-
相邻的浮动元素向同一方向移动——直到碰到父级内边缘或前面的浮动元素
-
超过容器宽度的元素向相反方向浮动
-
浮动的内嵌元素顶部低于前面的块级元素
-
浮动元素顶部低于前一浮动元素
-
清除浮动clear:none/left/right/both
{float:right;margin:2opx;
clear:ri}
</style>
布局
元素盒：每个元素都会产生一个矩形盒子围绕在元素类容之外
元素的背景（颜色和图）在内边距区域可见，且延伸到边框下
元素盒总宽度=margin+border+padding+width
padding—防止边框挤压内容，
背景填充padding；padding不重合
border：1个到4个围绕在元素内容和内边距的线
边框样式
none
double
groove
ridge
outset
dotted
>dashed
solid
-
非可替换内嵌元素不受border影响
-
可替换元素受影响
- 上、右、下、
<h1
style="border:.5em(border-width) outset(border-style) red(border-color)"hello</h1>
margin{margin-top margin-right
margin-bottom margin-left}：
-
外边距是透明的，其上显示的是父级的背景。
-
margin为负数时，突破父级元素与页面其它元素重叠
-
正常文档流中相邻块级元素垂直外边距重合——取其大。
-
浮动元素、绝对定位元素、内嵌元素垂直外边距不会重合
h1{margin:3px
20px 3px 20px;}
width和height：——可以设置块级元素和内嵌可替换元素（图片）；不可以设置内嵌文本元素=不可替换元素（文本）
列表格式
项目图片
list-style-image
项目符号
评论