css的介绍
⼀.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{
css表格样式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是常常将三个属性进⾏很好的    配合，才能达到良好的效果。
⽰例：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。