css是級聯樣式表(cascading style sheets)。
級聯: 關聯 即 兩個內容之間的關係 。
樣式表: css修飾網頁的語法集。
優點:將頁面的內容與表現形式(css)分離達到可重複利用。
html是網頁的內容, 如 a img ** 表單 …
css控制頁面的外觀和樣式
為html控制外觀。
若要對內容進行多步操作,則需要多個標籤巢狀,書寫不便。如下例。
春眠不覺曉,
執行結果:
1.行內樣式表
行內樣式表,直接將樣式寫在標籤行內。
在標籤行內寫上style屬性,並且可以寫多種屬性。px指畫素。
實際中用的相對較少,原因只能對當前的一行進行修飾,未加修飾的樣式不變。
例項:
"color: #ff0011;font-size: 20px;">春眠不覺曉,
處處聞啼鳥。
執行結果:
內嵌樣式表
內嵌樣式表 ,部分結構與樣式相分離,寫在head標籤中。
例項:
春眠不覺曉,
處處聞啼鳥。
夜來風雨聲,
花落知多少。
執行結果:
外部樣式表
將css樣式表提取到乙個css檔案中,在html中將css檔案匯入 。
完全實現結構與樣式相分離,實際中使用較多。
例項:
春眠不覺曉,
處處聞啼鳥。
夜來風雨聲,
花落知多少。
/* out.css檔案 */
p
執行結果:
選擇器:
將分離後的樣式與網頁中的內容聯絡。
標籤選擇器:
可以選中網頁中所有指定的標籤,如下面的網頁中所有的p標籤都遵循所設定的屬性,即顏色為藍色且字型大小為20個畫素。
p
類選擇器:
匹配指定的類名對應的標籤
在 css 中,類選擇器以乙個點號顯示:
.center
在上面的例子中,所有擁有 center 類的 html 元素均為居中。
在下面的 html **中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 「.center」 選擇器中的規則。
"center">這個段落將居中對齊
注意:類名的第乙個字元不能使用數字
選擇器組合:
提取公共屬性,即p1類和p2類中字型大小都將會被設定為為20個畫素
.p1,.p2
id選擇器:
為標有特定id的html元素指定特定的樣式
下面的兩個 id 選擇器,第乙個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:
#red
#green
下面的 html **中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。
"red">這個段落的紅色
"green">這個段落的綠色
注意:id 屬性只能在每個 html 文件**現一次。
通配選擇器:
顯示為乙個星號(*)。該選擇器可以與任何元素匹配,就像是乙個萬用字元。
例如,下面的規則可以使文件中的每個元素都為紅色:
*
通配選擇器優先順序最低,但是高優先順序的只能覆蓋相同屬性,不能覆蓋特有的。
選擇器的優先順序從低到高:通配選擇器《標籤選擇器《類選擇器例項:
春曉"p1" id="title" style="color: brown;">春眠不覺曉,
"p2">處處聞啼鳥。
"p1">夜來風雨聲,
"p2">花落知多少。
後代選擇器:
選中指定標籤的指定後代標籤,他包含兒子級別和孫子級別。
我們可以定義後代選擇器來建立一些規則,使這些規則在某些文件結構中起作用,而在另外一些結構中不起作用。
舉例來說,如果希望只對 h1 元素中的 em 元素應用樣式,可以這樣寫:
h1 em
上面這個規則會把作為 h1 元素後代的 em 元素的文字變為 紅色。其他 em 文字(如段落或塊引用中的 em)則不會被這個規則選中。
子選擇器:
選中指定父標籤中的指定後代標籤
例如,如果希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:
h1 > strong
相鄰選擇器:
選中指定標籤的相鄰標籤
例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:
h1 + p
這個選擇器讀作:「選擇緊接在 h1 元素後出現的段落,h1 和 p 元素擁有共同的父元素」。
兄弟選擇器:
選中指定標籤的兄弟標籤
例如,如果要改變p標籤的兄弟標籤的顏色,可以這樣寫:
.p1~p
例項:
>
>
charset
="utf-8"
>
>
title
>
測試小白也能懂 常用加密演算法解析
在測試過程中,我們經常會遇到介面資料加密 資料庫密碼加密怎麼測試等問題,很多同學立馬被嚇退了。實際上,只要耐心一點,測試過程的常用加密演算法不是那麼難,甚至有的根本就不是加密演算法。密碼學是一門相對比較晦澀的科學,電影 模仿遊戲 就是講的包括圖靈在內的幾個頂級數學家破譯德軍的軍事情報的故事。但是在工...
小白也能懂 如何運營乙個內容專題?
之前發了一篇 關於內容專題,這有乙份從 0 到 1 的運營方案 被行外朋友吐槽好像很有用但專業名詞太多看不懂,只適合 還是有相關基礎 的童鞋看。於是衍生出了這一篇文章,旨在希望沒做過內容專題運營或者沒做過運營的朋友,靠著文章也能想象到運營乙個簡單的內容專題大概有什麼樣的畫面。乙個小內容專題,基本會有...
看完小白也能懂什麼是公有雲 私有雲 混合雲
近幾年隨著雲計算技術的逐漸普及,越來越多的企業開始選擇了部署雲計算方案,但是公有雲 私有雲 混合雲到底怎麼選,或者說它們各自具體有什麼區別,很多人是不了解的,針對不同需求的企業擁有不同部署方案,如果不了解的話,選型也會為難。今天我們深入淺出舉乙個例子,讓你通俗的明白什麼是公有雲 私有雲 混合雲和社群...