目录
一、CSS简介
1.什么是CSS
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
（相同的HTML，不同的CSS，不同的显示效果）
2.为何使用CSS
CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
3.CSS的便利性
样式定义通常保存在外部 .css 文件中。
通过使用外部样式表文件，只需更改一个文件即可更改整个网站的外观
二、CSS语法
CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
1.CSS选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
<1>简单选择器
①CSSid选择器
- id 选择器使用 HTML 元素的 id 属性来选择特定元素。
- 以#开头
- 其中id选择器名称可以任意起名(最好不要起中文)
- id的名称必须是唯一的
- id选择器选中的是页面中元素特有的属性。
- 使用id='id选择器名称'为每个标签设置不同的id
- 注意：id 名称不能以数字开头。
②CSS类选择器
- 类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开。
- 英文圆点开头
- 其中类选择器名称可以任意起名(最好不要起中文)
- 既然类可以重复添加，并且同一个标签可以添加多个类，那么我们在使用类选择器的使用一定要有
公共类的概念。
③CSS标签选择器
标签选择器顾名思义就是html代码中的标签。我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。
它可以选中页面中所有的元素，而不是某一个元素内容，所以选中的是页面中共有的属性
注：
id与class的区别：唯一性
2.CSS的三种使用方法
有三种插入样式表的方法：
- 外部 CSS
- 内部 CSS
- 行内 CSS
①CSS应用方式 - 行内样式
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
例：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p style = "color:red;" > 天使投资指早期投资，尤其指个人早期投资。 </p>
</body>
</html>
②CSS应用方式 - 外部样式表文件
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用
外部样式表
- 页面结构HTML代码与样式CSS代码的完全分离。
- 维护方便。
- 如果需要改变网站风格，只需要修改公共CSS文件。
- 可以在同一个 HTML 文档内部引用多个外部样式表。
例：
外部样式表文件：
style.css p{ color: red; /*设置文字颜色*/ }
--------------------------------------------------------------------------------------------------------------------------------- <!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>
③CSS应用方式 - 内嵌样式
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。
例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
④样式优先级：内联样式>内部样式>外部样式
三种样式表区别：
行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。
内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。
外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。
3.CSS注释
注释用于解释代码，以后在您编辑源代码时可能会有所帮助。
浏览器会忽略注释。
位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：
4.CSS单位
| 单 位 | 说 明 |
| px | 像素 |
| cm | 厘米 |
| in | 英寸 |
| % | 百分比 |
| em | 1em等于“当前元素”字体大小 |
5.CSS文本属性
| 属性 | 描述 | 取值 |
| color | 文本颜色 | red #f00 rgb(255,0,0) |
| letter-spacing | 字符间距 | 2px -3px |
| line-height | 行高 | 14px 1.5em 120% |
| text-align | 对齐 | center left right justify |
| text-decoration | 装饰线 | none underline overline line-through |
| text-indent | 首行缩进 | 2em |
6.CSS背景
| 属性 | 描述 | 取值 |
| background | 背景：颜色， 图片 repeat | url("images/bg1.gif") repeat-x; |
| background-color | 背景颜色 | red #f00 rgb(255,0,0) |
| background-image | 背景图片 | url("logo.jpg") |
| background-repeat | 重复方式 | repeat repeat-x repeat-y no-repeat |
7.CSS颜色
| 颜色 | 描述 |
| red, green, blue | 颜色名 http://www.w3school.com.cn/ |
| rgb(x,x,x) | x: RGB值的一个颜色分量，每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66) |
| rgb(x%, x%, x%) | RGB 百分比值 0%-100% 红色：rgb(100%,0%,0%) |
| rgba(x,x,x,a) | x: RGB 值， a: 透明度 a值：0.0（完全透明）与 1.0（完全不透明） 红色半透明：rgba(255,0,0,0.5) |
| #rrggbb | 十六进制数 红色： #ff0000 红色： #f00 去掉重复位 |
8.CSS字体font
| 属性 | 描述 | 取值 |
| font | 文本颜色 | font: '幼圆' 18px bold |
| font-family | 字体系列 | 网页安全字体 font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif; |
| font-size | 字号 | 14px 120% |
| font-style | 斜体 | italic |
| font-weight | 粗体 | bold |
适用于 HTM L和 CSS 的最佳 Web 安全字体：
- Arial (sans-serif) Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
9.CSS超链接
链接的四种状态
a:link 超链接的正常状态（没有任何动作前）
a:visited 访问过的超链接状态
a:hover 鼠标移动到超链接上的状态
a:active 选中超链接时的状态
按照以下次序：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
10.CSS列表
①无序列表ul 有序列表ol 共用样式
| 属性 | 描述 |
| list-style | 所有用于列表的属性，设置于一个声明中 |
| list-style-image | 为列表项标志设置图像 |
| list-style-position | 标志的位置 |
| list-style-type | 标志的类型 |
②list-style-type
10.CSS表格
表格大小
相关属性： width, height
表格边框
相关属性： border border-collapse
table { width: 50%; }
奇偶选择器 :nth-child(odd|even)
11.CSS布局与定位
三、盒子模型 （元素什么样）
1.定义
css的盒子模式就是在网页设计中经常用到的CSS技术所使用的一种思维模型，其作用就是通过定义一系列与盒子相关的属性，可以丰富和促进各个盒子以及整个HTML文档的表现效果和布局结构。
2.盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
3.盒子模型
标准盒子模型：
IE盒子模型：
注：目前所学的知识中，以标准盒子模型为准
4.一个盒子的实际宽度、高度:
content+padding+border+margin
5.overflow 属性：
当内容溢出盒子框时，通过overflow属性进行如下设置
- hidden 超出部分不可见
- scroll 显示滚动条
- auto 如果有超出部分，显示滚动条
6.border：边框属性
| 属性 | 描述 | 取值 |
| border-width | 边框宽度 | px， thin、medium、 thick |
| border-style | 边框样式 | solid、dashed、dotted、double |
| border-color | 边框颜色 | 颜色值 |
| border | 宽度、样式、颜色 | width style color |
7.padding:
1px 2px 3px 4px;
8.margin
①margin用法
margin:1px; = margin:1px 1px 1px 1px;
margin:1px 2px; margin:1px 2px 1px 2px;
margin:1px 2px 3px; margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px; 注意，这里虽然上下边距都为1px，但是这里不能缩写。
②margin 的合并：
垂直方向合并，水平方向不合并
水平居中
图片、文字水平居中： text-align: center;
div水平居中： margin: 0 auto; /* 浏览器自动计算 */
三、CSS定位机制（元素放在哪）
CSS中，存在3种的定位机制：
- 文档流flow
- 浮动float
- 层layer
1.文档流定位
①元素类型：
block：独占一行，元素的width、height、padding、margin都可设置：
<div>、<h1>...<h6>、<p>、<ol>、<ul>、<table>、<form>
inline：不单独占用一行，width，height不可设置：<span>, <a>
inline-block：同时具备inline元素、block元素的特点，不单独占用一行 ，元素的width、height、padding、margin都可设置：<img>
②元素类型转换：
显示为block元素 display: block;
显示为inline元素 display: inline;
显示为inline-block元素 display: inline-block;
元素不被显示 display: none;
2.浮动定位
- float属性：定义元素在哪个方向浮动，常用于div实现横向多列布局
- 取值：left，right，none
- clear 属性：规定元素的哪一侧不允许其他浮动元素。
- both 清除左右两边的浮动。
- left 和 right 只能清除一个方向的浮动。
- none 是默认值，只在需要移除已指定的清除值时用到。
3.层定位
层定位：类似图像软件中的图层，可以对每个layer进行精确定位操作
①平面定位的属性 :
②positon属性：
通过left,right,top,bottom, z-index进行定位的前提。
- fixed 固定定位
- relative 相对定位
- absolute 绝对定位
③position 属性值：
- static： 默认值。 元素依页面正常流进行定位，top, bottom, left, right，z-index无效
- fixed： 固定定位。 相对于浏览器窗口进行定位，top, bottom, left, right，z-index有效。
- relative： 相对定位。 相对于其当前位置进行定位，top,bottom,left,right，z-index有效。
- absolute：绝对定位。 相对于 static 定位以外的第一个父元素(若无则相对body)进行定位，top, bottom, left, right，z-index有效。
④position: fixed
固定定位position:fixed，不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素
⑤position: relative
相对定位 position:relative，定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。
⑥position: absolute
绝对定位 position:absolute，定位为absolute的元素脱离正常文档流，但与relative的区别在于其在正常流中的原位置不再存在。
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
