CSS
css（cascading style sheets）用于页面美化，决定页面内容的呈现方式。
网页中的页面布局，元素的位置，透明度，大小颜色，显示方式等等都用html元素来构建。
说明：CSS不是一种程序设计语言，而是一种用于网页排版的标记性语言，是对现有HTML语言功能的补充和扩展。
首先我们先进入css的语法
一条css语句由选择器和{}括起来的一条或多条声明组成。
选择器：想改变的对象。
一条声明由一个属性和一个值组成。每条声明间以{}和，隔开。属性，改变对象的样式属性，每个属性对应一个值，中间以：隔开。
选择器
选择器的表达方式有3种，标签选择器，id选择器，class选择器，其中class选择器最为普遍。
id选择器以#作为标志。每个页面中id值唯一，所以id选择器仅适用于一个元素。
class选择器以.作为标志。该选择器可以重复，也可以多个
，因此使用更加普遍。
在HTML中应用CSS
1)行内样式
2)内部样式
3)外部样式：一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/mycss.css之类的。
原则：
当有多个网页要用到同样的CSS样式时，采用外部样式的方式，这样网页的代码大大减少，修改起来非常方便；
只在单个网页中单独具有的CSS样式时，采用内部样式；
只有在某个网页的一、两个元素上才用到的CSS样式时，可以采用行内样式。
级联的优先级
前面我们学习了三种使用样式的方式，如果某元素如
在外部、内部及内联样式中都被设置color:red;、color:green;、color:blue;，那么到底是什么颜色，也即到底哪个有效呢？
这就涉及样式的优先级问题，从高到低分别是：
1. 内联样式
2. 内部样式表或外部样式表
3. 浏览器缺省样式
！其实就是，为哪个样式定义离元素的距离近，哪个就生效。
文字样式的控制
（1)文字字体
CSS字体样式属性
属性值 说明
font-family 字体类型
font-size 字体大小
font-style 字体斜体
color 字体颜色
除了字体颜色以外，其他文字属性都是font前缀开头，可以根据英文意思去记忆，方便很多。
font-family字体类型：
在css中，使用font-family属性定义字体类型。
语法：
• font-family:字体1，字体2，字体3；
可以指定多个字体，按照优先顺序，以逗号隔开。
示例代码：
<html>
<head>
<title>字体类型</title>
<style type="text/css">
#p1
{
font-family:宋体;
}
#p2
{
font-family:微软雅黑;
}
</style>
</head>
<body>
<p id="p1">我是宋体</p>
<p id="p2">我是微软雅黑</p>
</body>
</html>
很多时候，我们会在font-family后面，填写很多字体，这个原因是每个人的电脑安装的字体都不一样，如果你设置的字体，正好登录的电脑没有，那就需要后续的字体来支持。
2）color字体颜色：
语法：
• color:颜色值；
颜色值可以是一个关键字，也可以是一个十六进制的RGB值。
关键字的颜色值，其实就是比较常用的颜色的一种枚举值，比如
black，黑色
white，白色
green，绿色
blue，蓝色
red，红色
gray，灰色
等等；
font-size字体大小
语法：
• font-size: 关键字或者像素值；
font-size属性关键字取值
属性值 说明
xx-small 最小
x-small 较小
small 小
medium 默认值，正常
large 大
x-large 较大
xx-large 最
示例代码：
<html>
<head>
<title>字体大小</title>
<style type="text/css">
#p1
{
font-size: small;
}
#p2
{
font-size: medium;
}
#p3
{
font-size:large;
}
</style>
</head>
<body>
<p id="p1">我是small字体</p>
<p id="p2">我是medium字体</p>
<p id="p3">我是large字体</p>
</body>
</html>
4)文字粗细
我们使用font-weight属性来定义字体粗细。字体的粗细和字体的大小是不一样的，粗细指的是字体的肥瘦，而大小指的是字体的高宽。
语法：
•
font-weight：粗细值
属性取值有两种，一种是关键字，一种是100~900之间的数值。
关键字：
font-weight属性取值
属性值 说明
normal 默认值，正常
lighter 较细
bold 较粗
bolder 很
属性取值：
100，200，300，400，500，600，700，800，900；其中400相当于字体normal，700相当于bold。100表示最细，900表示最粗，值越大表示越粗，值越小表示越细。
在实际开发中，对于中文网页，一般仅用到bold、normal两个属性，不建议使用数值作为font-weight属性值。
示例代码：
<html>
<head>
<title>字体粗细</title>
<style type="text/css">
#p1 {font-weight:lighter;}
#p2 {font-weight:normal;}
#p3 {font-weight:bold;}
#p4 {font-weight:bolder;}
</style>
</head>
<body>
<p id="p1">字体粗细为：lighter</p>
<p id="p2">字体粗细为：normal</p>
<p id="p3">字体粗细为：bold</p>
<p id="p4">字体粗细为：bolder</p>
</body>
</html>
示例代码：
<html>
<head>
<title>字体粗细</title>
<style type="text/css">
#p1 {font-weight:100;}
#p2 {font-weight:400;}
#p3 {font-weight:700;}
#p4 {font-weight:900;}
</style>
</head>
<body>
<p id="p1">字体粗细为：100</p>
<p id="p2">字体粗细为：400</p>
<p id="p3">字体粗细为：700</p>
<p id="p4">字体粗细为：900</p>
</body>
</html>
5)斜体
语法：
• font-style:属性值
属性值 说明
normal 默认值，正常体
italic 斜
示例代码：
<html>
<head>
<title>字体斜体</title>
<style type="text/css">
#p1 { font-style:normal;}
#p2 { font-style:italic;}
#p3 { font-style:oblique;}
</style>
</head>
<body>
<p id="p1">字体样式为normal</p>
<p id="p2">字体样式为italic</p>
<p id="p3">字体样式为oblique</p>
</body>
</html>
6)文字修饰
在HTML中，为了代码便于理解，查找或者对于代码的作用进行提示等，我们需要给代码加注释。在HTML中，注释的写法如下，
HTML注释
<!--注释内容-->
而在css中，注释写入如下，
CSS注释
/*注释的内容*/
/*表示注释开始，*/表示注释结束。
在CSS盒子模型理论中，页面中所有元素都可以看成一个盒子，并且占据着一定的页面空间。
每个元素都看成一个盒子，盒子模型是由content内容、padding内边距、margin外边距、border边框，这4个属性组成。此外盒子模型还有宽度width和高度height两个属性辅助。
记住，所有元素都可以看成一个盒子！
CSS盒子模型的属性
属性 说明
border 边框
margin 外边距，定义页面中元素与元素之间的距离
padding 内边距，定义内容与边框之间的距离
content 内容，可以是文字或者图
1、内容区content
内容区是CSS盒子模型的中心，它呈现了盒子的主要内容，这些内容可以是文本、图片等多种类型。
内容区是盒子模型必备的组成部分，其他三个属性则是可选的。
2、内边距padding
内边距，是指内容区和边框之间的空间距离，可以看做是内容区的背景区域。
关于内边距属性有5种，分别是padding-top，padding-bottom，padding-left，padding-right和简洁写法的padding。
3、边框border
边框属性有，border-width、border-style、border-color和简洁写法的border。
border-width指定边框宽度，border-style指定边框的类型，border-color指定边框的颜色。
4、外边距margin
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不需要紧凑的连接在一起，这是CSS布局的一个重要技巧。
外边距的属性也是5种，margin-top，margin-bottom，margin-left，margin-right和简洁写的的margin。
position属性用于对元素进行定位。该属性有以下一些值：
• static 静态
• relative 相对
• fixed 固定
• absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
静态定位static：
如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的HTML对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
绝对定位absolute：
当元素的position属性值为absolute时，这个元素就变成了绝对定位的元素，这种方法能够精确地把元素移动到你想要的位置。
一个元素变成了绝对定位元素后，就脱离了正常的文档流。
语法：
position:absolute;
top:像素值；
bottom:像素值；
left：像素值；
right：像素值；
“position：absolute”，是结合top、bottom、left和right这4个属性一起使用的。
<html>
<head>
<title>绝对定位</title>
<style type="text/css">
#father {
padding:15px;
background-color:#0c6a9d;
border:1px solid silver;
}
#father div {
padding:10px;
background-color:#fcd568;
border:1px dashed red;
}
#box2 {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="father">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>
</html>
预览效果，你会发现box2在页面的右上角，它脱离了文档流。独立存在。
浮动float：
在前端开发中，我们可以使用属性float来到达灵活布局div元素的目的。浮动元素会生成一个块级框，而不论本身是何种元素。
语法：
• float:取值；
float属性取值
属性值 说明
left 元素向左浮动
right 元素向右浮
不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高
6、段落样式的控制
文本样式主要涉及多文字的排版效果，即整个段落文字的排版效果。因此，使用text前缀来区分。
CSS文本属性
属性 说明
text-decoration 下划线、删除线、顶划线
text-transform 文本大小写
font-variant 将英文文本转换为小型大写字母
text-indent 段落首行缩进
text-align 文本水平对齐方式
line-height 行高
letter-spacing 字距
word-spacing 词
text-decoration划线属性：
在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。
语法：
• text-decoration:属性值；
text-decoration属性取值
属性值 说明
none 默认值，去掉划线样式
underline 下划线
line-through 删除线
overline 顶划
1)首行缩进
font-variant属性：
在CSS中，使用font-variant属性只有一个作用，就是把文本设置成小型的小写字母，此属性只针对英文而言。
语法：
• font-variant:normal/small-caps;
font-variant属性
属性值 说明
normal 默认值，正常效果
small-caps 小型大写字
2)段落水平对齐
text-align文本对齐：
文本对齐分为，左对齐，居中对齐，右对齐。
语法：
• text-align：属性值；
text-align属性取值
属性值 说明
left 默认值，左对齐
center 居中对齐
right 右对齐
text-align属性只能针对文本文字和img标签，对其他标签无效。
7、CSS的层叠性
当页面中的元素被多个不同的选择器选中时，即多个不同的选择器的作用范围发生叠加时，如果选择器定义的规则发生冲突，则由CSS层叠性规则来处理这种冲突并决定页面元素的最终CSS样式。
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
