标签：soft 浏览器 normal spec letter black pad main 字母
一、方式
1.内联式引用
2.内部引用
3.外部引用(链接式引用，导入式引用)
4.优先级(由高到低) 内联式》外部链接式》内部式》外部导入式
二、内联式
1.直接从HTNL标签上注明格式
2。使用方法简单，不建议使用
3.维护成本高
三、内部引用
1.将样式声明在HTMl页面中
2.使用标签进行声明
3.把CSS代码集中在同一个区域，不仅便于维护，页面结构也清晰了
4.内部定义的样式不能被其他页面所使用
5.内部引用只使用与对特殊页面设置独特风格。
四、外部链接式引用
1.使用频率最高，最实用
2.将CSS样式定义在一个独立的文件中，使用.css作为扩展名，使用HTML的Link对象来引用它。
link rel="stylesheet" type="text/css" href = "./style/1.css" />
将CSS与HTML分离，同一个CSS文件可以被不同的HTML所使用
3.便于维护
五、外部导入式引用
1.以import方式导入的样式表，在HTML初始化时，会被导入HTML页面中，作为文件的一部分。
2.链接式引用只有在HTML标签需要此样式时才被引入。
3.导入式最大用处就是可以在一个HTML中导入多个样式表。
style type="text/css">
@import url("./style/1.css”)
style>
六、css注释与样式选择符
1.注释： /* */
2.样式选择符：标签选择符 类选择符 ID选择符
优先级(由高到低)：ID选择符》类选择符》标签选择符
3.标签选择符
@CHARSET "UTF-8";
body{
color:black /*页面文字为黑色*/
}
p {
font-family:"sans serif" /*字体为sans serif"*/
}
p {
texe-align:center;color:red /*文字居中，文字红色*/
}
4.类选择符
/*类选择符*/
p.right {
texe-align:right /*段落向右对齐*/
}
p.center {
texe-align:center /*段落居中*/
}
/*
段落向右对齐
段落居中
*/
/*另外一种表达方式*/
.center {
texe-align:center /*段落居中*/
}
/*
标题居中
段落居中
*/
5.ID选择符
/*ID选择符*/
#center {
texe-align:center /*段落居中*/
}
/*
段落居中
*/
6.选择符的嵌套
/*选择符的镶嵌*/
#main li{
color:red /*文字红色*/
}
/*
*/
7.样式表的层叠性
1.层叠性就是继承性
2.样式表的继承规则是：外部元素的样式会被该元素所包含的其他元素所继承
3.所有在元素中镶嵌的元素都会继承外层元素指定的属性值
html>
head>
title>样式表的层叠性--继承title>
style type="text/css">
style>
head>
body>
div id="main">
ul>
li>列表项1li>
li>列表项2li>
li>列表项3li>
ul>
p>段落1p>
p>段落2p>
p>段落3p>
div>
body>
html>
八、CSS盒子模型
1.组成：内容、边框border、填充padding、边界margin等四部分组成。
CSS 字体属性（Font）
| 属性 |
描述 |
CSS |
| font |
在一个声明中设置所有字体属性。 |
1 |
| font-family |
规定文本的字体系列。 |
1 |
| font-size |
规定文本的字体尺寸。 |
1 |
| font-size-adjust |
为元素规定 aspect 值。 |
2 |
| font-stretch |
收缩或拉伸当前的字体系列。 |
2 |
| font-style |
规定文本的字体样式。 |
1 |
| font-variant |
规定是否以小型大写字母的字体显示文本。 |
1 |
| font-weight |
规定字体的粗细。 |
1 |
font-weight：字体粗细
| 属性值 |
描述 |
| normal |
默认值。定义标准的字符。 |
| bold |
定义粗体字符。 |
| bolder |
定义更粗的字符。 |
| lighter |
定义更细的字符。 |
| 100、200…900 |
400 等同于 normal，而 700 等同于 bold。 |
font-size：字体大小
| 属性值 |
描述 |
| xx-small、x-small、small、medium、large、x-large、xx-large |
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 |
| smaller |
把 font-size 设置为比父元素更小的尺寸。 |
| larger |
把 font-size 设置为比父元素更大的尺寸。 |
| length |
把 font-size 设置为一个固定的值。 |
| % |
把 font-size 设置为基于父元素的一个百分比值。 |
font-family：字体
font-style：斜体
| 属性值 |
描述 |
| normal |
默认值。浏览器显示一个标准的字体样式。 |
| italic |
浏览器会显示一个斜体的字体样式。 |
| oblique |
浏览器会显示一个倾斜的字体样式。 |
CSS 背景属性（Background）
| 属性 |
描述 |
CSS |
| background |
在一个声明中设置所有的背景属性。 |
1 |
| background-attachment |
设置背景图像是否固定或者随着页面的其余部分滚动。 |
1 |
| background-color |
设置元素的背景颜色。 |
1 |
| background-image |
设置元素的背景图像。 |
1 |
| background-position |
设置背景图像的开始位置。 |
1 |
| background-repeat |
设置是否及如何重复背景图像。 |
1 |
| background-clip |
规定背景的绘制区域。 |
3 |
| background-origin |
规定背景图片的定位区域。 |
3 |
| background-size |
规定背景图片的尺寸。 |
3 |
CSS 文本属性（Text）
| 属性 |
描述 |
CSS |
| color |
设置文本的颜色。 |
1 |
| direction |
规定文本的方向 / 书写方向。 |
2 |
| letter-spacing |
设置字符间距。 |
1 |
| line-height |
设置行高。 |
1 |
| text-align |
规定文本的水平对齐方式。 |
1 |
| text-decoration |
规定添加到文本的装饰效果。 |
1 |
| text-indent |
规定文本块首行的缩进。 |
1 |
| text-shadow |
规定添加到文本的阴影效果。 |
2 |
| text-transform |
控制文本的大小写。 |
1 |
| unicode-bidi |
设置文本方向。 |
2 |
| white-space |
规定如何处理元素中的空白。 |
1 |
| word-spacing |
设置单词间距。 |
1 |
| hanging-punctuation |
规定标点字符是否位于线框之外。 |
3 |
| punctuation-trim |
规定是否对标点字符进行修剪。 |
3 |
| text-align-last |
设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
3 |
| text-emphasis |
向元素的文本应用重点标记以及重点标记的前景色。 |
3 |
| text-justify |
规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
3 |
| text-outline |
规定文本的轮廓。 |
3 |
| text-overflow |
规定当文本溢出包含元素时发生的事情。 |
3 |
| text-shadow |
向文本添加阴影。 |
3 |
| text-wrap |
规定文本的换行规则。 |
3 |
| word-break |
规定非中日韩文本的换行规则。 |
3 |
| word-wrap |
允许对长的不可分割的单词进行分割并换行到下一行。 |
3 |
CSS 外边距属性（Margin）
| 属性 |
描述 |
CSS |
| margin |
在一个声明中设置所有外边距属性。 |
1 |
| margin-bottom |
设置元素的下外边距。 |
1 |
| margin-left |
设置元素的左外边距。 |
1 |
| margin-right |
设置元素的右外边距。 |
1 |
| margin-top |
设置元素的上外边距。 |
1 |
CSS 内边距属性（Padding）
| 属性 |
描述 |
CSS |
| padding |
在一个声明中设置所有内边距属性。 |
1 |
| padding-bottom |
设置元素的下内边距。 |
1 |
| padding-left |
设置元素的左内边距。 |
1 |
| padding-right |
设置元素的右内边距。 |
1 |
| padding-top |
设置元素的上内边距。 |
1 |
CSS 边框属性（Border 和 Outline）
| 属性 |
描述 |
CSS |
| border |
在一个声明中设置所有的边框属性。 |
1 |
| border-bottom |
在一个声明中设置所有的下边框属性。 |
1 |
| border-bottom-color |
设置下边框的颜色。 |
2 |
| border-bottom-style |
设置下边框的样式。 |
2 |
| border-bottom-width |
设置下边框的宽度。 |
1 |
| border-color |
设置四条边框的颜色。 |
1 |
| border-left |
在一个声明中设置所有的左边框属性。 |
1 |
| border-left-color |
设置左边框的颜色。 |
2 |
| border-left-style |
设置左边框的样式。 |
2 |
| border-left-width |
设置左边框的宽度。 |
1 |
| border-right |
在一个声明中设置所有的右边框属性。 |
1 |
| border-right-color |
设置右边框的颜色。 |
2 |
| border-right-style |
设置右边框的样式。 |
2 |
| border-right-width |
设置右边框的宽度。 |
1 |
| border-style |
设置四条边框的样式。 |
1 |
| border-top |
在一个声明中设置所有的上边框属性。 |
1 |
| border-top-color |
设置上边框的颜色。 |
2 |
| border-top-style |
设置上边框的样式。 |
2 |
| border-top-width |
设置上边框的宽度。 |
1 |
| border-width |
设置四条边框的宽度。 |
1 |
| outline |
在一个声明中设置所有的轮廓属性。 |
2 |
| outline-color |
设置轮廓的颜色。 |
2 |
| outline-style |
设置轮廓的样式。 |
2 |
| outline-width |
设置轮廓的宽度。 |
2 |
| border-bottom-left-radius |
定义边框左下角的形状。 |
3 |
| border-bottom-right-radius |
定义边框右下角的形状。 |
3 |
| border-image |
简写属性，设置所有 border-image-* 属性。 |
3 |
| border-image-outset |
规定边框图像区域超出边框的量。 |
3 |
| border-image-repeat |
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
3 |
| border-image-slice |
规定图像边框的向内偏移。 |
3 |
| border-image-source |
规定用作边框的图片。 |
3 |
| border-image-width |
规定图片边框的宽度。 |
3 |
| border-radius |
简写属性，设置所有四个 border-*-radius 属性。 |
3 |
| border-top-left-radius |
定义边框左上角的形状。 |
3 |
| border-top-right-radius |
定义边框右下角的形状。 |
3 |
| box-decoration-break |
|
3 |
| box-shadow |
向方框添加一个或多个阴影。 |
3 |
CSS 列表属性（List）
| 属性 |
描述 |
CSS |
| list-style |
在一个声明中设置所有的列表属性。 |
1 |
| list-style-image |
将图象设置为列表项标记。 |
1 |
| list-style-position |
设置列表项标记的放置位置。 |
1 |
| list-style-type |
设置列表项标记的类型。 |
1 |
| marker-offset |
|
2 |
九、使用css控制超链接
1.css提供了对超链接进行控制的能力，包括了超链接不同状态、伪类、按钮特效等等。
2.css允许针对超链接的未访问、已访问、活动、图标悬停等状态分别定义了不同的样式。这样便于可为网站添加奇妙而实用的效果。可以通过伪类(pseudo-class)来实现这些效果。
3.伪类是针对HTML元素的条件和事件所定义的CSS样式。
十、css伪类
/*从未访问过的链接样式*/
a:LINK {
color: #6699CC;
}
/*已访问的链接样式*/
a:VISITED {
color: #660099;
}
/*活动的链接*/
a:ACTIVE {
background-color: #FFFF00;
}
/*有鼠标悬停的链接样式*/
a:HOVER {
color: orange;
font-style: italic;
}
十一、按钮超链接
DOCTYPE html>
html>
head>
title>button.htmltitle>
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="this is my page">
meta http-equiv="content-type" content="text/html; charset=UTF-8">
style type="text/css">
style>
head>
body>
a href="#">首页a>
a href="#">列出所有联赛a>
a href="#">添加新联赛a>
a href="#">注册联赛a>
a href="#">用户登入a>
body>
html>
十二、css/div页面布局
1.div标签是实现页面布局的重要标签，是英文Division的缩写，即分区、分块的意思，是一个大容器。
2.span是另外一个常用语布局的标签，span在一行内定义一个区域，也就是一行内可以被多个span划分成好几个区域，是一个小容器。
3.大容器中可以放置小容器。
4.css与div
DOCTYPE html>
html>
head>
title>css与divtitle>
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="this is my page">
meta http-equiv="content-type" content="text/html; charset=UTF-8">
style type="text/css">
#left{
background-color: #CCC0CC;
float: left;
height: 300px;
width: 200px;
border: 9px soid #333333;
}
#right{
background-color: #CCCCCC;
float: left;
height: 300px;
width: 200px;
border: 2px soid #333333;
}
style>
head>
body>
div id="left">左侧区域div>
div id="right">右侧区域div>
body>
html>
5.布局居中显示
DOCTYPE html>
html>
head>
title>css与divtitle>
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="this is my page">
meta http-equiv="content-type" content="text/html; charset=UTF-8">
style type="text/css">
#main{
width: 408px;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
#left{
background-color: #CCC0CC;
float: left;
height: 300px;
width: 200px;
border: 9px soid #333333;
}
#right{
background-color: #CCCCCC;
float: left;
height: 300px;
width: 200px;
border: 2px soid #333333;
}
style>
head>
body>
div id = "main">
div id="left">左侧区域div>
div id="right">右侧区域div>
div>
body>
html>
CSS简单介绍
标签：soft 浏览器 normal spec letter black pad main 字母
原文地址：http://www.cnblogs.com/zdf159/p/7256838.html