cascading style sheet(层叠 样式 表)
注释掉的部分是浏览器不会看的，是备忘录的功能，html 的注释是 <!—块注释 --> //行注释 快捷键 ctrl+?
css 注释方式仅有 /* 被注释的内容 */ 快捷键 ctrl+?
注释可以用来调节 bug，注释一行，调试一行
1、引入 css
1）行间样式<div style = “”>
2）页面级 css
<head>
<style type = “text/css”>
</style>
</head>
3）外部 css 文件
打开一个文件.css 保存，并且在头标签里面写
<head>
<link rel = “stylesheet” type = “text/css” href = “”>
</head>
rel = “stylesheet” type = “text/css” 是告诉浏览器我是 css，href 还是引入地址用的
服务器要有一个地址，例如 192.168.000.001 ，而 www.baidu.com 是域名，是通过 dns 编译地址行程的
浏览器一般是下载一行执行一行，在下载到<link rel = “stylesheet” type = “text/css” href = “”>这个时，应该是同时下载 css 和 html，也就是异步加载
在计算机中：异步是指的同时进行，同步是指先一个，后一个（与生活相反） 异步 asynchronous;在计算机里面是同时执行的
2、选择器
下面介绍简单选择器
1）id 选择器
特点：一个元素只能有一个 id 值，一个 id 只对应一个元素，一一对应的 语法格式是 #（加上 id 后面的值是什么就填什么，如 only），就是选中这个 id 了
2）class 选择器（最常用的选择器）
语法格式 .class 就可以找到 class 选择器了
特点：一个 class 可以对应多个元素
3）标签选择器
语法格式 标签名{}
如果想选择<div>就写 div{}，如果想选择<span>就写 span{}，不管被套多少层，都
会被选择出来，而且是选择全部
4）通配符选择器
语法格式 *{}
*是任意的意思，此处是 all，所有的标签（包括<html>和<body>）
- CSS 权重
| 标签名 | 权重值 |
| ！important | infinity 正无穷 |
| 行间样式 | 1000 |
| id 选择器 | 100 |
| class 选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 通配符选择器 | 0 |
在计算机中，正无穷+1>正无穷
如果权重值一样（优先级一样），会显示后面的就是先来后到，谁在后面，谁（后面的）覆盖前面的——后面的会覆盖前面的
在权重中，是 256 进制，是从 0 到 255 后变成 1 所以这里的 1000 不是一千，100 不是一百
复杂选择器
1）父子选择器，派生选择器
语法格式 最外面的结构 外面的结构 里面的结构{} 就是一个父子结构
注意：父子选择器中，每一个层级，都不一样要是标签选择器，写 class 选择器也行， 重要的是表达出来父子关系。而且这种父子关系有可能是间接的，也有可能是直接的
2）直接子元素选择
如果写成 div > em{} 意思就是 div 下面直接一级的 em
3)并列选择器
格式 div.demo 在.之前不用写空格，这就是并列选择器
在并列选择器中，标签选择器和 id 选择器和 class 选择器在一起，标签选择器必须放 前面
4）分组选择器，可以简化代码（常用功能）
5）伪类选择器
格式 任意选择器:怎么动 后面有很多种写法
任意选择器:hover 是一种比较常见的写法
4、CSS 代码块
以<div></div>为例，css 引入部分写成，用花括号包裹起来的是 css 代码区，在括号 里面写 属性名：属性值； 每一个属性与属性之间用分号;隔开
div{
font-size:12px; //属性名：属性值；
font-weight:bold;
}
- 属性
1）设置字体
属性名 属性值（举例）
效果/功能
font-size: 12px
设置字体大小，默认是 16px，但是互联网字体
一般用 12px 或 14px。这个设置的是字体的高度
font-weight: 细体 字体的粗细 是跟字体包 有关 normal 正常（默认值） bold 加粗，跟<strong>效果是一样的 bolder 加更粗
100,200 到 900 从细到粗，都是整百来表达
font-style: italic; 斜体，em 这个标签本身就带有 italic 的样式
font-family: arial; 设置字体包的样式，这个是乔布斯发明的字体
color: 注意字体颜色直接写 color，不写 font-color:red;
字体颜色的 color 三种写法：
1、纯英文单词：red，green 等（一般不用）
2、颜色代码，如#ff4400; 其中每两位都是从 00 到 ff，分别对应红 r（从 00 到 ff）， 绿 g（从 00 到 ff），蓝 b（从 00 到 ff），这是一个十六进制的数，代表的是饱和度， 如果没两位都可以重复，那么简写成#f40 淘宝红，#ffffff 白色，#000000 黑色。
3、颜色函数，如 color:rgb(255,255,255); //这是白色
rgb（0-255，0-255，0-255）里面的 0-255 是十进制数
transparent 是透明色
border: 1px solid black; 这是一个复合属性。可以给容器加外边框。 第一位是 border-width 代表粗细； 第二位是 border-style 设置实心 solid，虚线； 第三位是 border-color 设置颜色
还可以单独写成 border-width:1px;
border-style:dashed;代表虚线 dotted 是点
text-align: left; 对齐方式：左对齐 conter; 对齐方式：一行居中 right; 对齐方式：右对齐 line-height: 16px; 单行文本所在的高度。 当 line-height=height （文本所占高度=容器高度）
text-indent: 2em; 意思是首行缩进 2em（2 个文本单位） 单位的衡量标准：绝对单位（m，cm 等），相对单位（px，em 等） px 是像素的意思，一个像素只能显示一个颜色；
屏幕的分辨率，就是说的像素，国际标准是每英寸所能容纳的垂直像素点数。
em 是文本单位，1em = 1* font-size 该文本的字体大小
text-decoration: line-through; 中划线 none; 没有线 underline; 下划线 overline; 上划线（基本没用） cursor: pointer; 光标定位值（cursor: pointer;鼠标变成一个小手）
5、标签的分类（归类）基本的
1）行级元素，也叫内联元素 inline 特点 A 内容决定元素所占位置 B 不可以通过 CSS 改变宽高 例 span，strong，em，a，del
行级元素自带 CSS 属性，可更改自带属性 span 自带隐藏属性 display:inline; 可以通过改成 block 变成块级元素
2）块级元素，block 特点 A 独占一行 B 可以通过 CSS 改变宽高
例 div，p，ul，li，ol，form，address
3）行级块元素 inline-block 特点 A 内容决定大小 B 可以改变宽高
我们可以通过 display 更改元素属性，如果写成 display:none;元素就没有了
<img src = “”> //一般只设置宽或高，另外一个就等比例缩放了
例：解决图片之间有缝隙的 bug
凡是自带 inline 特效的元素，都有文字特性，有文字特性就会被分割 写成<img scr = “”><img scr = “”><img scr = “”>这样就可以解决了（在一行写，并且 不写空格），写成一行，图片间的空格就没有了 原理：在代码上传服务器时会进行两种压缩方法，
A 字符压缩（如把 img 用 A 代替）；
B 去空格，去回车
5、编程思路：
1 小白式一：先写 html，再写 css
2 小白式二：一边写 html，一边写 css
3 最好的编程思想：先写 css 定义颜色尺寸等，再写 html也就是先定义功能，后选配功能（方便团队合作）
一个 html 可以引入多个 css，一个 css 可以对应很多 html
6、初始化元素（改变 html 自带的系统属性，变成自定义标签）
天生自带的 去掉自己带的
*通配符选择器能初始化所有的标签
7、盒子模型
1）盒子的组成三大部分：
A 盒子壁 border
B 盒子内边距 padding
C 盒子内容 width+height
2）盒子模型（四部分组成）
A 盒子壁 border
B 盒子内边距 padding
C 盒子内容 content=width+height
D 盒子外边距 margin
谷歌浏览器控制台最好
padding:上 右 下 左；（顺时针）
padding:上下 左右；（两个值）
padding:上 左右 下；（三个值，中间代表左右），一个值的时候设置四个方向
padding-left:10px; 代表单独设置左侧，也可写成 padding:0 0 0 10px;
margin 和 border-width 的设置方法和 padding 是一样的
如 border-width:100px 10px 30px 50px; //这样盒子壁四边都不一样了
3）盒模型的计算（可视区域的宽高，真实的大小）
例求 realWidth，realHeight
realWidth：100+10+10+20+20px=160px
realHeight：100+10+10+10+30px=160px
margin 不算盒子，所以计算的时候不能算上 margin
8、定位 position
1）position:absolute;绝对定位定位：脱离原来位置定位
absolute 和 relative 都是层模型
2）position:relative;定位。relative 是保留原来位置进行定位
这种情况下 relative 和 absolute 是一样的
3）absolute 和 relative 比较
absolute 定位：脱离原来位置定位。是相对于最近的有定位的父级进行定位；如果没 有有定位的父级元素，就相对于文档进行定位
relative 定位：保留原来的位置进行定位，相对于自己原来（出生的）的位置进行定 位
经验：什么时候用 relative，什么时候用 absolute？
如果想定位，最好找参照物。
absolute 定位：脱离原来位置定位。是相对于最近的有定位的父级进行定位；如果没 有有定位的父级元素，就相对于文档进行定位
relative 定位：保留原来的位置进行定位，相对于自己原来（出生的）的位置进行定 位
我们一般用 relative 作为参照物（不用 relative 进行定位），用 absolute 进行定位
给一个元素只设置一个 relative，不设置 left，right，top，bottom，看起来是对这个元 素没什么影响的，但是它保留了原来的位置，就对后续元素没有什么影响
absolute 可以任意的调整自己的参照物，更加灵活，所以用于定位
想让谁成为基地，就给谁 relative 定位，并且不设置方向
4）position:fixed;固定定位
可以用作小广告，不管滚动条怎么动，它都在一个固定的位置上面
需要搭配 right，left，top，bottom 使用
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
