HTML5-學習記錄-2-CSS

05-21

HTML5-學習記錄-2-CSS

學習資料：

w3school

b站

CSS層疊樣式表示一種用來表現HTML或則XML等文件的計算機語言。目前的最新版本是CSS3，是真正能夠做到網頁表現與內容分離的一種樣式設計語言，相對於傳統的HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素集的精確控制，支持所有的字元字型大小，樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言，CSS能夠根據不同使用者的理解能力簡化或者優化寫法，針對各類人群，有較強的易讀性。

最基礎的style元素屬性:

font-size：設置文本大小的屬性。

color:設置文本顏色的屬性。

三種方式創建CSS：

使用元素內嵌樣式表
使用文檔內嵌樣式表
使用外部樣式表

元素中切入style<a stylex="font-size: 40px;color:#ffad2a">靠譜學院</a> 文檔內嵌樣式表：<body> <a>靠譜學院</a></body>head中<style>中切入對a的描述<head> <meta charset="UTF-8"> <title>創建CSS</title> <style type="text/css"> a{ font-size:40px; color:#345cff; } </style></head>

外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一

樣式表極大地提高了工作效率

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標籤和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。

當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？

瀏覽器預設設置
外部樣式表
內部樣式表（位於 <head> 標籤內部）
內聯樣式（在 HTML 元素內部）

如果要定義多個，加入說是a標籤，且這些a標籤的設置都是一樣的，此時可以使用外部樣式表和內部樣式表，最合適使用內部樣式表，在內聯樣式設置會覆蓋head內部的內部樣式表，

內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明。

CSS 語法

元素內嵌樣式表 > 文檔內嵌樣式表 > 外部樣式表

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

selector {declaration1; declaration2; ... declarationN }

每條聲明由一個屬性和一個值組成。

selector {property: value}h1 {color:red; font-size:14px;}將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

提示：如果值為若干單詞，則要給值加引號：

p {font-family: "sans serif";}

你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：

p { text-align: center; color: black; font-family: arial;}

CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

選擇器的分組

可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開，對所有的標題元素進行了分組。所有的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6 { color: green; }

創建好外部樣式表之後，需要在html中的<head>中插入一下代碼

<link rel="stylesheet" type="text/css" href="cssSheet.css">href就是定義好的外部樣式表

CSS選擇器

選擇所有元素

<head> <meta charset="UTF-8"> <title>創建css選擇器</title> <style type="text/css"> *{ font-size: 40px; color: #ff38f2; } </style></head>

* 代表給全部的元素都設置這樣的屬性。

根據類型選擇元素

class 是全局屬性，而且這是一個全局屬性，也就是全部的標籤中都有這個屬性，在標籤中增加這個屬性，就可以根據類型選擇設置。這個值是可以隨意設置，中文除外。

<head> <meta charset="UTF-8"> <title>創建css選擇器</title> <style type="text/css"> .a1{ font-size: 40px; color: #ff38f2; } </style></head><body> <a class="a1">靠譜學院</a> <a class="p1">靠譜學院</a> <p class="a1"> 靠譜學院</p> <h1 class="h11">靠譜學院</h1></body>

.a1 就是將類class 值為a1的標籤設置為定義的樣式。

根據id選擇元素

這和根據類來選擇元素是非常相似的，id這個屬性也是全局的

<html lang="en"><head> <meta charset="UTF-8"> <title>創建css選擇器</title> <style type="text/css"> #a1{ font-size: 40px; color: #ff38f2; } </style></head><body> <a id="a1">靠譜學院</a> <a id="p1">靠譜學院</a> <p class="a1"> 靠譜學院</p> <h1 class="h11">靠譜學院</h1></body></html>

#a1來表明我們要描述的標籤的帶有id號為a1的標籤。

id和class不同的是，id是唯一的，class是可以重複定義的，不是唯一的，會報紅，但是是可以運行的，只是編譯器不這麼推薦你使用。

<html lang="en"><head> <meta charset="UTF-8"> <title>創建css選擇器</title> <style type="text/css"> [href]{ font-size: 40px; color: #ffef64; } </style></head><body> <a href="html5.html">靠譜學院</a> <a>靠譜學院</a> <p> 靠譜學院</p> <h1>靠譜學院</h1></body></html>

[href]：根據a標籤中的href屬性，可以定義一個樣式支取修飾帶有href的a標籤。

<html lang="en"><head> <meta charset="UTF-8"> <title>創建css選擇器</title> <style type="text/css"> [href="html4.html]{ font-size: 40px; color: #ffef64; } </style></head><body> <a href="html5.html">靠譜學院</a> <a href="html4.html>靠譜學院</a> <p> 靠譜學院</p> <h1>靠譜學院</h1></body></html>

以上的配置只對特定的href進行修飾。而不會對所有帶有href的a標籤進行修飾。

：選擇器

<html lang="en"><head> <meta charset="UTF-8"> <title>創建css選擇器</title> <style type="text/css"> a{ font-size: 40px; color: #ffef64; } a:hover{ font-size: 80px; color: #1cff34; } </style></head><body> <a href="html5.html">靠譜學院</a> <p> 靠譜學院</p> <h1>靠譜學院</h1></body></html>

a:hover{}可以定義a標籤定義的那個連接，在滑鼠到達這個標籤的時候，標籤變為hover定義的樣式。

CSS設置文本樣式

<style type="text/css"> .class1{ border-width: 4px; border-color: #1fff2d; /*border-style: solid;*/ border-style: dashed; } </style>

設置樣式：結果

邊框一些設置。

背景的一些設置

background-image:
background-repeat:。
background-size:;，
background-attachment

background-position

文本的設置

可以改變文本的顏色、字元間距，對齊文本，裝飾文本，對文本進行縮進。

p{text-indent:5em} 首行縮進，縮進單位還可以是百分比。p {text-indent: -5em; padding-left: 5em;}

首行縮進也可以是負值，可以實現很多有趣的效果，如懸掛在元素中餘下部分的左邊：首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距。

text-align：影響一個元素中的文本行互相之間的對齊方式。left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。

提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。

text-align:center 與 <CENTER>

<CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而隻影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。

字間隔：

word-space：改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。

接受一個正值字之間距離拉開，負值則字之間的距離拉近。

字元間隔：

letter-spacing：字母間隔修改的是字元或字母之間的間隔。

取值和word-space是一樣的，可正可負。

字元轉換：

text-transform:取值如下：none:默認，不做任何處理。uppercase:大寫。lowercase:小寫。capitalize:首字母大寫。

文本裝飾:

text-decorationnone：默認無任何裝飾underline:下劃線overline:上劃線line-through:文本中間劃一條線blink:文本閃爍

處理空白符：

p {white-space: normal;}

注釋：當 white-space 屬性設置為 normal 時，會合併所有的空白符，並忽略換行符。

設置字體

h1 {font-family: Georgia;}

字體風格：

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}以上上個都是現實字體為斜體

斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

字體變形

p {font-variant:small-caps;}設置小型大寫字母。

字體加粗

p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}

值得範圍為100-900，100為最細的，900對應最粗體，400相當於normal，700等價於bold

字體大小

h1 {font-size:60px;}h2 {font-size:40px;}p {font-size:14px;}

1em 等於當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那麼對於該元素，1em 就等於 16 像素。在設置字體大小時，em 的值會相對於父元素的字體大小改變。瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。可以使用下面這個公式將像素轉換為 em：pixels/16=em

設置鏈接的樣式

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

a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後

列表屬性

ul {list-style-type : disc} # 列表每一個元素前，實心體圓ul {list-style-type : circle} # 列表每一個元素前，空心體圓ul {list-style-type : square} # 列表每一個元素前，實心體正方形ul {list-style-type : none} # 無ul {list-style-type : decimal} # 數字ul {list-style-type : lower-roman} # 小寫羅馬體標記 ul {list-style-type : upper-roman} # 大寫羅馬體標記 I II IIIul {list-style-type : lower-alpha} # a,b, c 標記ul {list-style-type : upper-alpha} # A,B, C 標記

也可設置自定義圖標定義

ul {list-style-image: url(/i/eg_arrow.gif)}

list-style-position 設置列表中列表項標誌的位置。

設置表格

table,tr,td{ border: 0.5px solid blue;}

設置表格格式，表格默認不顯示錶格框，solid後就會顯示出來，0.5px是表格寬度

width: 100px;height: 100px;text-align: center; 對其方式vertical-align: bottom; 垂直對其方式padding: 10px; 表格裡面內容與頁邊距background-color: #ff456f; 表格背景

如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。

默認的是，雙線的。

outline輪廓，回執於元素周圍的一條線