web网页基础个人总结-CSS篇

1、什么是CSS？
css指层叠样式表（Cascading Style Sheets）,是为了解决内容与表现分离的问题。说到表现就不得不提一下样式啦，样式是定义如何显示HTML元素，通常存储在样式表中，多个样式可以层叠为一个。

2、CSS优先级
样式表允许以多种方式规定样式信息，当同一个HTML元素被不止一个样式定义时会使用哪个样式呢？要回答个问题，首先我们要知道css优先级：
内联样式（在HTML元素内部）》内部样式表（位于head标签内部）》外部样式表》浏览器缺省设置（默认值）【从左到右优先级依次降低】。

3、CSS基础语法
css规则由两个主要的部分构成：选择器，以及一条或多条声明。

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

每条声明由一个属性和一个值组成。多条声明需要用分号将每个声明隔开。

属性（property是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

另外，子元素会从父元素继承属性；不过某些情况不支持（浏览器兼容问题）。

4、常用CSS选择器

元素选择器：最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器，有时也被称为类型选择器，即“类型选择器匹配文档语言元素类型的名称”；比如 p、h1、em、a，甚至可以是 html 本身。
类选择器：是以class指定的适当的值为类名的选择器，使用时需要在类名前面加个点号（.）。例如：.important {color:red;}选择器会匹配class属性包含important的所有HTML元素，但是其他任何类型的元素都不匹配。
css多类选择器：在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔，这时多个类选择器都会匹配这个HTML元素；如果通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限），如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
cssID选择器：在某些方面，ID选择器类似于类选择器，不过也有一些重要差别。首先，ID选择器前面要有一个#号。第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值；ID 选择器会使用一次，而且仅一次。第三，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
css属性选择器：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例如：a[href] {color:red;}只对有 href 属性的锚（a 元素）应用样式。可以把多个属性-值选择器链接在一起来选择一个文档，例如a[href="#"][title="a] {color: red;}。请注意，这种格式要求必须与属性值完全匹配，如果属性值包含用空格分隔的值列表，匹配就可能出问题。
常用css属性选择器：

css后代选择器：后代选择器（descendant selector）又称为包含选择器；后代选择器可以选择作为某元素后代的元素。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。例如：h1 em {color:red;}这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。
css子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。子选择器使用了大于号（子结合符），子结合符两边可以有空白符，这是可选的；例如：
h1 > strong
h1> strong
h1 >strong
h1>strong
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
css相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator），旁边也可以有空白符。例如：
h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
css伪类：CSS 伪类用于向某些选择器添加特殊的效果。

css伪元素：CSS 伪元素用于向某些选择器设置特殊效果。

css选择器分组：可以将任意多个选择器分组在一起，并要用逗号（,）隔开，对此没有任何限制。通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

5、css常用样式
css背景:CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

css文本：CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

css字体：CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

css链接：设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
•a:link - 普通的、未被访问的链接
•a:visited - 用户已访问的链接
•a:hover - 鼠标指针位于链接的上方
•a:active - 链接被点击的时刻
css列表：CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志

css表格：CSS 表格属性可以帮助您极大地改善表格的外观。

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

6、CSS定位
概述
CSS 定位 (Positioning) 属性允许你对元素进行定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position 属性：
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

---

css相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

css绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
绝对定位和相对定位区别

相对定位是“相对于”元素在文档中的初始位置，

而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

css浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

在 CSS 中，我们通过 float 属性实现元素的浮动。

浮动效果图解：



行框和清理

结语
亲爱的浏览者：
你好哈，感谢你的浏览；由于作者水平尚浅理解不深，望多多包涵，有不足或错误之处请在评论指出，我会改正的。这是我的第一篇，简单介绍了一些CSS的东西，当然有很多没有总结到，例如框模型啊、css3内容之类的，会在以后总结，你可以下载w3School离线手册自行学习，拜拜。