CSS：层叠样式表，又称之为网页的美容师。
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
选择器：想要给谁添加样式就选择谁
属性：需要更改的样式，例：颜色，大小，宽度等。
值：更改的参数。
div和span
div是html中的一个普通标签，默认独自占一行，可以把页面划分为多个区块，通常用来排版与布局（取代了<table>布局）
span同样是html中的一个普通标签，默认一行可以存多个，通常可以用来定义一小段文字的样式（取代了<font>的地位）
注意： 属性和之间用冒号隔开，每个属性后面都要以分号结束。
1.书写位置
1.1 行内样式 ：直接写在结构中的html标签身上的样式。
<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>
缺点（极少使用，测试时常用）
1.直接写在标签身上，样式过多，难以维护
2.冗余代码过多
<body>
<div style="color:green;">未闻花名<div/>
</body>1.2 内嵌式（理论上，可以写在html文件的任意位置，但是一般来说我们都是写在<head>标签里面）
首先书写一堆style的标签，在这对标签内部书写css样式。
缺点：
只能控制当前的页面
<head>
<style type="text/css">
选择器{属性1:值1;属性2:值2;}
</style>
</head>
1.3 外链式
首先新建一个.css 类型的文件，在里边直接写css代码，然后将这个文件通过link语句，链入到我们的html中。
优点：
1.可以实现多个页面共享样式，需要这个文件链入即可。
<head>
<link rel="stylesheet" href="css文件路径" />
</head>2.基本选择器（要想将CSS样式应用于特定的HTML元素，首先需要匹配到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器）
2.1 标签选择器 ：直接选择标签名，可以匹配到当前页面所有的该标签，指定统一的CSS样式
标签名{属性1:值1;属性2:值2;......}优点：能快速为页面中同类型的标签统一样式
缺点：不能实现差异化样式
<head>
<title></title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>未闻花名</div>
</body>2.2 ID选择器（先给标签起一个id的名字，选择id的时候使用“#”进行标识，后面紧跟id名）
#name{属性1:值1;属性1:值1;......}注意：
1. id具有唯一性，同一个id名在当前页面有且仅能存在一个。
2. 每个标签只能拥有一个id名
3. 通常配合js使用
2.3 类选择器（先给标签起一个class的名字，选择类的时候使用“.”进行标识，后面紧跟类名。）
.name{属性1:值1;属性2:值2;.....}
<div class="name"></div>注意：
1. 可以重复利用，可以重名
2. 一个标签可以起多个类名， 中间用空格隔开
<head>
<title></title>
<style>
.red{
color: red;
}
.f30{
font-size: 30px;
}
</style>
</head>
<body>
<div class="f30">未闻花名</div>
<div class="red f30">未闻花名</div>
<div class="red">未闻花名</div>
</body>3.扩展选择器
3.1 后代选择器（关联选择器）：用来选择元素或元素组的后代，所以标签关系首先必须是嵌套关系，其写法就是把父级选择器写在前面，自己选择器写在后面，中间用空格分割
父级选择器 子级选择器{属性1:值1;属性2:值2;......}
可以匹配到该父元素内部的所有子级元素
3.2并集选择器 ：把各个选择器通过逗号连接起来，用来定义相同的样式，减少代码的冗余，最后一个选择器后面不需要加逗号
通常优化代码的时候使用！
div,.class,#id{属性1:值1;属性2:值2;......}3.3属性选择器 ：可以根据元素的属性和属性值进一步筛选元素
选择器[标签属性="值"]{属性1:值1;属性2:值2;......}4.CSS伪类（状态是动态变化的，当一个元素达到一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式）
:link 未被访问过的链接
:visited 已经被访问过的链接
:hover 鼠标悬停在元素上方（现在hover可以适用于任何标签）
:active 被激活的元素，例：点击中的链接
注意：如果全部书写，顺序不能变
:focus 获取键盘输入焦点的时候（通常用于表单元素）
5.盒模型：我们可以把每一个标签都看成是一个盒子，每个盒子都有元素的内容，内边距（padding），边框（border），和外边框（margin）组成
5.1 边框
| border-top | 上边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
5.2 内边距
padding:10px; 上下左右都是10px
padding:10px 20px; 上下10px，左右20px
padding:10px 20px 30px; 上10px，左右20px，下30px
padding:10px 20px 30px 40px; 上10px，右20px，下30px，左40px
注意：如果一个盒子有固定大小，加了padding会变大。
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
5.3外边距
margin:20px; 四种取值情况同padding
特殊取值：margin:0 auto; 让一个固定大小的块元素本身水平居中| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
6.背景
6.1 背景颜色
background-color:red; 只能设置颜色6.2背景图片
background-image:url(图片的路径地址); 只能设置图片6.3背景平铺方式
background-repeat:no-repeat;
no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺6.4背景位置
background-position:x轴 y轴;
图片默认从左上角开始显示，超出盒子可视区域的背景图片是不可见的！
取值：
1.方位词：top上 right右 bottom下 left左 center中间
2.具体的像素：
正：x向右，y向下
负：x向左，y向上 6.5背景简写
background：颜色 图片 平铺方式 位置;
如果想改变背景图片的大小，可以通过background-size:宽度 高度;
但是注意必须先有图片，再调整大小！注意：
（1）值与值之间用空格隔开
（2）分号加在最后一个值后面，不需要重复书写多次
7.常用样式
| color | 字体颜色 | red红 green绿 blue蓝 #fff白 #000黑 |
| font-size | 文字大小 | 必须加单位像素px 浏览器默认的字号是16px |
| text-align | 文本对齐方式 | left左 center中 right右 效果等同于标签属性align |
| text-indent | 文本缩进 | 1em代表一个字宽 |
| line-height | 行高 | 必须加单位px |
| font-weight | 文本粗细 | 正常：normal 加粗：bold |
| font-style | 文本样式 | 倾斜：italic 正常：normal |
| outline | 浏览器默认的蓝色轮廓线 | 没有：none |
| resize | 文本域拖拽的问题 | 不允许拖拽：none |
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
