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

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

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

  :

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

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

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

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用

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

每条声明由一个属性和一个值组成。

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

http:/ /www.iis7.com/b/wzjk/

  :

css样式三种调用使用方式：

插入样式表的方法有三种:

外部样式表(External style sheet)：语法：<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表(Internal style sheet)：在头部写样式

内联样式(Inline style)：直接在元素中写(不推荐)

*全局标记{ }

  ：

为了避免Internet Explorer 中无法调整文本的问题，使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px，可以换算。

  :

css背景样式：

background-color：背景颜色

background-image：url("图片")：背景图片(默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体)

background-repeat：背景平铺 on-repeat不平铺  -x横向平铺-y垂直平铺

background-position：背景定位属性

background-attachment:背景附件属性 fixed(固定背景属性)

background：# url（#）有背景有图片输入 列子  

：

css文本样式值：

font-size：#px； 文字大小

font-family：字体样式,如:微软雅黑

font-style：文字状态如 斜体等

font-weight：文字粗细

text-align：文本对齐

font-variant ：字体之间的转变，以小型大写字体或者正常字体显示文本。

line-height：行高 上下距离会有变化，也可以用于行与行之间的空间(%)

text-decoration：文本装饰 underline下划线 none去除下划线

text-decoration: overline：上划线

text-decoration:line-through：删除线

text-transform: uppercase：英文大写

text-transform:lowercase：英文小写

text-transform:capitalize：首字母大写

text-align：设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐

text-indent：第一行的文本缩进

text-shadow：文本阴影，(1.左右2.上下3.模糊程度4.颜色)

letter-spacing：字符之间的空间

direction：文字方向

word-spacing：增加在字符之间空白的空间

white-space:nowrap:在元素内禁止文字环绕

字体属性定义字体，加粗，大小，文字样式。

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

font-style：这个属性有三个值：normal(正常)，italic(斜体)，oblique(斜体)

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小

确定了输出的物理尺寸时绝对大小很有用

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

 ：

css列表样式：

在HTML中，有两种类型的列表：

<ul>无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

<ol>有序列表 - 列表项的标记有数字或字母

list-style-type：列表符号

list-style-image：图像符号(可以自定义)

list-style-position：位置符号

list-style:复合属性(可以多种属性在一起)

list-style: none：清除默认小黑点

circle圆圈

disc正方形

 ：

CSS 盒子模型(Box Model)

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

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

margin(外边距) - 清除边框外的区域，外边距是透明的, Margin可以使用负值，重叠的内容。Margin: # auto(自动)居中：放大缩小  #上下自动

border(边框) - 围绕在内边距和内容外的边框。top上, left左, right右, bottom下，(color颜色, width宽, solid实线，dashed虚线)

padding(内边距) - 清除内容周围的区域，内边距是透明的。

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

最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

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

none :  默认无边框

dotted : 定义一个点线边框

dashed :  定义一个虚线边框

solid :  定义实线边框

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

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

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

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

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

。。。。。。。。。。。

border-right：分割线

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

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：设置元素的上边框的宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick(厚的) 、(中等)medium（默认值） 和 thin(薄的)。

 ：

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度

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

outline-color：设置轮廓的颜色

outline-style：设置轮廓的样式

outline-width：设置轮廓的宽度

 ：

CSS margin(外边距)

margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

margin可以使用负值，重叠的内容。

auto ：设置浏览器边距，这样做的结果会依赖于浏览器

length：定义一个固定的margin（使用像素，pt，em等）

% ：定义一个使用百分比的边距

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性，所有边距属性的简写属性是 margin :

margin：属性可以有一到四个值：(边距是顺时针旋转：上右下左)

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

margin-bottom：设置元素的下外边距。

margin-left：设置元素的左外边距。

margin-right：设置元素的右外边距。

margin-top：设置元素的上外边距。

 ：

CSS padding（填充）

length：定义一个固定的填充(像素, pt, em,等)

%：使用百分比值定义一个填充

padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

为了缩短代码，它可以在一个属性中指定的所有填充属性，这就是所谓的简写属性。所有的填充属性的简写属性是 padding :

padding：属性可以有一到四个值：(边距是顺时针旋转：上右下左)

padding：使用简写属性设置在一个声明中的所有填充属性

padding-bottom：设置元素的底部填充

padding-left：设置元素的左部填充

padding-right：设置元素的右部填充

padding-top：设置元素的顶部填充

  :

CSS 尺寸 (Dimension)

尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

height：设置元素的高度。

width 设置元素的宽度。

line-height：设置行高。

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

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

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

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

 ：

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

display：属性设置一个元素应如何显示。

visibility：属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none 或 - visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了但仍然会影响布局。

display(不占空间)：隐藏。none不显示    block显示

visibility(占空间)：隐藏。 hidden不显示 visitle显示

display:inline：可以把块级元素变成内联元素

display:block：可以把内联元素变成块级元素，不允许有它内部的嵌套块元素。

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素

display:inline  -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

  :

CSS Position(定位)

position 属性指定了元素的定位类型。

position 属性的五个值：

static：默认值，没有定位，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。

absolute：绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，元素和其他元素重叠。

relative：相对定位，相对其正常位置，(相对灵活，按元素自己的位置)

fixed：固定定位，即使窗口是滚动的它也不会移动

sticky：可以把它称之为粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法

z-index：指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

clip:rect：裁剪元素，先有定位

overflow:scroll：内容溢出时，显示隐藏内容

overflow:hidden：内容溢出时，隐藏

overflow:auto：自动处理溢出内容

overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content

overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content

  :

CSS float(浮动)

浮动，可以让行内和块变成行内块

浮动，会使元素向左或向右移动，其周围的元素也会重新排列。

浮动，往往是用于图像，但它在布局时一样非常有用

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

1.<div style="clear:both;"></div>浮动清除

2.overflow：hiddc，auto

 ：

光标悬停时，外形变化

cursor:move：四方拉伸

cursor:e-resize：左右拉伸

cursor:w-resize：左右拉伸

cursor:n-resize：上下拉伸

cursor:s-resize：上下拉伸

cursor:ne-resize：右上角+左下角

cursor:sw-resize：右上角+左下角

cursor:nw-resize：左上角+右下角

cursor:se-resize：左上角+右下角

cursor:auto：文本

cursor:text：文本

cursor:default：原形

cursor:help：原形+问号

cursor:pointer：手指

cursor:progress：原形+加载

cursor:wait：加载

cursor:crosshair：十字

 ：

CSS 伪类(Pseudo-classes)：

光标经过显示状态：

a:link：未访问过的链接

a:hover：当用户鼠标悬停在链接上时

a:visited：用户已访问过的链接

a:active：链接被点击的那一刻

a:focus：选择元素输入后具有焦点

所有CSS伪类/元素：

: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：选择所有有效值的属性

: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 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式

"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" 伪元素用于向文本的首字母设置特殊样式：

注意： "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

:before：伪元素可以在元素的内容前面插入新内容。

:after：伪元素可以在元素的内容之后插入新内容。

 ：

CSS 布局 - 水平 & 垂直对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中。

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中。

让图片自动居中先把它变成块级元素。

 ：

CSS 组合选择符

在 CSS3 中包含了四种组合方式:

1.后代选择器(以空格分隔)

2.子元素选择器(以大于号分隔）

3.相邻兄弟选择器（以加号分隔）

4.普通兄弟选择器（以破折号分隔）

 ：

CSS 导航栏

作为标准的HTML基础一个导航栏是必须的。

在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度

 ：

CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果

设置好样式和位置关系。

 ：

CSS 提示工具(Tooltip)

提示工具在鼠标移动到指定元素后触发

::after：伪元素，可以创建一个三角形用于"提示工具"

content:""：必不可少的

transparent (一个是漏斗形)

transparent (两个三角形)

transparent (三个也是三角形)

一个排在颜色前面，三角形方向，向左

两个排在颜色前面，三角形方向，向上

三个排在颜色后面，三角形方向，向下

三个排在颜色前面，三角形方向，向右

 transition 属性及 opacity 属性来实现淡入效果

写入淡入效果，效果更好

 ：

CSS 图片廊

  :

CSS 图像透明/不透明

使用CSS很容易创建透明的图像。

CSS Opacity属性是W3C的CSS3建议的一部分

CSS3中属性的透明度是 opacity。

Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

opacity 属性通常与 :hover 选择器一起使用

 ：

CSS 图像拼合技术

 图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽

创建一个导航列表：

background:url("图片") 

 位置设置相对定位，让里面的绝对定位

 margin和padding设置为0

 所有图像的高度统一，具体分布样式

 悬停效果：

 :hover 选择器用于鼠标悬停在元素上的显示的效果

 :hover 选择器可以运用于所有元素。

 ：

CSS 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等

@media 规则

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

 ：

CSS3 @keyframes 规则

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画

 ：

CSS 上下左右四个方向箭头(^v<>)

<p>和<i>来做

实线

用边框宽度：(1.形状 2.厚度 3.厚度 4.形状)

 display: inline-block

 内边距：Padding：#

 上：transform: rotate(-135deg)

 下：transform: rotate(45deg)

 左：transform: rotate(135deg)

 右：transform: rotate(-45deg)

 ：

翻页符：

左双箭头(<<)：&laquo;。

左单箭头(<)：&#8249;。&#10094;

右双箭头(>>)：&raquo;。

右单箭头(>)：&#8250;。&#10095;

：

用边框画圆，先确定高和宽。在写其他样式

：

长度单位

em：一般浏览器字体大小默认为16px，则2em == 32px

rem：根据元素（html）的 font-size

ex：依赖于英文子母小 x 的高度

ch：数字 0 的宽度

vw：viewpoint width，视窗宽度，1vw=视窗宽度的1%

vh：viewpoint height，视窗高度，1vh=视窗高度的1%

vmin：vw和vh中较小的那个

vmax：vw和vh中较大的那个

%：百分比

px：像素 (1px = 1/96th of 1in)

cm：厘米

mm：毫米

in：英寸 (1in = 96px = 2.54cm)

pt：point，大约1/72英寸； (1pt = 1/72in)

pc：pica，大约6pt，1/6英寸； (1pc = 12 pt)

后加内容：

position:absolute与float:left，两者有两大共性：包裹性，破坏性。

包裹性

包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。

float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持width属性，可能要设置。想重构高质量的页面，少用绝对定位布局！

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/31552074/viewspace-2214475/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/31552074/viewspace-2214475/