css学习记录

CSS

指层叠样式表，用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，css文件扩展名为.css。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

语法

Css规则由选择器及一条或多条声明两个部分构成：

选择器通常是需要改变的HTML元素。

每条声明由一个属性和一个值构成，声明总以;结束，用{}括起来，属性是设置的样式属性，每个属性都有一个值，属性和值被冒号分隔开。

注释：以/*开始，*/结束，用于解释代码，可随意编辑，浏览器会自动忽略

id选择器

可以为有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。（id属性不要以数字开头）

class选择器

用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

代码中用到多个可用空格分开。（类名第一个字符不能使用数字）

样式表

插入样式表的方法：外部样式表，内部样式表，内联样式表

外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部，外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

属性： rel="stylesheet":外部样式表    type="text/css":引用文档的类型

内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

属性：type="text/css":引用文档的类型

内联样式表：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何 CSS 属性。

多重样式：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 优先级：内联样式>内部样式>外部样式> 浏览器默认样式

注：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

属性

背景

background简写属性，作用是将背景属性设置在一个声明中。

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

background-color设置元素的背景颜色。

background-image把图像设置为背景。

background-position设置背景图像的起始位置。

background-repeat设置背景图像是否及如何重复。

背景颜色：background-color，页面的背景颜色使用在body的选择器中，css中，颜色值通常以十六进制，RGB，颜色名称定义

背景图像：background-image，默认情况下，背景图像会在页面的水平或者垂直方向平铺进行平铺重复显示，以覆盖整个元素实体。不想让图像平铺，可以使用 background-repeat 属性。可以利用 background-position 属性改变图像在背景中的位置

可将所有属性全部简化为background，例如body {background:#ffffff url('img_tree.png') no-repeat right top;}，简写属性顺序：background-color，background-image，background-repeat，background-attachment，background-position

文本

color设置文本颜色

direction设置文本方向。

letter-spacing设置字符间距

line-height设置行高

text-align对齐元素中的文本

text-decoration向文本添加修饰

text-indent缩进元素中文本的首行

text-shadow设置文本阴影

text-transform控制元素中的字母

unicode-bidi设置或返回文本是否被重写

vertical-align设置元素的垂直对齐

white-space 设置元素中空白的处理方式

word-spacing设置字间距

文本颜色：css中，颜色值通常以十六进制，RGB，颜色名称定义

文本对齐方式：文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐。

文本修饰：text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

文本转换：用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。例如p.uppercase {text-transform:uppercase;}全为大写

p.lowercase {text-transform:lowercase;}全为小写p.capitalize {text-transform:capitalize;}首字母大写

文本缩进：指定文本第一行的缩进，p {text-indent:50px;}

字体

font在一个声明中设置所有的字体属性

font-family指定文本的字体系列

font-size指定文本的字体大小

font-style指定文本的字体样式

font-variant以小型大写字体或者正常字体显示文本。

font-weight指定字体的粗细。

字体字型：分为两种，通用字体系列——拥有相似外观的字体系统组合，特定字体系列——一个特定的字体系列。

字体系列：font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明的。

字体样式：主要是用于指定斜体文字的字体样式属性。这个属性有三个值：正常——正常显示文本p.normal {font-style:normal;}，斜体——以斜体字显示的文字p.italic {font-style:italic;}，倾斜的文字——文字向一边倾斜（和斜体非常类似，但不太支持）p.oblique {font-style:oblique;}

字体大小：font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小

绝对大小：设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用

相对大小：相对于周围的元素来设置大小，允许用户在浏览器中改变文字大小

如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）

可以用像素例如h1 {font-size:40px;}或em例如h1 {font-size:2.5em;}设置大小，还可以使用百分比和em组合，例如body {font-size:100%;}  h1 {font-size:2.5em;}

链接

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

特别的链接，可以有不同的样式，这取决于状态，这四个链接状态分别是

a:link——正常，未访问过的链接，a:visited——用户已访问过的链接，a:hover——当用户鼠标放在链接上时，a:active——链接被点击的那一刻

a:hover 必须在 a:link 和 a:visited 之后，a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。

列表

list-style简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image将图像设置为列表项标志。

list-style-position设置列表中列表项标志的位置。

list-style-type设置列表项标志的类型。

作用：设置不同的列表项标记为有序列表，设置不同的列表项标记为无序列表，设置列表项标记为图像

在 HTML中，有两种类型的列表：无序列表 ul——列表项标记用特殊图形（如小黑点、小方框等），有序列表 ol——列表项的标记有数字或字母，使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

list-style-type属性指定列表项标记的类型

简写属性顺序：list-style-type，list-style-position (有关说明，请参见下面的CSS属性表)，list-style-image如果上述值丢失一个，其余仍在指定的顺序，就没关系。

list-style-type:none 属性可以用于移除小标记。例如默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除。

表格

指定css边框，使用border属性

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

Width和height属性定义表格的宽度和高度，text-align属性设置水平对齐方式，向左，右，或中心

如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距)——清除边框外的区域，是完全透明的，margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性，在CSS中，它可以指定不同的侧面不同的边距，有1-4个值    

Border(边框)——围绕在内边距和内容外的边框。

Padding(内边距)——length定义一个固定的填充(像素, pt, em,等)，%使用百分比值定义一个填充。清除内容周围的区域，是透明的，单独使用 padding 属性可以改变上下左右的填充，与margin一样，有四个值

Content(内容)——盒子的内容，显示文本和图像。

指定元素宽度和高度时，完整大小的元素不仅要有内容区域的宽高，还要添加内边距、边框、外边距

元素的总宽度：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

border简写属性，用于把针对四个边的属性设置在一个声明。

border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color简写属性，设置元素的所有边框中可见部分的颜色，为 4 个边分别设置颜色。

border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color设置元素的下边框的颜色。

border-bottom-style设置元素的下边框的样式。

border-bottom-width设置元素的下边框的宽度。

border-left简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color设置元素的左边框的颜色。

border-left-style设置元素的左边框的样式。

border-left-width设置元素的左边框的宽度。

border-right简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color设置元素的右边框的颜色。

border-right-style设置元素的右边框的样式。

border-right-width设置元素的右边框的宽度。

border-top简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color设置元素的上边框的颜色。

border-top-style设置元素的上边框的样式。

border-top-width设置元素的上边框的宽度。

border-radius设置圆角的边框。

CSS边框属性允许你指定一个元素边框的样式和颜色

样式由border-style属性用来定义

border-style值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

hidden：隐藏边框

mix：混合边框，例如p.mix {border-style: dotted dashed solid double;}

宽度由border-width 属性指定，有两种方式可以指定长度值，比如2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin（CSS 没有定义 3 个关键字的具体宽度，所以用户可以随意设置）

颜色由border-color属性设置，name——指定颜色的名称，如 "red"，RGB——指定 RGB 值, 如 "rgb(255,0,0)"，Hex——指定16进制值, 如 "#ff0000"（border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式，例如）

单独设置各边，border-style属性可以有1-4个值：

border-style:dotted solid double dashed; 上边框是 dotted，右边框是 solid，底边框是 double，左边框是 dashed

border-style:dotted solid double; 上边框是 dotted，左、右边框是 solid，底边框是 double

border-style:dotted solid; 上、底边框是 dotted，右、左边框是 solid

border-style:dotted;四面边框是 dotted

轮廓

outline在一个声明中设置所有的轮廓属性

outline-color设置轮廓的颜色

outline-style设置轮廓的样式   

outline-width设置轮廓的宽度

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，outline 属性规定元素轮廓的样式、颜色和宽度

分组和嵌套选择器

分组选择器：为了减少代码，每个选择器用逗号分隔，例如可变成

嵌套选择器：适用于选择器内部的选择器的样式，例如p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class="marked" 的元素指定一个样式。.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

尺寸

height设置元素的高度。

line-height设置行高。

max-height设置元素的最大高度。

max-width设置元素的最大宽度。

min-height设置元素的最小高度。

min-width设置元素的最小宽度。

width设置元素的宽度。

显示与可见性

隐藏元素可以把display属性设置为"none"，或把visibility属性设置为"hidden"。但这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

内联元素：{display:inline;}，块元素：{display:block;}

定位

bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。

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

cursor显示光标移动到指定的类型  

left定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow设置当元素的内容溢出其区域时发生的事情。

overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域

overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域

position指定元素的定位类型

right定义了定位元素右外边距边界与其包含块右边界之间的偏移。

top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

z-index设置元素的堆叠顺序

static 定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠

relative 定位：相对定位元素的定位是相对其正常位置。原本所占的空间不会改变

absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

sticky 定位：position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

重叠的元素：元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序

布局

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，只工作于指定高度的块元素上

浮动

clear指定不允许元素周围有浮动元素。

float指定一个盒子（元素）是否可以浮动。

会使元素向左或向右移动，其周围的元素也会重新排列。往往用于图像，但它在布局时一样非常有用

清除浮动——使用 clear，元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

组合选择符

后代选择器(以空格分隔)，用于选取某元素的后代元素

子元素选择器(以>号分隔），子元素选择器只能选择作为某元素直接/一级子元素的元素。

相邻兄弟选择器（以+分隔），可选择紧接在另一元素后的元素，且二者有相同父元素。

普通（后继）兄弟选择器（以波~分隔）选取所有指定元素之后的相邻兄弟元素

伪类

伪类的语法：selector:pseudo-class {property:value;}，CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

伪元素

伪元素的语法：selector:pseudo-element {property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}

计数器

content使用 ::before 和 ::after 伪元素来插入自动生成的内容

counter-increment递增一个或多个值

counter-reset创建或重置一个或多个计数器

使用到以下几个属性：counter-reset——创建或者重置计数器，counter-increment——递增变量，content——插入生成的内容，counter() 或 counters() 函数——将计数器的值添加到元素，要使用 CSS 计数器，得先用 counter-reset 创建

!important规则

用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。