css 和常用快捷键

一.css概述：

1、规则：CSS 规则由选择器，以及一条或多条声明两个部分构成。

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

3、声明：声明是您要设置的样式（每条声明由一个属性和一个值组成）。

4、属性：属性是您希望设置的样式属性（每个属性有一个值，属性和值被冒号分开）。

二.css的5个来源

1、浏览器默认样式

浏览器自带一个默认的样式，在html元素未被设置样式时，浏览器会按照自己默认的样式来显示。但是浏览器默认样式的

级别是最低的，一旦有其他地方设置了样式，浏览器默认样式就会被覆盖掉。

2、内联样式

<a style=’ ’>中编写的样式代码。

3、内部样式

4、引用样式

5、浏览器用户自定义样式

在一些新闻网站中，经常看到可以设置字体大小的快捷菜单，例如下图就是搜狐新闻中的设置。

这些是给一些有视觉障碍的人看的，反正我是没用过，我也有视觉障碍，不过我是通过近视镜来解决的。

其实浏览器也有这样的设置，例如chrome浏览器中，我们就可以设置字号和字体。

用户在这里设置了字体和字号之后，它们会覆盖掉浏览器默认的样式。

三、选择器

1、ID选择器：

语法：
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则：

#intro {font-weight:bold;}

2、类选择器：

语法：
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

.class {color:red;}

3、元素选择器：

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
例如：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

4、属性选择器：

属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

例子4
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例子5
与例子4不同，我们还可以对属性值进行子串匹配。
规则如下：

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

例如：

a[href*="w3school.com.cn"] {color: red;}

5、后代选择器：

以父元素为范围选择后代元素。
例如：
如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

6、子元素选择器：

以父元素为范围选择子元素。
例如：
如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

7、相邻兄弟选择器：

例如：
如果要设置紧接在 h1 元素后出现的段落字体为红色，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

四.伪类和伪元素

一、伪类：

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

例如：
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}        /* 未访问的链接 */

a:visited {color: #00FF00}    /* 已访问的链接 */

a:hover {color: #FF00FF}            /* 鼠标移动到链接上 */

a:active {color: #0000FF}    /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

二、伪元素：

属性	描述
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

例如：使用"first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line

{  color:#ff0000;    font-variant:small-caps;}

五.css样式

一、背景：

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

1、背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

例如：

p {background-color: gray;}

2、背景图像

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

3、背景图像重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body

    background-image: url(/i/eg_bg_03.gif);

    background-repeat: repeat-y;

4、背景图像定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:center;

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

5、背景图像关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body

    background-image:url(/i/eg_bg_02.gif);

    background-repeat:no-repeat;

    background-attachment:fixed

二、文本CSS 文本属性可定义文本的外观。

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

1、缩进文本（text-indent ）

p {text-indent: -5em;}

2、水平对齐（text-align）

h1{text-align:center;}

3、字间隔（word-spacing）

p {word-spacing: 30px;}

4、字母间隔（letter-spacing）

h4 {letter-spacing: 20px}

5、字符转换（text-transform）

属性值：

none
uppercase
lowercase
capitalize

h1 {text-transform: uppercase}

6、文本装饰（text-decoration）

属性值：

none
underline
overline
line-through
blink

a {text-decoration: none;}

7、文本方向（direction）

【注：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。】

属性值：

p {word-direction : rtl;}

8、处理空白符（white-space）

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。详：

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

三、字体

1、设置字体系列。（font-family）

h1 {font-family: Georgia;}

2、设置字体的尺寸。（font-size）

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

3、设置字体风格。（font-style）

属性值：

normal : 文本正常显示
italic : 文本斜体显示
oblique : 文本倾斜显示

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

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

p {font-variant:small-caps;}

5、设置字体的粗细。（font-weight）

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

四、列表

1、将图象设置为列表项标志。（list-style-image）

ul li {list-style-image : url(xxx.gif)}

2、设置列表中列表项标志的位置。（list-style-position）

属性值：

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit:规定应该从父元素继承 list-style-position 属性的值。

ul{list-style-position:inside;}

3、设置列表项标志的类型。（list-style-type）

ul {list-style-type : square}

五、表格

1、设置是否把表格边框合并为单一的边框。（border-collapse）

属性值：

separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit：规定应该从父元素继承 border-collapse 属性的值。

table{border-collapse:collapse;}

2、设置分隔单元格边框的距离。（border-spacing）

table{border-spacing:10px 50px;}

3、设置表格标题的位置。（caption-side）

属性值：

top：默认值。把表格标题定位在表格之上。
bottom：把表格标题定位在表格之下。
inherit：规定应该从父元素继承 caption-side 属性的值。

caption{caption-side:bottom;}

4、设置是否显示表格中的空单元格。（empty-cells）

属性值：

hide：不在空单元格周围绘制边框。
show：在空单元格周围绘制边框。默认。
inherit：规定应该从父元素继承 empty-cells 属性的值。

table{empty-cells:hide;}

5、设置显示单元、行和列的算法。（table-layout）

属性值：

automatic：默认。列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
inherit：规定应该从父元素继承 table-layout 属性的值。

table{table-layout:fixed;}

六、轮廓

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

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

1、设置轮廓的颜色。（outline-color）

p{outline-color:#00ff00;}

2、设置轮廓的样式。（outline-style）

属性值：

none：默认。定义无轮廓。
dotted：定义点状的轮廓。
dashed：定义虚线轮廓。
solid：定义实线轮廓。
double：定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset：定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset：定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit：规定应该从父元素继承轮廓样式的设置。

p{outline-style:dotted;}

3、设置轮廓的宽度。（outline-width）

p{outline-5px;}
六.盒子模型

一、CSS 内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

属性值：

auto：浏览器计算内边距。
length：规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%：规定基于父元素的宽度的百分比的内边距。

inherit：规定应该从父元素继承内边距。

二、CSS 边框属性

1、border

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。

2、border-style

属性	描述
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-bottom-style	设置元素的下边框的样式。
border-left-style	设置元素的左边框的样式。
border-right-style	设置元素的右边框的样式。
border-top-style	设置元素的上边框的样式。

属性值：

none：定义无边框。
hidden：与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：定义 3D inset 边框。其效果取决于 border-color 的值。
outset：定义 3D outset 边框。其效果取决于 border-color 的值。

inherit：规定应该从父元素继承边框样式。

3、border-width

属性	描述
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-bottom-width	设置元素的下边框的宽度。
border-left-width	设置元素的左边框的宽度。
border-right-width	设置元素的右边框的宽度。
border-top-width	设置元素的上边框的宽度。

属性值：

thin：定义细的边框。
medium：默认。定义中等的边框。
thick：定义粗的边框。
length：允许您自定义边框的宽度。

inherit“规定应该从父元素继承边框宽度。

4、border-color

属性	描述
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom-color	设置元素的下边框的颜色。
border-left-color	设置元素的左边框的颜色。
border-right-color	设置元素的右边框的颜色。
border-top-color	设置元素的上边框的颜色。

color_name：规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number：规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number：规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent：默认值。边框颜色为透明。

inherit：规定应该从父元素继承边框颜色。

三、CSS 外边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

属性值：

auto：浏览器计算外边距。
length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%：规定基于父元素的宽度的百分比的外边距。
inherit：规定应该从父元素继承外边距。

四、外边距合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

七.定位与浮动

1、CSS 定位属性

CSS 定位属性允许你对元素进行定位。

（1）position

把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

属性值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit:规定应该从父元素继承 position 属性的值。

（2）top、right、bottom、left

属性	描述
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

属性值：

auto：默认值。通过浏览器计算上边缘的位置。
%：设置以包含元素的百分比计的上边位置。可使用负值。
length：使用 px、cm 等单位设置元素的上边位置。可使用负值。
inherit：规定应该从父元素继承 top 属性的值。

（3）overflow

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

属性值：

visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。

（4）clip

设置元素的形状。元素被剪入这个形状之中，然后显示出来。

属性值：

shape:设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。
auto：默认值。不应用任何剪裁。
inherit：规定应该从父元素继承 clip 属性的值。

（5）vertical-align

设置元素的垂直对齐方式。

属性值：

baseline:默认。元素放置在父元素的基线上。
sub：垂直对齐文本的下标。
super：垂直对齐文本的上标
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
text-bottom：把元素的底端与父元素字体的底端对齐。
length
%:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit:规定应该从父元素继承 vertical-align 属性的值。

（6）z-index:设置元素的堆叠顺序。

属性值：

auto:默认。堆叠顺序与父元素相等。
number:设置元素的堆叠顺序。
inherit:规定应该从父元素继承 z-index 属性的值。

2、CSS 浮动属性

float

属性值：

left：元素向左浮动。
right：元素向右浮动。
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit：规定应该从父元素继承 float 属性的值。

实例（把图像向右浮动）：

img

  float:right;

float具有“包裹性”。（所谓包裹性就是普通的div如果没有设置宽度，它会撑满整个屏幕，而如果给div增加float:left之后，它会把内容紧紧包裹起来。)【见图(第一个<div>)与图(第一个<div>去掉'float:left')的对比】
float具有“破坏性”。（所谓破坏性就是设置了float属性的元素会脱离文档流。）【见图(第一个<div>)与图(第二个<div>)】

其实，如是解析仍感觉对float的“破坏性”描述的不太明白，好吧，再来个例子。看看float的本职工作。

实例1：

<!DOCTYPE html>

<html>

    <head>

        <title>Demo</title>

    </head>

    <body>

        <div>

            <div style='float:left'><img src="image/1.jpg" ></div>

            <div><img src="image/2.jpg" ></div>

            <div><img src="image/3.jpg" ></div>

            <div><img src="image/4.jpg" ></div>

        </div>

    </body>

</html>
实例2.

<!DOCTYPE html>

<html lang=“utf8”>

    <head>

        <meta charset="utf-8">

        <title>Demo</title>

    </head>

    <body>

        <div>

            <img src="image/1.jpg" style='float:left'>

            哇咔咔，我生来是做文字文字环绕效果的！

        </div>

    </body>

</html>
八.继承与层叠

一、继承

继承：所谓CSS样式继承，就是子元素应用父元素的规则声明。（由这一特性，可将CSS属性分为可继承属性和非可继承属性。）
可继承属性：属性值可由父元素继承给子元素的属性称之为可继承属性。

哪些属性是可继承属性？

1、文本样式属性

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

2、字体样式属性

font、font-family、font-size、font-style、font-variant、font-weight

3、列表样式属性

list-style、list-style-image、list-style-position、list-style-type

4、color属性

注：这里特别解释:font-size属性(继承性比较特殊)
不同于有准确的值被继承,font-size继承的是计算的值。

例如：

<!DOCTYPE html>

<html lang=“utf8”>

    <head>

        <meta charset="utf-8">

        <title>Demo</title>

    </head>

    <body style="font-size:85%">

        body字体大小

        <h1 style="font-size:200%">h1字体大小</h1>

        <h2 style="font-size:150%">h2字体大小</h2>

        <p>p字体大小<em>em字体大小</em></p>

    </body>

</html>

元素	值	计算值
default font-size	16px
<body>	85%	16px × 85% = 13.6px
<h1>	200%	13.6px × 200% = 27.2px
<h2>	150%	13.6px × 150% = 20.4px
<p>	unspecified	13.6px
<em>	unspecified	13.6px

即:除非font-size值被重新赋值,否则就按照上一次的尺寸大小值继续.比如上图中设置body字体为默认字体(通常为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。

二、层叠

层叠：所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。

一、文件操作快捷键：

Ctrl+C 复制

Ctrl+V 粘贴

Ctrl+X 剪切

Ctrl+A 全选

Ctrl 【实用】多选：按住Ctrl，再用鼠标单击即可选中文件，可以反选；

Shift 【实用】多选：先选中一个文件a，按住Shift键，再用鼠标单击文件h，即可把从a到h选中；

Ctrl+Shift+N 新建文件夹。注意：XP系统不行；

Ctrl+Shift+esc 任务管理器

Shift+Delete 彻底删除文件。选中文件后，先按住Shift键不放手，再按Delete键，彻底删除的文件不在回收站里；

二、文字输入快捷键：

Tab与Shift+Tab【实用】

1、在输入账号之后按Tab键，会自动跳到输入密码框进行输入；

2、有些地方相当于输入两个汉字那么长的空格（如代码编写的缩进等）；

3、Shift+Tab为Tab的反操作；

Delete 【实用】反向删除文字。比如”AB”字符，当光标在A与B之间时，按”Back”退格键时删除”A”，当按”Delete”键时则删除B；

Home与End 【实用】当输入一行文字时发现有错误，可以按Home回到第一个字，按End时回到最后一个字。此时可以免去动鼠标或者按”←”或”→”方向键的麻烦；

三、其他常用快捷键：

Ctrl+Alt+Delete 打开任务管理器（结束一些常规方法关闭不了的程序）。

Print 【实用】电脑屏幕截屏。（然后在画图或Word中粘贴保存）；

Ctrl+Alt+Print 【实用】对当前窗口截屏。（然后在画图或Word中粘贴保存）；

Alt+Tab 【实用】切换已打开的程序窗口。先用一个手指按住Alt键，再用另外一个手指陆续按Tab键切换不同窗口；

Alt+F4 关闭当前窗口。如果没有窗口时则提示关机；

F5 刷新当前窗口。包括系统和网页。

说明：”Win”是指微软公司的标徽，在键盘上的Ctrl和Shift中间

Win+E 相当于打开“我的电脑”，即使桌面上没有“我的电脑”图标也可以进入文件管理；

Win+D 【实用】返回桌面。有时自己打开了很多窗口，要想返回桌面，但一个一个地关闭窗口或最小化窗口会很麻烦，这个快捷键很方便；

Win+Pause 打开系统相关信息。可以快速查看别人电脑配置，相当于“控制面板系统和安全系统”。

Win+R 打开“运行”窗口，输入”cmd”、”msconfig”等命令；

Win+U+U/R XP系统关机/重启（Win8不行）。注意：每按一个键都要松手，不是连按的；