目录
CSSDisplay（显示）与Visibility（可见性）
-
CSS语法
CSS规则由两个主要部分组成：选择器，以及一条或多条声明。(每条声明由一个属性和一个值组成。CSS声明总是以分号结束，声明以大括号括起来。)
属性名，属性值关键字推荐小写；
属性值前面，冒号后面，保留一个空格；
选择器（标签）和大括号中间保留空格。
CSS注释：以 /* 开始,以 */ 结束。
-
CSS元素
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
块级元素的特点：
- 比较霸道，自己独占一行；
- 高度，宽度，外边距一级内边距都可以控制；
- 宽度默认值是容器的100%；
- 是一个容器及盒子，里面可以放行内或者块级元素。
常见块级元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个；
- 高，宽直接设置是无效的；
- 默认宽度就是它本身内容的宽度；
- 行内元素只能容纳文本或者其他行内元素。
常见行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
行内块元素特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一 行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
常见行内块元素：<img />,<input />,<td>
-
CSS选择器
选择器分为基础选择器和复合选择器。
基础选择器是由单个选择器组成的。
类选择器-多类名 使用方式：<div class="one two three">多类名</div>
使用场景：把一些标签元素相同的样式放在同一个类里面
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出相同的标签，比如p | 不能差异化选择 | 较多 | p{color:red;} |
| 类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red;} |
| id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和JS搭配 | #nav{color:red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | *{color:red;} |
注意
：1.id选择器中，ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2.class选择器中，类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
-
CSS样式表
插入样式表的三种方法
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style）
-
样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便，权重高 结构样式混乱 较少 控制一个标签 内部样式表 部分结构样式表 没有彻底分离 较多 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 最多 控制多个页面
注意：
1.外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。不要在属性和单位之间留空格。
2.内部样式表可以使用<style>标签来定义样式。
3.内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
4.如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
-
CSS背景
使用简写属性时，属性值的顺序为：:
background-color 设置颜色
background-image 设置背景图像
background-repeat 设置背景水平或垂直平铺
background-attachment 设置背景图像是否可以滚动移动
background-position 设置背景图像定位
背景色半透明 backgr:rgba(0,0,0,0.3);后面必须是4个值
-
CSS文本格式
color指定颜色：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
text-align：设置对齐方式
letter-spacing：设置字符间距
word-spacing：设置字间距
line-height：设置行间距
text-shadow：设置文本阴影
vertical-align：设置元素垂直对齐
white-space：设置元素空白的处理方式
text-decoration：设置或删除文本的修饰
属性值：none：默认没有装饰线；
underline：下划线；
overline：上划线；
line-through：删除线
text-transform：指定在一个文本中的大写和小写
text-indent：指定文本第一行的缩进 em是一个相对文本。
注意： 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
-
CSS字体
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
- 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
font-family：设置字体格式，像宋体，黑体等。
font-style：设置字体是否倾斜。
属性值：normal：标准字体；
italic：斜体。
font-size：设置字体大小。 谷歌默认字体大小16px。
font-weight：设置字体粗细。
属性值：normal：不加粗；
bold：加粗；
100-900:400等同于normal，700等同于bold。
-
CSS链接
四个链接状态：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
-
CSS列表
有序列表（ol）：列表项标记用特殊图形（如小黑点、小方框等）。
无序列表（ul）：列表项的标记有数字或字母。
list-style：可以指定列表所有属性。
list-style-type：指定列表项标记属性。
list-style-image：指定列表项标记的图像。
list-style-position：设置列表项标志的位置。
-
CSS表格
border：指定列表边框。
border-collapse：设置表格的边框是否被折叠成一个单一的边框或隔开。
height：设置表格高度。
width：设置表格宽度。
text-align：设置表格内文字对齐。
vertical-align：设置垂直对齐。
-
CSS盒子模型
div：定义盒子模型。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
margin：简写属性。
margin-bottom：设置下外边距。
margin-left：设置做外边距。
margin-right：设置有外边距。
margin-top：设置上外边距。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
padding：简写属性。
padding-bottom：设置下内边距。
padding-left：设置左内边距。
padding-right：设置右内边距。
padding-top：设置上内边距。
Content(内容) - 盒子的内容，显示文本和图像。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
-
CSS边框属性
border-style：定义边框样式。
border-collapse:控制相邻单元格的边框。
border-width：定义边框宽度。
border-color：定义边框颜色。
border-radius：设置圆角边框样式。
border-top-style：定义上边框。
border-bottom-style：定义下边框。
border-left-style：定义左边框。
border-right-style：定义右边框。
-
CSS轮廓（outline）
outline：可定义所有轮廓属性。
outline-color：定义轮廓颜色。
outline-width：定义轮廓宽度。
outline-style：定义轮廓样式。
-
css阴影
box-shadow：设置盒子阴影。
属性值：h-shadow：必需，水平阴影位置，允许负值。
v-shadow：必需，垂直阴影位置，允许负值。
blur：可选，模糊距离。
color：可选，阴影颜色。
spread：可选，阴影尺寸。
inset：可选，将外部阴影改成内部阴影。
text-shadow：设置文字阴影。
属性值：h-shadow：必需，水平阴影位置，允许负值。
v-shadow：必需，垂直阴影位置，允许负值。
blur：可选，模糊距离。
color：可选，阴影颜色。
-
CSS尺寸（Dimension）
| 属性 | 描述 |
|---|---|
| height | 设置元素高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素最大高度。 |
| max-width | 设置元素最大宽度。 |
| min-height | 设置元素最小高度。 |
| width | 设置元素宽度。 |
-
CSSDisplay（显示）与Visibility（可见性）
display：块和内联元素。
-
CSS Position（定位）
position：指定了元素的定位类型。
属性值：
static：HTML的默认值，没有定位。
relative：相对定位。
fixed：元素位置相对于浏览器窗口是固定位置。即窗口是滚动的它也不滚动。
absolute：绝对定位。
sticky：粘性定位。
z-index：指定重叠元素顺序。
总结：
|
定位模式
|
是否脱标
|
移动位置
|
是否常用
|
|---|---|---|---|
|
static
静态定位
| 否 | 不能使用边位移 | 很少 |
| relative相对定位 | 否 | 相对于自身位移 | 常用 |
| absolute绝对定位 | 是 | 带有定位的父级 | 常用 |
| fixed固定定位 | 是 | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否 | 浏览器可视区 | 当前阶段用得少 |
定位拓展：
1.绝对定位盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，可以通过以下方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半。
2.定位特殊性
绝对定位和固定定位和浮动类似。
1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
4.绝对定位（固定定位）会完全压住盒子
浮动元素只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字（像图片）。浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的。
绝对定位（固定定位） 会压住下面标准流所有的内容。
-
CSS布局
Overflow：用于控制内容溢出元素框时现实的方式。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意：overflow 属性只工作于指定高度的块元素上。
水平&垂直对齐
元素居中对齐：margin:auto;
文本居中对齐：text-align:center;
图片居中对齐：margin:auto;
左右对齐：position:absolute; float:left(right);
垂直居中对齐：padding
line-height
position和transform
-
CSS浮动
所谓的标准流: 就是标签按照规定好默认方式排列。
块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等
float：定义元素浮动显示。
属性值：none：元素不浮动。
left：元素向左浮动。
right：元素向右浮动。
清除浮动
1.clear 属性值：both，left，right
2.额外标签法
优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化较差。
3.父级添加overflow清除浮动。 属性值：hidden，auto，scroll
优点：代码简洁。 缺点：无法显示溢出的部分。
4.:after伪元素法
优点：没有增加标签，结构更简单。 缺点：照顾低版本浏览器。
5.双伪元素清除浮动
- 清除浮动本质是：清除浮动的本质是清除浮动元素脱离标准流造成的影响。
- 清除浮动策略是：闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.。
- 额外标签法：隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加清
- 除浮动样式实际工作可能会遇到,但是不常用。
-
CSS组合选择符
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 普通兄弟选择器（以波浪号 ～ 分隔）
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及使用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
| 子代选择器 | 选择最近一级元素 | 只能选亲儿子 | 较少 | 符号是大于.nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,.header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟连接相关 | 较多 | 重点记住a{}和a:hover实际开发的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
-
CSS伪类（Pseudo-classes）
语法
伪类语法：selector:pseudo-class {property:value;}
CSS类：selector.class:pseudo-class {property:value;}
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
-
CSS伪元素
语法
伪元素的语法：selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}
:first-line伪元素
用于向文本的首行设置特殊样式。下面的属性可应用于 "first-line" 伪元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter伪元素
用于向文本的首字母设置特殊样式。下面的属性可应用于 "first-letter" 伪元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
-
CSS导航栏
1.导航栏等于连接链表。
2.有垂直导航跟水平导航（有内联或者浮动两种方法）。
3..active：激活当前导航条实例。
4.固定导航条：固定在头部：top:0;
固定在底部：bottom:0;
-
CSS下拉菜单
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
cursor：网页制作CSS中的光标类型。一般扩展名为.cur.
属性值：cursor:crosshair; 十字锥心
cursor:pointer; 手
cursor:hand; 箭头
cursor:wait; 等待
cursor:help; 帮助
cursor:no-drop; 无法释放
cursor:text; 文字编辑
cursor:move; 可移动对象
-
CSS提示工具
1.使用容器元素 (like <div>) 并添加 一个 类。在鼠标移动到 <div> 上时显示提示信息。
2.提示文本放在内联元素上(如 <span>)。
3.div类使用 position:relative, 提示文本需要设置定位值 position:absolute。
4.:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。
5.工具显示在指定元素的右侧(left:100+内边距%) ，右侧（right:100+内边距%）。
6.显示在头部或者底部：bottom:100%;或者top:100%;需要使用 margin-left 属性，设置一个值，计算来源是使用宽度的一半来居中对齐
7.添加箭头：用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。
8.淡入效果：可以使用 CSS3 transition 属性及 opacity 属性来实现。
eg：
-
CSS图像透明/不透明
CSS3中属性的透明度是 opacity。
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。
-
CSS媒体类型
@media 规则允许在相同样式表为不同媒体设置不同的样式。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
-
CSS属性选择器
具有特定属性的HTML元素样式不仅仅是class和id。
IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:[attribute~=value]
2.attribute 属性以 value 开头：[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开。
[attribute^=value] 属性的前几个字母是 value 就可以 。
3.attribute 属性以 value 结尾：[attribute$=value]
-
CSS计数器
counter-reset：创建或者重置计数器
counter-increment： 递增变量
content ：插入生成的内容
counter() 或 counters() 函数：将计数器的值添加到元素
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
