客户端网页编程--第四章
第四章 CSS基础
使用CSS的优点：
- 提高页面浏览速度
- 缩短改版时间，降低维护费用
- 控制页面布局
- 实现表单和结构、内容相分离
- 更方便搜索引擎的搜索
外部样式表：在同一文档中，可以引用多个外部样式表文件。
eg:
/*mystyles.css*/
h1,h2,h3,h4 { color: blue}
、、、、、
<head>
<link rel="stylesheet" ttype="text/css" herf="#"/>
嵌入式样式表：作用范围仅限于该网页
eg:
<style type="text/css">
、、、样式定义、、、、、
</style>
内联样式表：放在某个元素内，仅供该元素使用
<h1 style="color: red;">红色标题列</h1>
样式规则语法：
body { color: black; padding: lem;}
body-----选择器
{color: black; padding: lem}----------声明块（color、padding:属性 black、lem:值）
注释：
/* */可以出现在样式规则之前，可以出现在样式规则之内，可以跨越多行注释。
1、元素选择器：
em { color: blue;}
2、类选择器：
.类名 {属性： 值；}
3、ID选择器：
#id名 { 属性： 值；}
4、包含选择器;
p em {color: blue;}
<body>
<h1>Heading <em>here</em> </h1>
<p>Lorem ipsum dolor <em>sit </em> amet</p>
</body>
5、通配符选择器：
* {color: red;}
6、伪类选择器：
a:link---未访问网页时
a:visited----已访问网页后
a:hover----光标悬浮其上时
a：active-----获取焦点（如鼠标点击）
选择器的选择：
1、是否重复使用（是则用类选择器，否则用id选择器）
2、组合类选择器<p class="red big"> font</p>
3、id选择器比类选择器更具体
CSS属性单位：
px（像素）:相对于浏览者的计算机屏幕分辨率来显示的
颜色单位：
1、为颜色取名：black
2、使用十六进制数组定义颜色，如#fcoeab
字体：
1、设置字体名称：font-family
2、设置字重：font-weight
3、设置字体大小：font-size
文本属性：
1、设置文本横向对齐：text-align
2、设置文本修饰方式：text-decoration
3、设置行高：line-height
字体颜色和背景：
1、文本颜色：color
2、背景颜色：background-color
3、背景图片：background-image
4、背景图片重复：background-repeat
eg:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
p {
text-align: center;
}
div{
height: 500px;
border: 1px solid red;
background-image:url("海豚.bmp");
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
</head>
<body>
<p>AAA</p>
<div>
你好呀！
</div>
</body>
</html>
样式继承：
1、margin、padding、border、background不被继承
2、font-size被计算时继承于子元素
样式折叠:
step1找到选择器匹配特定元素的所有声明
step2根据样式声明的重要性和来源进行优先级排序
step3按照特殊性排序
step4比较CSS的顺序