web前端开发的css样式表入门教程（一）
一、css介绍
css:cascading style sheet 层叠样式表
css语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行（属于浏览器解释型语言）。
css的优点：
1.表现和内容相分离
2.提高页面浏览速度
3.易于维护和改版
总结：实现了结构（structrue）于形式（persentation)的分离
二、css的使用技术
1.使用HTML标记符的style属性嵌入css样式
<p style="background:blue;color:green;">2.在网页<head>标记符中使用<style>标记符嵌入css样式（头部样式）
<style type="text/css">
p{
background:blue;
color:green;
}
</style>3.使用<link>标记符链接外部的css文件
<link href="style.css" rel="stylesheet"
type="text/css">
/*style.css(外部的css代码）*/
p{
background:blue;
color:green;
}
三、常用的css样式类型
选择器{css属性: css属性值; css属性: css属性值; ......}
例：
h1{
text-align:center;
font-family:黑体
}根据选择器的不同，css的类型分为：
HTML标签选择器
类选择器
伪类选择器
ID选择器
具有上下文关系的选择器
下面将一一介绍
1.HTML标签选择器
HTML标签选择器是最基本的选择器类型，可以为某个或某些具体的HTML元素应用样式定义。
例：
p{
font-size:30px;
color:#343423;
text-indent:2em;(首行缩进两字符）
line-height:2em;(设置行高为2)
}2.类选择器
类选择器定义了某种类型的样式，可以应用于多种HTML标签。
使用方法：
1.定义类样式
.类名{css属性:css属性值; css属性:css属性值; ......}2.在HTML标签中通过class指定类属性
<HTML 标签 class=“类名”>3.伪类选择器
用于设置不同类型超链接的显示方式
例：
a:link{color:#FF0000}(未访问的超链接)
a:visited{color:#00FF00}(已访问的超链接)
a:hover{color:#FF00FF}(鼠标移动到超链接上)
a:active{color:#0000FF}(选定的超链接)与类样式结合使用
例：
a.lian:hover{font-size:150%}4.ID选择器
为HTML标签中指定id属性的元素设置样式
使用方法
定义ID选择器样式
#ID名{css属性: css属性值; css属性: css属性值; ......}
在HTML中指定ID属性
<HTML标签 ID="ID名">5.具有上下文关系的选择器
css定义中有以空格隔开的两个选择器，即为有上下文关系的选择器，第二个选择器必须位于第一个选择器中。
例：
h1 em{color:blue;
font-family:"宋体"
}小结：
四、常用css样式属性
1.字体属性
2.背景属性
3.区块属性
注意：图像img无text-align属性，如需将图片居中可将上一级标记进行水平对齐处理
<div>可定义文档中的分区或节（division/section)，把文档分割为独立的、不同的部分。
＜div＞是一个块级元素，它的内容自动地开始一个新行，其本身无特殊格式，可以通过<div>的class或id应用额外的样式。
4.方框属性
5.边框属性
6.列表属性
7.定位属性
定位属性-position的四种取值：
static:静态定位，默认属性值；
relative：相对定位，以盒子*【1】自身起始位置为参考，例如盒子以盒子起始位置左上角为原点；
absolute:绝对定位，其定位基准是一个已定位的祖先盒子。例如父盒子已经定位，则以其父盒子左上角为坐标原点；父相对子绝对；
fixed:固定定位，以其定位基准是浏览器窗框，其位置与浏览器内容无关。
【1】css盒模型
css盒模型
8.扩展属性
后记
以上内容为css样式基础教程的第一讲，有关css与div布局的更多内容我们将在下一章节继续讲解。
这是笔者的第一次创作，可能有些小错误，望读者仔细甄别并反馈以纠正错误，希望在将来的时光里可以与诸君共同进步！
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
