前端學習筆記（二）CSS入門

時間 2020-07-07

標籤前端學習筆記 css 入門欄目 CSS 简体版

原文原文鏈接

在學完HTML的基礎內容以後，開始接觸到CSS，發現bracket確實很是方便，快捷鍵ctrl+e便可打開光標所在位置的標籤的css內容，很是方便進行修改。如下是CSS的基礎知識筆記（尚未學到盒模型）：css

1.CSS指層疊樣式表。樣式一般儲存在樣式表中，定義如何顯示HTML元素。把樣式添加到HTML中，是爲了解決內容與表現分離的問題。外部樣式表可極大提升工做效率，一般存儲在CSS文件中。多個樣式定義能夠層疊爲一。樣式表極大地提升了工做效率。它使得開發者能夠同時改變站點中全部界面的佈局和外觀。html

2.怎麼使用CSS：參考w3school HTML基礎教程中的HTML CSS。外部樣式表能夠將樣式應用到不少界面，內部樣式表適用於單個文件的特別樣式（在head部分中）。個別元素適用於內聯樣式（在某一元素的屬性中）。當同一個 HTML 元素被不止一個樣式定義時，通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中（4）擁有最高的優先權。（若是有的屬性只在低優先度的樣式表中被選擇器定義了，而在搞優先度的樣式表中未被定義，則改屬性會從低優先度的樣式表中繼承過來。） 1）瀏覽器缺省設置 2）外部樣式表 3）內部樣式表（位於標籤內部） 4）內聯樣式（在 HTML 元素內部）編程

3.CSS語法分爲selector和declaration。Selector能夠有多個，用逗號隔開。 Selector即爲要改變樣式的HTML元素（例如h1）。每一個declaration由一個property和一個style attribute組成。最好每行只描述一個屬性，這樣可讀性比較強。 CSS對大小寫不敏感，除了class和id的名稱之外。瀏覽器

4.CSS的語法有繼承的原理。子元素老是從父元素繼承屬性。（例如，p，td，ul，ol等都是body的子元素。）舊式瀏覽器沒法理解繼承，須要從新把子元素寫一遍。能夠單首創建針對子元素的特殊規則，這樣它就能夠擺脫父元素的規則了。注：font-family最後加上sans-serif，也是爲了保證可以調用這個字體族裏面的字體，由於大多數計算機裏都有這種字體。ide

5.派生選擇器：經過上下文關係來定義某些原有元素的樣式。例：佈局

li strong{
    font-style: italic;
    font-weight: normal;
}
複製代碼

意爲將列表元素中的strong的含義由加粗變成斜體。學習

6.id選擇器：使用「#」來爲標有特定id的HTML元素制定特定的樣式。例：字體

HTML:<p id=」red」>這個段落是紅色</p>
CSS:#red {color:red}
複製代碼

Id選擇器常被用於創建派生選擇器。一個id選擇器做爲派生選擇器能夠被使用不少次，分別針對一個id下不一樣的元素。例：url

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}
複製代碼

id 選擇器也能夠獨立發揮做用：spa

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
複製代碼

根據這條規則，id 爲 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。老版本的 Windows/IE 瀏覽器可能會忽略這條規則，除非特別地定義這個選擇器所屬的元素：

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
複製代碼

7.類選擇器：使用一個點號來表示。 CSS:

.center {text-align:cener}
複製代碼

HTML:

<h1 class="center">
This heading will be center-aligned
</h1>
複製代碼

和id選擇器同樣，類選擇器也可被做爲派生選擇器。

.fancy td {
	color: #f60;
	background: #666;
	}
複製代碼

也能夠在某種元素中基於類進行選擇：

td.fancy {
	color: #f60;
	background: #666;
	}
複製代碼

這樣，則class爲fancy的單元格會變成灰色背景的橙色字，而class爲fancy的其餘元素，以及class不爲fancy的單元格，都不會變。

8.屬性選擇器屬性選擇器在爲不含class或id的表單設置樣式時特別有用。能夠爲帶有某些屬性的元素（例：a帶有屬性href）設置格式。

[href]
{
color:red;
}
複製代碼

還能夠爲屬性爲某些指定值，或是包含某些指定值的元素設置格式。指定某些值：[title=W3School] 包含某些值，由空格鏈接幾個值：[title~=hello] 包含某些值，由連字符鏈接幾個值：[lang|=en] （詳細的屬性選擇器手冊w3school上有）

9.CSS如何鏈接到HTML：在head部分中經過< link >標籤連接。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
複製代碼

外部樣式表中不能包含任何HTML標籤。單個文檔須要特殊樣式時，建議使用內部樣式表。例如：

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
複製代碼

當樣式只用於一個樣式時，才考慮內聯樣式。由於這樣會使表現和內容混雜在一塊兒，損失掉樣式表的許多優點。例如：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
複製代碼

10.CSS樣式 1）CSS背景：經過background-color調背景色，background-image設置背景圖像。能夠經過background-repeat、background-position等調節背景圖像的是否重複、位置等等信息。用位置關鍵字肯定位置，則（上下左右中）能夠同時選擇兩個不矛盾的同時使用，空格隔開。用百分比肯定位置，則第一個數字是水平位置，第二個數字是垂直位置。默認爲 0% 0%。用px長度值肯定位置，從左上角開始算。默認爲0 0。 Background-attachment屬性可使背景圖像相對可視區固定。

2）CSS文本：經過text相關的文本屬性，能夠定義文本的外觀。 text-indent 屬性能夠繼承。它也可使用各類長度單位。可正可負。 Text-align不影響元素的位置，只有元素其中的文本受影響。 Word-spacing和letter-spacing也可正可負。可以使用em和px。 text-transform：切換大小寫。若是多個Text-decoration應用於同一元素，會替換而不是累積。 White-space：處理空格和換行符。（詳細使用見文檔） Line-height：設置行間距文本方向：只有當unicode-bidi屬性設置爲embed或bidi-override時，direction屬性纔會發揮做用。

3）CSS字體：建議在font-family規則中都提供一個通用字體系列以做爲備選。例如：h1 {font-family: Georgia, serif;} 這樣，在系統沒有安裝指定字體的狀況下，依然有候選字體能夠選擇。或者指定一系列相似字體：

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}
複製代碼

這樣用戶代理就會按照優先順序進行查找，而且選出最靠前的已安裝字體進行使用。若是字體名中有空格、#、$等符號，則字體名須要套引號。若是該font-family屬性在HTML中，自己就有雙引號，則用單引號。（或者反之） Font-style中，italic和oblique是兩種不一樣的斜體（italic對字母結構有略微修改）。在通常的瀏覽器中，兩者沒什麼區別。在字體大小（font-size）中，默認的1em=16px。（若是父元素中font-size改變過，則按照改變後的值算便可）使用em則能夠在全部瀏覽器中調整文本大小。不過在ie中有問題，文本會更大或更小。可用font-variant屬性來使用小型大寫字體。

4）CSS連接：連接有四種狀態，可根據不一樣狀態調整連接的文本外觀：

a:link {color:#FF0000;}	/* 未被訪問的連接 */
a:visited {color:#00FF00;}	/* 已被訪問的連接 */
a:hover {color:#FF00FF;}	/* 鼠標指針移動到連接上 */
a:active {color:#0000FF;}	/* 正在被點擊的連接 */
複製代碼

其餘各類文本屬性這裏也適用。

例：作一個方框連接

<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}

a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
複製代碼

5）CSS列表：list-style中只有三種屬性，image，position，type。很是簡單。

6）CSS表格：corder-collapse若是設爲collapse，則外邊框和單元格邊框相鄰合併，編程單線條。其餘屬性也較簡單，使用可直接看手冊。（不過屬性種類較多，參見w3school的CSS屬性手冊。實際設計中要調整數值不少）

7）CSS輪廓：outline，屬性很是簡單，但屬性的值較多。看手冊便可。

接下來要學習CSS盒模型和定位相關知識，而後開始嘗試製做靜態網頁啦！