CSS 入门教程学习摘要笔记

css

指层叠样式表 (Cascading Style Sheets)。

样式层叠次序

• 不是所有的CSS属性都是​​继承的。
• 只有与外观相关的是继承的，包括文本颜色，字体详细信息等。
• 与布局相关的不是继承。

语法

由两个主要的部分构成：选择器，以及一条或多条声明。

• 选择器通常是需要改变样式的 HTML 元素。
• 每条声明由一个属性和一个值组成。
  • 总是以分号(;)结束。
  • 声明组以大括号({})括起来。
• 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
  • 不要在属性值与单位之间留有空格。
• CSS注释以 “/" 开始, 以 "/” 结束

选择器

id选择器

为标有特定唯一 id 的 HTML 元素指定特定的样式，以 “#” 来定义。

• id值的名称必须紧跟在octothorpe（＃）后面。
• 如果没有元素名称在＃之前，则选择器匹配包含该ID值的所有元素。
• 不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
• 只能在每个 HTML 文档中出现一次。

class选择器

用于描述一组元素的样式，可以在多个元素中使用，以一个点"."号显示。

• 类值的名称必须紧跟在点后面。
• 如果在点之前没有元素名称，则选择器匹配包含该类值的所有元素。
• 类名的第一个字符不能使用数字，无法在 Mozilla 或 Firefox 中起作用。

* 选择器

选择所有元素。

• 匹配文档中的每个元素，包括html和body元素。
• 可用于为另一个元素内的所有元素添加样式。

element选择器

将样式添加到具有指定元素名称的所有元素。

分组选择器

将具有相同样式的选择器进行分组，减少代码量。

• 每个选择器用逗号分隔。

嵌套选择器

适用于选择器内部的选择器的样式。

• 每个选择器用空格分隔。

属性选择器

根据元素的属性以及属性值来选择元素。

element1 [attribute]

根据属性的存在选择任何元素，而不管属性的值。

[attribute = value]

选择具有指定属性和值的元素。

• 基于属性的精确和完整值选择任何元素。

attribute〜= value]

选择具有包含指定单词的属性值的元素。

• 基于属性的空格分隔值的一部分选择任何元素。
• 包含完整指定值，不可多不可少。

[attribute|=value]

用于选择指定属性具有指定值开始的元素。

• 完整包含指定值，不可多不可少。

[attribute^=value]

匹配元素属性值带指定的值开始的元素。

• 含指定值开始就行，可有尾巴。

[attribute$=value]

匹配元素属性值带指定的值结尾的元素。

• 含指定值结尾就行，可有头。

[attribute*=value]

匹配元素属性值包含指定值的元素。

• 包含指定值就行，可有头可有尾。

样式属性

background

背景缩写属性可以在一个声明中设置所有的背景属性。

• 元素的背景是元素的总大小，包括填充和边界（不包括边距）。
  

background-color

定义了元素的背景颜色。

• 不能继承，其默认值是 transparent。
• 如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

background-image（CSS3新增）

描述了元素的背景图像。

• 背景图像进行默认平铺重复显示，以覆盖整个元素实体。
• 务必设置背景色，如果图像是不可用，将被使用。
• 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

background-size（CSS3新增）

指定背景图像大小。

• 可以指定背景图片.
• 在不同的环境中指定背景图片的大小。
• 可以指定像素或百分比大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。
  

background-clip（CSS3新增）

指定背景绘制区域。

background-origin（CSS3新增）

指定background-position属性应该是相对位置。

• 如果背景图像background-attachment是"固定"，这个属性没有任何效果。
• 
  

background-repeat

设置如何平铺对象的 background-image 属性。

• 默认情况下，重复background-image的垂直和水平方向。
• 如果指定的位置是没有任何背景，图像总是放在元素的左上角。

background-position

设置背景图像的起始位置。

• 只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。
• 如果只有一个关键字，则会默认另一个关键字为 center。
• 对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”。
  

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。

text

color

设置文字的颜色。

• 对于W3C标准的CSS：如果定义了颜色属性，还必须定义背景色属性。

text-align

设置文本的水平对齐方式。

text-decoration

用来设置或删除文本的装饰。

• 不建议强调指出不是链接的文本，因为这常常混淆用户。
  

text-decoration-color

规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

• 只有在带有可见的 text-decoration 的元素上，text-decoration-color 属性才起作用。
• 几乎所有的主流浏览器都不支持 text-decoration-color 属性。。

text-decoration-line

规定文本修饰要使用的线条类型。

• 几乎所有的主流浏览器都不支持 text-decoration-line 属性。。
• 可同时设置多个值。

text-decoration-style

规定线条如何显示。

• 几乎所有的主流浏览器都不支持 text-decoration-style 属性。

text-transform

控制文本的大小写。

text-indent

指定文本的第一行的缩进。

• 所有元素的第一行都可以缩进一个给定的长度。
• 负值是允许的。如果值是负数，将第一行左缩进。

text-justify（CSS3新增）

指定文本对齐设置为"justify"的理据。

text-overflow（CSS3新增）

指定当文本溢出包含它的元素，应该发生什么。

text-shadow（CSS3新增）

向文本设置阴影。

word-break（CSS3新增）

规定自动换行的处理方法。

word-wrap（CSS3新增）

允许长的内容可以自动换行。

text-align-last（CSS3新增）

规定如何对齐文本的最后一行。

• 浏览器
  • 只有 Internet Explorer 支持 text-align-last 属性。。
  • Internet Explorer 不支持 “start” 和 “end” 值。
  • Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。
• 只有在 text-align 属性设置为 “justify” 时才起作用。。

word-spacing

增加或减少字与字之间的空白。

direction

指定文本方向/书写方向。

letter-spacing

增加或减少字符间的空白（字符间距）。

line-height

设置以百分比计的行高。

• 不允许负值。

unicode-bidi

设置或返回文本是否被重写。

vertical-align

设置一个元素的垂直对齐。

white-space

指定元素内的空白怎样处理。

tab-size

规定制表符（tab）字符的空格长度。

• 目前只有 Chrome 支持 tab-size 属性。
• 默认值8。

font

font 简写属性在一个声明中设置所有字体属性。

• 可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”。
• font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

@font-face

网页设计师再也不必使用的"web-safe"的字体之一。

font-family

设置元素的字体样式。

• 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

font-style

指定文本的字体样式。

font-size

设置字体大小。

• 不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
• em的尺寸单位由W3C建议，1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

font-size-adjust

为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

• Internet Explorer 不支持 font-size-adjust 属性。
• 字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。

font-stretch

可对当前的 font-family 进行伸缩变形。

• 所有主流浏览器都不支持 font-stretch 属性。

font-variant

设置小型大写字母的字体显示文本。

font-weight

设置文本的粗细。

链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

列表样式

list-style

简写属性在一个声明中设置所有的列表属性。

• 可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image。
  • list-style-type：设置列表项标记的类型。
  • list-style-position：设置在何处放置列表项标记。
    
  • list-style-image：使用图像来替换列表项的标记。

Table

border

• 缩写边框属性设置在一个声明中所有的边框属性。
• 可以设置的属性分别（按顺序）：border-width, border-style,和border-color。

border-width

设置一个元素的四个边框的宽度。

• 此属性可以有一到四个值。

border-style

设置一个元素的四个边框的样式。

• 此属性可以有一到四个值。

border-color

设置四条边框的颜色。

• 此属性可设置 1 到 4 种颜色。

border-collapse

设置表格的边框是否被合并为一个单一的边框。

border-top

简写属性把上边框的所有属性设置到一个声明中。

• 按顺序设置如下属性： border-top-width, border-top-style, and border-top-color。

真正的举一反三，剩下的right、bottom、left和top雷同。

border-image（CSS3新增）

一个简写属性，用于设置以下属性：
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
如果省略值，会设置其默认值。

• 浏览器
  • 支持Firefox、Chrome 以及 Safari。
  • 不支持ie浏览器。
  • 对于Opera，需要前缀 -o-。

border-image-source

规定要使用的图像，代替 border-style 属性中设置的边框样式。

• 如果值为 “none”，或者如果图像无法显示，则使用边框样式。
• Opera 不支持 border-image-source 属性。
• Internet Explorer 10 以及更早的版本不支持 border-image-source 属性。
• Safari 5 以及更早的版本不支持 border-image-source 属性。

border-image-outset

规定边框图像超过边框盒的量。

• 在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。
• 如果省略第三个值，则与第一个值相同。
• 如果省略第二个值，则与第一个值相同。
• 不允许任何负值作为 border-image-outset 值。
• Opera 不支持 border-image-source 属性。
• Internet Explorer 10 以及更早的版本不支持 border-image-source 属性。
• Safari 5 以及更早的版本不支持 border-image-source 属性。

border-image-repeat

规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。

• 规定如何延展和铺排边框图像的边缘和中间部分。
• 规定两个值。如果省略第二个值，则采取与第一个值相同的值。
• Opera 不支持 border-image-source 属性。
• Internet Explorer 10 以及更早的版本不支持 border-image-source 属性。
• Safari 5 以及更早的版本不支持 border-image-source 属性。

border-image-slice

规定图像边框的向内偏移。

• 该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。
• 除非使用了关键词 fill，否则中间的图像部分会被丢弃。
• 如果省略第四个数值/百分比，则与第二个值相同。
• 如果省略第三个值，则与第一个值相同。
• 如果省略第二个值，则与第一个值相同。
• Opera 不支持 border-image-source 属性。
• Internet Explorer 10 以及更早的版本不支持 border-image-source 属性。
• Safari 5 以及更早的版本不支持 border-image-source 属性。

border-image -width

指定图像边界的宽度。

• border-image -width的4个值指定用于把border图像区域分为九个部分。
• 他们代表上，右，底部，左，两侧向内距离。
• 如果第四个值被省略，它和第二个是相同的。
• 如果也省略了第三个，它和第一个是相同的。
• 如果也省略了第二个，它和第一个是相同的。
• 负值是不允许的。

border-radius（CSS3新增）

是一个简写属性，用于设置四个 border-*-radius 属性。
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right- radius

• 在四个角上一一指定，可以使用以下规则：
  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同
• 设置每个 radius 的四个值。
  • 如果省略 bottom-left，则与 top-right 相同。
  • 如果省略 bottom-right，则与 top-left 相同。
  • 如果省略 top-right，则与 top-left 相同。
• 浏览器
  • 支持Internet Explorer 9+、Opera 、Firefox、Chrome 以及 Safari 。
• 可以给任何元素制作 “圆角”。

border-top-left-radius

定义了左上角的边框形状。

• 为元素添加圆角边框。

border-top-right-radius

定义了右上角的边框形状。

• 为元素添加圆角边框。

border-bottom-left-radius

定义左下角边框的形状。

• 向元素添加圆角边框。

border-bottom-right-radius

定义右下角边框的形状。

• 向元素添加圆角边框。

height

设置元素的高度。

• 不包括填充，边框，或页边距。

width

设置元素的宽度。

• 不包括填充，边框和页边距。

padding

简写属性在一个声明中设置所有填充属性。

• 该属性可以有1到4个值。
• 当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

padding-top

设置一个元素的顶部内边距（空白）。

• 不允许负值。

padding-right

设置一个元素的右内边距（空白）。

• 不允许负值。

padding-bottom

设置元素的底部内边距（底部空白）。

• 不允许负值。

padding-left

设置一个元素的左内边距（空格）。

• 不允许负值。

margin

简写属性在一个声明中设置所有外边距属性。

• 该属性可以有1到4个值。
• (外边距)属性定义元素周围的空间。
• 属性接受任何长度单位、百分数值甚至负值。
• margin没有背景颜色，是完全透明的。

margin-top

设置元素的上部边距。

• 允许负值。

margin-right

设置元素的右边距。

• 允许负值。

margin-bottom

设置元素的下边距。

• 允许负值。

margin-left

设置元素的左边距。

• 允许负值。

盒子模型

• 外边距可以是负值。
  
• 不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

轮廓

简写属性在一个声明中设置所有的轮廓属性。

• 可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width。
• 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
• 其属性指定了样式，颜色和外边框的宽度。
• 其属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。
• Outlines在两个方面不同于边框：
  • Outlines 不占用空间
  • Outlines 可能非矩形
• outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

outline-color

指定轮廓颜色。

• 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

outline-style

指定outline的样式。

outline-width

指定轮廓的宽度。

outline-offset（CSS3新增）

设置轮廓框架在 border 边缘外的偏移。

• 浏览器
  • 不兼容IE浏览器。
  • -webkit-,，-ms- 或 -moz-。
• Outlines在两个方面不同于边框：
  • Outlines 不占用空间
  • Outlines 可能非矩形

尺寸

height

前面有讲过。

line-height

前面有讲过。

max-height

设置元素的最大高度。

• 不包括填充，边框，或页边距。

max-width

设置元素的最大宽度。

• 不包括填充，边框，或页边距。

min-height

设置元素的最低高度。

• 不包括填充，边框，或页边距。

min-width

设置元素的最小宽度。

• 不包括填充，边框，或页边距。

width

前面有讲过。

Display(显示) 与 Visibility（可见性）

display

设置一个元素应如何显示。

• 隐藏元素 - display:none，隐藏的元素不会占用任何空间。
• 改内联元素为块元素：display:block；不允许有它内部的嵌套块元素。
• 改块元素为内联元素：display:inline；

visibility

指定一个元素应可见还是隐藏。

• 隐藏元素 - visibility:hidden，隐藏的元素仍需占用与未隐藏之前一样的空间。

position

属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

top

规定元素的顶部边缘。

• 该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
• 对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
• 如果 “position” 属性的值为 “static”，那么设置 “top” 属性不会产生任何效果。。

right规定元素的右边缘。

• 该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
• 对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义元素，left 的计算值始终等于 right。
• 如果 “position” 属性的值为 “static”，那么设置 “top” 属性不会产生任何效果。。

bottom

设置图像的底部边缘。

• 如果 “position” 属性的值为 “static”，那么设置 “left” 属性不会产生任何效果。
  

left

规定元素的左边缘。

• 该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
• 如果 “position” 属性的值为 “static”，那么设置 “left” 属性不会产生任何效果。

clip

剪辑一个绝对定位的元素。

• 如果先有"overflow：visible"，clip属性不起作用。

cursor

定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

overflow

指定如果内容溢出一个元素的框，会发生什么。

overflow-x

规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

overflow-y

规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

z-index

指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

• 一个元素可以有正数或负数的堆叠顺序。
• 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
• ** 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面**。

浮动

float

指定一个盒子（元素）是否应该浮动（水平方向）。

• 其周围的元素也会重新排列。

clear

指定段落的左侧或右侧不允许浮动的元素。

水平对齐

块元素对齐

块元素是一个元素，占用了全宽，前后都是换行符。

中心对齐margin

可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素。

• 如果宽度是100％，对齐是没有效果的。

设置左右对齐position

使用绝对定位。

设置左右对齐float

设置垂直居中对齐padding

组合选择符

• 后代选取器（以空格分隔）
  • 匹配所有指定元素的后代元素。
  • 指定元素内部的都算后代元素。
• 子元素选择器（以大于号分隔）
  • 只能选择作为某元素子元素的元素。
  • 只有一个孩子将被匹配。
  • 与指定元素相邻的。
• 相邻兄弟选择器（以加号分隔）
  • 紧接在另一元素后的元素，且二者有相同父元素。
  • 两个元素之间的任何文本都将被忽略。
  • 仅考虑元素及其在文档树中的位置。
• 普通兄弟选择器（以波浪号分隔）
  • 选取所有指定元素的相邻兄弟元素。
  • 必须具有相同的父元素。element2不必紧跟在element1之前。

伪类

元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

anchor

• 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• hover选择器可用于所有元素，不仅是链接。
• 伪类的名称不区分大小写。

:first-child

选择元素的第一个子元素。

• 适用于任何元素。

:lang()

为不同的语言定义特殊的规则。

:focus

选择具有焦点的元素。

• 接受键盘事件或其他用户输入的元素。

:first-letter

指定元素第一个字母的样式。

• 任何引导标点符号都应与第一个字母一起设置样式。
• 仅适用于在块级元素中。

:first-line

指定选择器第一行的样式。

• 只能附加到块级元素。
• 可以应用到首字母的属性是有限的。

:before

向选定的元素前插入内容。

• 默认情况下，生成的伪元素是内联的，但这可以使用属性显示更改。

after

同before。

content

与 :before 及 :after 伪元素配合使用，来插入生成内容。

opacity

设置一个元素了透明度级别。

• 指定不透明 - 从0.0（完全透明）到1.0（完全不透明）。

@media

允许在相同样式表为不同媒体设置不同的样式。

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
• 媒体类型不区分大小写。
  

box

响应式网页。

• 12 列的网格系统可以更好的控制响应式网页。
• 每列的百分比: 100% / 12 列 = 8.33%。
  

box-sizing（CSS3新增）

以特定的方式定义匹配某个区域的特定元素。

• 浏览器
  • Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
  • Firefox 支持替代的 -moz-box-sizing 属性。
    

box-shadow（CSS3新增）

向框添加一个或多个阴影。

• 由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
• 浏览器
  • 支持Internet Explorer 9+、Opera 、Firefox、Chrome 以及 Safari 。
    

写在后面

大部分内容出自W3C上CSS教程，CSS3的大部分都记在了另一篇

链接:CSS3 入门学习笔记

其中在学习过程中在笔记里涉及到一丢丢的CSS3的内容，我大致看到的都标注了，或许还有遗漏的，请见谅，日后发现会及时修正的。

样式属性是不全的！想要了解更多知识的小伙伴移步W3C官网看教程，我选择性的记录了一些而已，若是发现有错误欢迎大噶纠正！我也会及时弄清改正的！希望没有误导到可爱的你。

一起加油！