一.CSS的简介
1.什么是CSS：
css称为层叠样式单
它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。
在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。
2.CSS与传统HTML描述数据方式比较有那些优势
表达效果丰富
文档体积比较小
便于信息检索
可读性好
注意：CSS是将文档格式和样式分离，便于管理和修改，使网页更加完善。
二.CSS的基本使用
1.css的引用方式：
CSS可以控制HTML文档的显示。但在控制文档显示之前，首先应在需要显示的HTML文档中引入CSS样式单，HTML提供了以下四种引入方式：
使用内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
使用内部样式定义：这种方式是通过在html文档头定义样式单部分来实现，在这种方式下，每批CSS样式只能控制一份HTML文档。
链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档。
导入外部样式文件：这种方式与第三种方式类似，只能使用@import来引入外部样式表文件。
2.使用内联样式（行内样式）：
内联样式是所有样式中最为直接的一种，它直接对HTML标签使用style属性。
表现形式与HTML没有做分离。
3.使用内部样式（内嵌样式）：
内部样式是将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明。
他将表现形式与结构分离出来:
<html>
<head>
<title>.......</title>
<style type="text/css">
<!---------
p{...........}
------>
</style>
</head>
<body>...........</body>
</html>
4.引入外部样式文件：
此种方式使用频率最高，也是最使用的方式，让结构与表现分离。
语法：<link type="text/css" rel="stylesheet" href="外部样式文件">
5.导入外部样式文件
这种导入方式和<link>f方式功能类似，就是语法不同，在<style>和</style>之间使用。
语法：@import“样式文件”或者@import url（"样式文件"）
6.优先级问题：
优先级顺序： 内联样式>内部样式>@import>link
三.CSS字体和文本的相关属性：
CSS提供了控制字体的属性，设置字体的大小、样式、粗细、类型等：
font-family 规定文本的字体系列。比如：“serif”、“sans-serif”等
font-size 规定文本的字体尺寸。
font-style 规定文本的字体样式。主要有normal、italic、oblique（斜体）
font-weight 规定字体的粗细。主要有normal、bold、自定义粗细。
示例：
<head>
<style>
h2{
font-family:黑体，幼圆；
}
p.article{
font-size:20px;
font-style:italic
p.kaiti{
font-family:楷体_GB2312;
font-style:normal;
font-weight:bold
}
</style>
<head>
<body>
<h2>风<h2>
<p class="article">解落三秋叶，能开二月花</p>
<p>过奖千尺浪，入竹万竿斜</p>
<p class="kaiti">作者：唐建升</p>
</body>
CSS提供了文本的属性，包括文本的颜色、修饰、字符间距等外观。
color 设置文本的颜色
letter-spacing 设置字符间距
line-height 设置文本行高
text-align 设置文本的对齐方式，只要有left、right、center。
text-decoration 设置文本的装饰效果，主要有overline（上划线）、underline（下划线）、linethrough（中划线或者删除线）。
text-indent 设置文本块首行缩进
text-transform 设置文本的大小写，主要有uppercase（大写）、lowercase（小写）、capitalize（单词首字母大写）
word-spacing 设置单词间距。
四.CSS边框和背景相关属性：
CSS常用边框属性：
整体设置属性：
border 在一个声明中设置所有边框属性
border-width 设置四条边框的宽度
border-style 设置四条边框的样式、主要有dotted（点划线）、solid（实心线）、double（双划线）、dashed（虚线）；
border-color 设置四条边框的颜色
单个边框的设置属性：（left、right、top、bottom）
border-left 在一个声明中设置所有左边框的属性，对应的还有border-right等
border-left-color 设置左边框颜色，对应还有border-right-color等三边颜色
border-left-style 设置左边框样式，对应还有border-right-style等三边样式
border-left-width 控制做边框宽度，对应还有border-right-width等三边宽度
注意：将各个属性值合并，通过空格隔开，将多个属性合并在一起。
CSS中好多属性可以合并：border属性、font属性、background属性、padding属性和margin属性等
例如：border：5px double #FF00FF
CSS背景的相关属性可以对背景图片进行精确的控制：
background 在一个声明中设置所有的背景属性
background-attachment 设置背景图像是否固定或者随页面的其余部分滚动，主要有fixed（图片滚动）和scroll（图片不滚动）两个值
background-color 设置元素的背景颜色
background-image 设置元素的背景图像。主要有url和none两个属性。url（）；
background-position 设置背景图像的开始位置。可以指定top、left等。也可以指定具体的像素位置。
background-repeat 设置是否及如何重复背景图像。主要有repeat（全部）、repeat-x（向横坐标平铺）、repeat-y（向纵向标平铺）、
no- repeat（不平铺）
五.CSS列表和表格的相关属性：
CSS列表元素的属性：
list-style 在一个声明中设置所有的列表属性
list-style-image 将图像设置为列表项标记，主要有URL值
list-style-position 设置列表项标记的放置位置，主要有outside（外边）和inside（里面）两个值。
list-style-type 设置列表项标记的类型。主要有disc、circle、square、decimal、decimal-zero、lower-roman、upper-roman、lowe-greek、
lower-latin、upper-latin、armenian、georgian、none
示例：
CSS表格的相关属性：
border-collapse 设置是否吧表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离
caption-side 设置表格标题的位置，默认在上面。
empty-cells 设置是否显示表格中的空单元格。
示例：
六.CSS定位与DIV布局：
1.盒子模型：
我们可以把页面中的元素都可以看做是一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以调整盒子的边 框和距离的参数来调节盒子的位置。
总结：一个盒子的宽度或者高度是由content+padding+margin，并且对于任何一个盒子都可以分别设定4条边各自的border、padding、margin。因此我们 可以利用好盒子的这些属性，就能很好的实现各种各样的排版效果。
元素：
border属性主要有3个，分别是color（颜色）、width（宽度）、style（风格）、通常在设置border是常常将三个属性进行很好的 配合，才能达到良好的效果。
示例：
padding用于控制content与border之间的距离。（距离指的是上，右、下、左）
示例：
margin指的是元素与元素之间的距离。
示例：行级标签
块级标签：
注意:行级标签元素之间两边的距离等于两边内部的距离相加。
而两个块级元素之间的距离不再是margin-top与margin-bottom的和，而是两者之间的较大者。
margin除了设置正数以外，也可以设置为负数，当设置为负数时，会使得块向反方向移动，甚至覆盖在另外的快上。
注意：当块之间是父子关系，通过设置子块的margin为负数，可以使得子块从父块中分离出来。
2.元素定位:
网页中的各种元素都必须有自己的位置，从而搭建出整个页面的结构。常使用CSS的float、position和zindex属性来进行块元素的定位。
float定位是CSS排版中的重要的手段，属性float的值很简单，可以设置为left、right或者默认值none，当设置了元素向左或向右浮动时，元素会向其父 元素的左侧或右侧靠紧。
注意：float属性在文字排版和布局排版中经常使用到，要想学好页面的布局，float属性必须用的很熟练。
扫一扫
2762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
