CSS学习笔记
2017-02-20 23:49
169 查看
CSS（Cascading Style Sheets,层叠样式表）是一种应用于网页的标记语言，其作用是为HTML、XHTML以及XML等标记语言提供样式描述。当IE浏览器读取HTML、XHTML或XML文档时，同时将加载相对应的CSS样式，即将按照样式描述的格式显示网页内容。CSS文件用于控制网页的布局格式和网页内容的样式，所以用户仅需要修改CSS文件内容即可改变网页显示的效果。使用CSS后可以大大降低网页设计者的工作量，提高网页设计的效率。
CSS技术的最大优势有：
1.样式重用
2.轻松地增加网页的特殊效果
3.使元素更加准确定位
使用CSS可以非常灵活并更好地控制页面的确切外观。例如，控制许多文本属性，包括特定字体和字大小；粗体、斜体、下划线和文本阴影；文本颜色和背景颜色；链接颜色和链接下划线等。通过使用CSS控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。
除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。可以对块级元素执行的操作有：设置边距和边框，将它们放置在特定位置，添加背景颜色，在周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。
CSS样式表由多条样式规则组成，每种样式规则都设置一种样式。一种样式规则，就是针对HTML标记对象所设定的显示样式。
CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或者文档来定义显示的外观。每条样式规则由三部分构成：选择符（selector）、属性（properties）和属性的取值（value），基本格式如下：
selector{property:value}
selector选择符可以采用多种形式，但一般为文档中的html标记，例如“<body>”“<table>”和“<p>”等。
property属性则是选择符指定的标记所包含的属性。
value指定了属性的值。
注：如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号(;)隔开。
例：
div{color:red}
1、类选择符定义样式
除了可以为多个标记指定相同样式外，还可以使用类选择符来定义一个样式。定义类选择符方法是在自定义样式的名称前面加一个句点(.)。要使用类选择符定义的样式，只需将标记的class属性指定为样式名称。
例1：
.Title{
font-family:"宋体";
font-size:16px;
color:#00509F;
font-weight:bold;
}
例2：
<p class="Title">天门中断楚江开，碧水东流至此回</p>
<span class="Title">天门中断楚江开，碧水东流至此回</span>
<div class="Title">天门中断楚江开，碧水东流至此回</div>
2、ID选择符定义样式
在页面中，元素的ID属性指定了某个唯一元素的表示，同样ID选择符可以用来对某个特定元素定义独特的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。与类选择符不同，使用ID选择符定义样式时，须在ID名称前加上一个“#”号。
例1：
#Title{
font-family:"宋体";
font-size:12px;
font-weight:bold;
color:#FFFFFF;
background-color:#00509F;
}
例2：
<p id="Title">天门中断楚江开，碧水东流至此回</p>
3、伪类选择符
伪类选择符可以看作一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。伪类选择符定义的样式最常应用在定位连接标记(<a>)上，即链接的伪类选择符。
例：
a:link{color:#FF0000;text-decoration:none}
a:visited{color:#00FF00;text-decoration:none}
a:hover{color:#0000FF;text-decoration:underline}
a:active{color:#FF00FF;text-decoration:underline}
4、混合方式
在CSS中任意一种方式都可以进行组合。
例1：
.Title,div#t,h1,#HyClass span{
font-family:"宋体";
font-size:16px;
color:#00509F;
font-weight:bold;
}
例2：
<li class="Title">两岸青山相对出，孤帆一片日边来</li>
<div id="t">两岸青山相对出，孤帆一片日边来</div>
<h1>两岸青山相对出，孤帆一片日边来</h1>
<div id="HyClass">
<span>两岸青山相对出，孤帆一片日边来</span>
</div>
5、样式表注释
可以在CSS中出入注释来说明代码的意思，注释可以提高代码的可读性。
例：
txt{
text-align:center;/*文本居中排列*/
color:red;/*文字为红字*/
font-family:"华文行楷";/*字体为华文行楷*/
}
CSS的属性可参考网页http://www.w3school.com.cn/css/index.asp
在CSS中可以使用4种不同的方法，将CSS规则应用到网页中，包括：直接定义元素的STYLE属性、定义内部样式表、嵌入外部样式表和链接外部样式表。上述4种方法将样式表分为内部样式表和外部样式表。
1、链入外部样式表（优先权第二高）
链入外部样式表是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区。
例：
<link rel="stylesheet" type="text/css" href="skin.css">
<link>标记的属性rel指定链接到样式表
type表示样式表类型为CSS样式表
href指定了CSS样式表所在的位置
注：
如果HTML文档与CSS样式表没有在同一路径下，则需要指定样式表的绝对路径或者引用位置。
2、内部样式表（优先权第三高）
内部样式表是将CSS样式表直接在HTML页面代码的<head>标记区定义，样式表由"<style type="text/css">"标记开始至"<style>"结束。
例：
<style type="text/css">
body{background:#FFF;text-align:center;}
div,ul,li,dl,dt,dd,table,td,input{font:12px/20px "宋体";color:#333;}
</style>
3、导入外部样式表（优先权最低）
导入外部样式表是指在内部样式表的<style>标记中使用@import导入一个外部样式表。
例：
<style type="text/class">
@import "skin.css"
</style>
注1：使用时导入外部样式表的路径。导入方法与链入外部样式表的方法一样。导入外部样式表相当于将样式表导入到内部样式表中，其输入方式更有优势.
注2：
导入外部样式表必须在样式表的开始部分，其他内部样式表之上。
4、内嵌样式表（优先权最高）
内嵌样式表是混合在XHTML标记里使用的，通过这种方法，可以很简单地对某个元素单独定义样式。使用内嵌样式表的方法是直接在XHTML标记中使用style属性，该属性的内容就是CSS的属性和值。
例：
<body style="backgroud-image:url("flower.jpg");background-position:center">
<h3 style="color:black">使用CSS内嵌样式</h3>
</body>
注：内嵌样式表只能对HTML标记定义样式，而不能使用类选择符或者ID选择符定义样式。
教材来自《Java Web开发 课堂实录》宋井峰 王艳涛 程杰/编著 清华大学出版社
CSS技术的最大优势有：
1.样式重用
2.轻松地增加网页的特殊效果
3.使元素更加准确定位
使用CSS可以非常灵活并更好地控制页面的确切外观。例如，控制许多文本属性，包括特定字体和字大小；粗体、斜体、下划线和文本阴影；文本颜色和背景颜色；链接颜色和链接下划线等。通过使用CSS控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。
除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。可以对块级元素执行的操作有：设置边距和边框，将它们放置在特定位置，添加背景颜色，在周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。
CSS样式表由多条样式规则组成，每种样式规则都设置一种样式。一种样式规则，就是针对HTML标记对象所设定的显示样式。
CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或者文档来定义显示的外观。每条样式规则由三部分构成：选择符（selector）、属性（properties）和属性的取值（value），基本格式如下：
selector{property:value}
selector选择符可以采用多种形式，但一般为文档中的html标记，例如“<body>”“<table>”和“<p>”等。
property属性则是选择符指定的标记所包含的属性。
value指定了属性的值。
注：如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号(;)隔开。
例：
div{color:red}
1、类选择符定义样式
除了可以为多个标记指定相同样式外，还可以使用类选择符来定义一个样式。定义类选择符方法是在自定义样式的名称前面加一个句点(.)。要使用类选择符定义的样式，只需将标记的class属性指定为样式名称。
例1：
.Title{
font-family:"宋体";
font-size:16px;
color:#00509F;
font-weight:bold;
}
例2：
<p class="Title">天门中断楚江开，碧水东流至此回</p>
<span class="Title">天门中断楚江开，碧水东流至此回</span>
<div class="Title">天门中断楚江开，碧水东流至此回</div>
2、ID选择符定义样式
在页面中，元素的ID属性指定了某个唯一元素的表示，同样ID选择符可以用来对某个特定元素定义独特的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。与类选择符不同，使用ID选择符定义样式时，须在ID名称前加上一个“#”号。
例1：
#Title{
font-family:"宋体";
font-size:12px;
font-weight:bold;
color:#FFFFFF;
background-color:#00509F;
}
例2：
<p id="Title">天门中断楚江开，碧水东流至此回</p>
3、伪类选择符
伪类选择符可以看作一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。伪类选择符定义的样式最常应用在定位连接标记(<a>)上，即链接的伪类选择符。
例：
a:link{color:#FF0000;text-decoration:none}
a:visited{color:#00FF00;text-decoration:none}
a:hover{color:#0000FF;text-decoration:underline}
a:active{color:#FF00FF;text-decoration:underline}
4、混合方式
在CSS中任意一种方式都可以进行组合。
例1：
.Title,div#t,h1,#HyClass span{
font-family:"宋体";
font-size:16px;
color:#00509F;
font-weight:bold;
}
例2：
<li class="Title">两岸青山相对出，孤帆一片日边来</li>
<div id="t">两岸青山相对出，孤帆一片日边来</div>
<h1>两岸青山相对出，孤帆一片日边来</h1>
<div id="HyClass">
<span>两岸青山相对出，孤帆一片日边来</span>
</div>
5、样式表注释
可以在CSS中出入注释来说明代码的意思，注释可以提高代码的可读性。
例：
txt{
text-align:center;/*文本居中排列*/
color:red;/*文字为红字*/
font-family:"华文行楷";/*字体为华文行楷*/
}
CSS的属性可参考网页http://www.w3school.com.cn/css/index.asp
在CSS中可以使用4种不同的方法，将CSS规则应用到网页中，包括：直接定义元素的STYLE属性、定义内部样式表、嵌入外部样式表和链接外部样式表。上述4种方法将样式表分为内部样式表和外部样式表。
1、链入外部样式表（优先权第二高）
链入外部样式表是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区。
例：
<link rel="stylesheet" type="text/css" href="skin.css">
<link>标记的属性rel指定链接到样式表
type表示样式表类型为CSS样式表
href指定了CSS样式表所在的位置
注：
如果HTML文档与CSS样式表没有在同一路径下，则需要指定样式表的绝对路径或者引用位置。
2、内部样式表（优先权第三高）
内部样式表是将CSS样式表直接在HTML页面代码的<head>标记区定义，样式表由"<style type="text/css">"标记开始至"<style>"结束。
例：
<style type="text/css">
body{background:#FFF;text-align:center;}
div,ul,li,dl,dt,dd,table,td,input{font:12px/20px "宋体";color:#333;}
</style>
3、导入外部样式表（优先权最低）
导入外部样式表是指在内部样式表的<style>标记中使用@import导入一个外部样式表。
例：
<style type="text/class">
@import "skin.css"
</style>
注1：使用时导入外部样式表的路径。导入方法与链入外部样式表的方法一样。导入外部样式表相当于将样式表导入到内部样式表中，其输入方式更有优势.
注2：
导入外部样式表必须在样式表的开始部分，其他内部样式表之上。
4、内嵌样式表（优先权最高）
内嵌样式表是混合在XHTML标记里使用的，通过这种方法，可以很简单地对某个元素单独定义样式。使用内嵌样式表的方法是直接在XHTML标记中使用style属性，该属性的内容就是CSS的属性和值。
例：
<body style="backgroud-image:url("flower.jpg");background-position:center">
<h3 style="color:black">使用CSS内嵌样式</h3>
</body>
注：内嵌样式表只能对HTML标记定义样式，而不能使用类选择符或者ID选择符定义样式。
教材来自《Java Web开发 课堂实录》宋井峰 王艳涛 程杰/编著 清华大学出版社
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- XHTML+css,web标准学习笔记１——DOCTYPE声明
- CSS学习笔记五
- CSS学习笔记-附加篇(CSS的超级技巧）
- css学习笔记
- css学习笔记（5）动态定位 滤镜
- CSS学习笔记--列表
- CSS学习笔记二
- css学习笔记（3）图文混排 分级 鼠标
- CSS入门学习笔记
- CSS学习笔记一
- Css学习笔记（一）
- CSS入门学习笔记[1]
- XHTML+css,web标准学习笔记２——名字空间
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果）
- CSS学习笔记-附加篇（元素定义）。
- CSS学习笔记 ---转
- CSS学习笔记
- 学习CSS&Div笔记(1)
- CSS学习笔记-附加篇( 新浪大通栏Tab样式）
- css学习笔记