css选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class可以在多个元素中使用。
在 CSS 中，类选择器以一个点"."号显示：
指定特定的HTML元素使用class。
所有的 p 元素使用 class="center" 让该元素的文本居中:
以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
css创建
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择
外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
内部样式表
当单个文档需要特殊的样式时，应使用内部样式表。用 <style> 标签在文档头部定义内部样式表
内联样式
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
多重样式的层叠顺序（优先级）
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
行内样式（在 HTML 元素中）
内部和外部样式表（在 head 部分）
浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖内部和外部样式以及浏览器默认样式。
CSS 背景属性：
background-color元素的背景色。
background-image背景图像
background-repeat
background-attachment
background-positioncss选择器
所有CSS文本属性：
所有CSS字体属性：
css链接样式：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
CSS列表：
CSS 列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
列表：
在 HTML中，有两种类型的列表：
无序列表ul- 列表项标记用特殊图形（如小黑点、小方框等）
有序列表ol- 列表项的标记有数字或字母
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
无序列表如下所示:
有序列表如下所示:
所有的CSS列表属性：
CSS 盒子模型(Box Model)：
不同部分的说明：
Margin(外边距)- 清除边框外的区域，外边距是透明的。
Border(边框)- 围绕在内边距和内容外的边框。
Padding(内边距)- 清除内容周围的区域，内边距是透明的。
Content(内容)- 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 边框属性
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
边框宽度
您可以通过 border-width 属性为边框指定宽度。
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
边框-单独设置各边
在CSS中，可以指定不同的侧面不同的边框：
边框-简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
border-width
border-style (required)
border-color
CSS 边框属性总结
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
所有CSS 轮廓（outline）属性
"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
CSSmargin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
CSSpadding（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的简写属性。所有的填充属性的简写属性是padding:
所有的CSS填充属性
css分组选择器
样式表中有很多相同样式的元素，使用分组选择器可减少代码。
例如：
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
p{ }: 为所有p元素指定一个样式。
.marked{ }: 为所有class="marked"的元素指定一个样式。
.marked p{ }: 为所有class="marked"元素内的p元素指定一个样式。
p.marked{ }: 为所有class="marked"的p元素指定一个样式。
CSS尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
所有CSS 尺寸 (Dimension)属性
CSSDisplay(显示)与Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>
如何改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
下面的示例把span元素作为块元素：
注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
CSSPosition(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
注意：Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
relative 定位
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 定位（粘性定位）
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky;基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。
它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
所有的CSS定位属性
"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
注意:overflow 属性只工作于指定高度的块元素上。
注意:在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
overflow: visible
默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：
如:
CSSFloat(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
网友评论