css 和經常使用快捷鍵

時間 2019-11-10

標籤 css 和經常使快捷鍵欄目 CSS 简体版

原文原文鏈接

一.css概述：css

一、規則：CSS 規則由選擇器，以及一條或多條聲明兩個部分構成。html

二、選擇器：選擇器一般是您須要改變樣式的 HTML 元素。算法

三、聲明：聲明是您要設置的樣式（每條聲明由一個屬性和一個值組成）。chrome

四、屬性：屬性是您但願設置的樣式屬性（每一個屬性有一個值，屬性和值被冒號分開）。api

二.css的5個來源

一、瀏覽器默認樣式

瀏覽器自帶一個默認的樣式，在html元素未被設置樣式時，瀏覽器會按照本身默認的樣式來顯示。可是瀏覽器默認樣式的瀏覽器

級別是最低的，一旦有其餘地方設置了樣式，瀏覽器默認樣式就會被覆蓋掉。安全

二、內聯樣式

<a style=’ ’>中編寫的樣式代碼。服務器

三、內部樣式

四、引用樣式

五、瀏覽器用戶自定義樣式

在一些新聞網站中，常常看到能夠設置字體大小的快捷菜單，例以下圖就是搜狐新聞中的設置。

這些是給一些有視覺障礙的人看的，反正我是沒用過，我也有視覺障礙，不過我是經過近視鏡來解決的。

其實瀏覽器也有這樣的設置，例如chrome瀏覽器中，咱們就能夠設置字號和字體。

用戶在這裏設置了字體和字號以後，它們會覆蓋掉瀏覽器默認的樣式。

3、選擇器

一、ID選擇器：

語法：
首先，ID 選擇器前面有一個 # 號 - 也稱爲棋盤號或井號。
請看下面的規則：

#intro {font-weight:bold;}

二、類選擇器：

語法：
而後咱們使用如下語法向這些歸類的元素應用樣式，即類名前有一個點號（.），而後結合通配選擇器：

.class {color:red;}

三、元素選擇器：

最多見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。
例如：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

四、屬性選擇器：

屬性選擇器能夠根據元素的屬性及屬性值來選擇元素。
例子 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;}

五、後代選擇器：

以父元素爲範圍選擇後代元素。
例如：
若是您但願只對 h1 元素中的 em 元素應用樣式，能夠這樣寫：

h1 em {color:red;}

六、子元素選擇器：

以父元素爲範圍選擇子元素。
例如：
若是您但願選擇只做爲 h1 元素子元素的 strong 元素，能夠這樣寫：

h1 > strong {color:red;}

七、相鄰兄弟選擇器：

例如：
若是要設置緊接在 h1 元素後出現的段落字體爲紅色，能夠這樣寫：

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

這個選擇器讀做：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。

四.僞類和僞元素

1、僞類：

屬性	描述
: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 以後，纔是有效的。
提示：僞類名稱對大小寫不敏感。

2、僞元素：

屬性	描述
:first-letter	向文本的第一個字母添加特殊樣式。
:first-line	向文本的首行添加特殊樣式。
:before	在元素以前添加內容。
:after	在元素以後添加內容。

例如：使用"first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：

p:first-line

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

五.css樣式

1、背景：

CSS 容許應用純色做爲背景，也容許使用背景圖像建立至關複雜的效果。

一、背景色

可使用 background-color 屬性爲元素設置背景色。這個屬性接受任何合法的顏色值。

例如：

p {background-color: gray;}

二、背景圖像

要把圖像放入背景，須要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。若是須要設置一個背景圖像，必須爲這個屬性設置一個 URL 值：

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

三、背景圖像重複

若是須要在頁面上對背景圖像進行平鋪，可使用 background-repeat 屬性。

屬性值 repeat 致使圖像在水平垂直方向上都平鋪，就像以往背景圖像的一般作法同樣。repeat-x 和 repeat-y 分別致使圖像只在水平或垂直方向上重複，no-repeat 則不容許圖像在任何方向上平鋪。

默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：

body

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

    background-repeat: repeat-y;

四、背景圖像定位

能夠利用 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，最後也可使用百分數值。不一樣類型的值對於背景圖像的放置稍有差別。

五、背景圖像關聯

若是文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。您能夠經過 background-attachment 屬性防止這種滾動。經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed），所以不會受到滾動的影響：

body

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

    background-repeat:no-repeat;

    background-attachment:fixed

2、文本CSS 文本屬性可定義文本的外觀。

經過文本屬性，您能夠改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。

一、縮進文本（text-indent ）

p {text-indent: -5em;}

二、水平對齊（text-align）

h1{text-align:center;}

三、字間隔（word-spacing）

p {word-spacing: 30px;}

四、字母間隔（letter-spacing）

h4 {letter-spacing: 20px}

五、字符轉換（text-transform）

屬性值：

none
uppercase
lowercase
capitalize

h1 {text-transform: uppercase}

六、文本裝飾（text-decoration）

屬性值：

none
underline
overline
line-through
blink

a {text-decoration: none;}

七、文本方向（direction）

【注：對於行內元素，只有當 unicode-bidi 屬性設置爲 embed 或 bidi-override 時纔會應用 direction 屬性。】

屬性值：

p {word-direction : rtl;}

八、處理空白符（white-space）

white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。詳：

值	空白符	換行符	自動換行
pre-line	合併	保留	容許
normal	合併	忽略	容許
nowrap	合併	忽略	不容許
pre	保留	保留	不容許
pre-wrap	保留	保留	容許

3、字體

一、設置字體系列。（font-family）

h1 {font-family: Georgia;}

二、設置字體的尺寸。（font-size）

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

三、設置字體風格。（font-style）

屬性值：

normal : 文本正常顯示
italic : 文本斜體顯示
oblique : 文本傾斜顯示

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

四、以小型大寫字體或者正常字體顯示文本。（font-variant）

p {font-variant:small-caps;}

五、設置字體的粗細。（font-weight）

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

4、列表

一、將圖象設置爲列表項標誌。（list-style-image）

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

二、設置列表中列表項標誌的位置。（list-style-position）

屬性值：

inside：列表項目標記放置在文本之內，且環繞文本根據標記對齊。
outside：默認值。保持標記位於文本的左側。列表項目標記放置在文本之外，且環繞文本不根據標記對齊。
inherit:規定應該從父元素繼承 list-style-position 屬性的值。

ul{list-style-position:inside;}

三、設置列表項標誌的類型。（list-style-type）

ul {list-style-type : square}

5、表格

一、設置是否把表格邊框合併爲單一的邊框。（border-collapse）

屬性值：

separate：默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse：若是可能，邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit：規定應該從父元素繼承 border-collapse 屬性的值。

table{border-collapse:collapse;}

二、設置分隔單元格邊框的距離。（border-spacing）

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

三、設置表格標題的位置。（caption-side）

屬性值：

top：默認值。把表格標題定位在表格之上。
bottom：把表格標題定位在表格之下。
inherit：規定應該從父元素繼承 caption-side 屬性的值。

caption{caption-side:bottom;}

四、設置是否顯示錶格中的空單元格。（empty-cells）

屬性值：

hide：不在空單元格周圍繪製邊框。
show：在空單元格周圍繪製邊框。默認。
inherit：規定應該從父元素繼承 empty-cells 屬性的值。

table{empty-cells:hide;}

五、設置顯示單元、行和列的算法。（table-layout）

屬性值：

automatic：默認。列寬度由單元格內容設定。
fixed：列寬由表格寬度和列寬度設定。
inherit：規定應該從父元素繼承 table-layout 屬性的值。

table{table-layout:fixed;}

6、輪廓

輪廓（outline）是繪製於元素周圍的邊框線，可起到突出元素的做用。

CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。

一、設置輪廓的顏色。（outline-color）

p{outline-color:#00ff00;}

二、設置輪廓的樣式。（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;}

三、設置輪廓的寬度。（outline-width）

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

1、CSS 內邊距屬性

屬性	描述
padding	簡寫屬性。做用是在一個聲明中設置元素的所內邊距屬性。
padding-bottom	設置元素的下內邊距。
padding-left	設置元素的左內邊距。
padding-right	設置元素的右內邊距。
padding-top	設置元素的上內邊距。

屬性值：

auto：瀏覽器計算內邊距。
length：規定以具體單位計的內邊距值，好比像素、釐米等。默認值是 0px。
%：規定基於父元素的寬度的百分比的內邊距。

inherit：規定應該從父元素繼承內邊距。

2、CSS 邊框屬性

一、border

屬性	描述
border	簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
border-bottom	簡寫屬性，用於把下邊框的全部屬性設置到一個聲明中。
border-left	簡寫屬性，用於把左邊框的全部屬性設置到一個聲明中。
border-right	簡寫屬性，用於把右邊框的全部屬性設置到一個聲明中。
border-top	簡寫屬性，用於把上邊框的全部屬性設置到一個聲明中。

二、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：規定應該從父元素繼承邊框樣式。

三、border-width

屬性	描述
border-width	簡寫屬性，用於爲元素的全部邊框設置寬度，或者單獨地爲各邊邊框設置寬度。
border-bottom-width	設置元素的下邊框的寬度。
border-left-width	設置元素的左邊框的寬度。
border-right-width	設置元素的右邊框的寬度。
border-top-width	設置元素的上邊框的寬度。

屬性值：

thin：定義細的邊框。
medium：默認。定義中等的邊框。
thick：定義粗的邊框。
length：容許您自定義邊框的寬度。

inherit「規定應該從父元素繼承邊框寬度。

四、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：規定應該從父元素繼承邊框顏色。

3、CSS 外邊距屬性

屬性	描述
margin	簡寫屬性。在一個聲明中設置全部外邊距屬性。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距。
margin-right	設置元素的右外邊距。
margin-top	設置元素的上外邊距。

屬性值：

auto：瀏覽器計算外邊距。
length：規定以具體單位計的外邊距值，好比像素、釐米等。默認值是 0px。
%：規定基於父元素的寬度的百分比的外邊距。
inherit：規定應該從父元素繼承外邊距。

4、外邊距合併：

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

七.定位與浮動

一、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 屬性的值。

二、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>
八.繼承與層疊

1、繼承

繼承：所謂CSS樣式繼承，就是子元素應用父元素的規則聲明。（由這一特性，可將CSS屬性分爲可繼承屬性和非可繼承屬性。）
可繼承屬性：屬性值可由父元素繼承給子元素的屬性稱之爲可繼承屬性。

哪些屬性是可繼承屬性？

一、文本樣式屬性

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

二、字體樣式屬性

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

三、列表樣式屬性

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

四、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%。

2、層疊

層疊：所謂CSS樣式層疊就是DOM元素應用樣式表中的規則覆蓋繼承樣式的過程。

1、文件操做快捷鍵：

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鍵，完全刪除的文件不在回收站裏；

2、文字輸入快捷鍵：

Tab與Shift+Tab【實用】

一、在輸入帳號以後按Tab鍵，會自動跳到輸入密碼框進行輸入；

二、有些地方至關於輸入兩個漢字那麼長的空格（如代碼編寫的縮進等）；

三、Shift+Tab爲Tab的反操做；

Delete 【實用】反向刪除文字。好比」AB」字符，當光標在A與B之間時，按」Back」退格鍵時刪除」A」，當按」Delete」鍵時則刪除B；

Home與End 【實用】當輸入一行文字時發現有錯誤，能夠按Home回到第一個字，按End時回到最後一個字。此時能夠免去動鼠標或者按」←」或」→」方向鍵的麻煩；

3、其餘經常使用快捷鍵：

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不行）。注意：每按一個鍵都要鬆手，不是連按的；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

css 和經常使用快捷鍵

一、瀏覽器默認樣式

二、內聯樣式

三、內部樣式

四、引用樣式

五、瀏覽器用戶自定義樣式

3、選擇器

一、ID選擇器：

四、屬性選擇器：

五、後代選擇器：

六、子元素選擇器：

七、相鄰兄弟選擇器：

1、僞類：

2、僞元素：

1、背景：

一、背景色

二、背景圖像

三、背景圖像重複

四、背景圖像定位

五、背景圖像關聯

2、文本CSS 文本屬性可定義文本的外觀。

一、縮進文本（text-indent ）

二、水平對齊（text-align）

三、字間隔（word-spacing）

四、字母間隔（letter-spacing）

五、字符轉換（text-transform）

六、文本裝飾（text-decoration）

七、文本方向（direction）

八、處理空白符（white-space）

3、字體

一、設置字體系列。（font-family）

二、設置字體的尺寸。（font-size）

三、設置字體風格。（font-style）

四、以小型大寫字體或者正常字體顯示文本。（font-variant）

五、設置字體的粗細。（font-weight）

4、列表

一、將圖象設置爲列表項標誌。（list-style-image）

二、設置列表中列表項標誌的位置。（list-style-position）

三、設置列表項標誌的類型。（list-style-type）

5、表格

一、設置是否把表格邊框合併爲單一的邊框。（border-collapse）

二、設置分隔單元格邊框的距離。（border-spacing）

三、設置表格標題的位置。（caption-side）

四、設置是否顯示錶格中的空單元格。（empty-cells）

五、設置顯示單元、行和列的算法。（table-layout）

6、輪廓

一、設置輪廓的顏色。（outline-color）

二、設置輪廓的樣式。（outline-style）

三、設置輪廓的寬度。（outline-width）

1、CSS 內邊距屬性

2、CSS 邊框屬性

一、border

二、border-style

三、border-width

四、border-color

3、CSS 外邊距屬性

4、外邊距合併：

一、CSS 定位屬性

（1）position

（2）top、right、bottom、left

（3）overflow

（4）clip

（5）vertical-align

（6）z-index:設置元素的堆疊順序。

二、CSS 浮動屬性

1、繼承

一、文本樣式屬性

二、字體樣式屬性

三、列表樣式屬性

四、color屬性

2、層疊