CSS樣式學習筆記

一.基礎知識

1.基本構(gòu)成:選擇符和聲明逐虚,聲明包括屬性和值匿值。

圖片發(fā)自簡書App

2.注釋/*...*/

3.在html中插入形式(離被設置元素越近,優(yōu)先級越高)

(1)內(nèi)聯(lián)式:直接寫在現(xiàn)有的html標簽中

<p style=“color:red;font-size:12px;...”>...</p>

(2)嵌入式(寫在<head></head>之間)

<style type=“text/css”>

span

{

color:red;

}

</style>

(3)外部式:寫入單獨文件*.css

在head內(nèi)使用link鏈接入html

<link href=“*.css” rel=“stylesheet” type=“text/css”> ?rel和type是固定寫法

二.選擇器

1.標簽選擇器(html中的標簽)

標簽{樣式設置;}

?可寫成分組選擇器

標簽1物喷,標簽2{樣式設置;}

2.類選擇器

<span class=“類名1 類名2”>...</span>...

<span class=“類名1 類名2”>...</span>...

.類名1{樣式設置;}

.類名2{樣式設置;}

3.id選擇器

<span id=“id名”>...</span>

#id名{樣式設置}唯一性

4.子選擇器(只包含第一代)

.類名>span{樣式設置;}

5.包含(后代)選擇器

.類名 span{樣式設置;}

6.通用選擇器(設置所有的標簽樣式)

*{樣式設置;}

7.偽類選擇器(給標簽的某種狀態(tài)添加樣式)

標簽.hover{樣式設置;}鼠標劃過時的樣式

三.選擇器權(quán)值

1.標簽是1

2.類選擇是10

3.id選擇是100

例:

圖片發(fā)自簡書App


四.文字排版

1.body{font-family:"Microsoft Yahei";}給網(wǎng)頁設置字體-微軟雅黑

2.body{font-size:12px;color:red;}給網(wǎng)頁設置字號和顏色

3.p span{font-weight:bold;}文字設置為粗體

4.p a{font-style:italic;}文字設置為斜體

5.p a{text-decoration:underline;}文字設置下劃線

6. ? .oldPrice{text-decoration:line-through;}文字設置刪除線

7.p{text-indent:2em;}段落縮進2個

8.p{line-height:2em;}行間距2倍行高

9.h1{letter-spacing:50px;}中文字职车,字母間距

h1{word-spacing:50px;}單詞間距

10.h1{text-align:center;}段落居中

h1{text-align:left;}段落居左

h1{text-align:right;}段落居右

五.布局模型

1.流動模型(flow)默認

第一點,塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布济榨,因為在默認狀態(tài)下燎含,塊狀元素的寬度都為100%。實際上腿短,塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標簽(div,h1橘忱,p)寬度顯示為100%赴魁。

第二點,在流動模型下钝诚,內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示颖御。(內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行)

2.浮動模型(float)

div{float:left}

div塊在一行按居左順序顯示

3.層模型(layer)

層模型有三種形式:

(1)絕對定位(position: absolute)

圖片發(fā)自簡書App

(2)相對定位(position: relative)

圖片發(fā)自簡書App


(3)固定定位(position: fixed)

fixed:表示固定定位,與absolute定位類型類似凝颇,但它的相對移動的坐標是視圖(屏幕內(nèi)的網(wǎng)頁窗口)本身潘拱。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化拧略,除非你在屏幕中移動瀏覽器窗口的屏幕位置芦岂,或改變?yōu)g覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置垫蛆,不會受文檔流動影響

(4)相對于某個模塊定位

圖片發(fā)自簡書App

六.代碼縮寫

1.盒模型縮寫見html

2.顏色縮寫

p{color:#000000} ? 縮寫 p{color:#000} ? ?

p{color:#336699} ? ?縮寫p{color:#369} ?

3.字體縮寫

圖片發(fā)自簡書App

注意:

1禽最、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性,其他的屬性(如 font-weight袱饭、font-style川无、font-variant、line-height)如未指定將自動使用默認值虑乖。

2懦趋、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。

一般情況下因為對于中文網(wǎng)站疹味,英文還是比較少的仅叫,所以下面縮寫代碼比較常用:

圖片發(fā)自簡書App

七.值

1.顏色值

在網(wǎng)頁中的顏色設置是非常重要,有字體顏色(color)佛猛、背景顏色(background-color)鹃两、邊框顏色(border)等谣拣,設置顏色的方法也有很多種:

圖片發(fā)自簡書App


八.樣式設置

(一).居中

1.行內(nèi)元素

? ? ? 如果被設置元素為文本、圖片等行內(nèi)元素時,水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的别瞭。(父元素和子元素:如下面的html代碼中,div是“我想要在父容器中水平居中顯示”這個文本的父元素俺抽。反之這個文本是div的子元素 )如下代碼:

圖片發(fā)自簡書App

2.塊狀元素之定寬

? ? ? ?定寬塊狀元素:塊狀元素的寬度width為固定值川抡。

? ? ? ?滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現(xiàn)居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中:

圖片發(fā)自簡書App

3.塊狀元素之不定寬

(1)加入 table 標簽

? ? ? ?為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度(table其長度根據(jù)其內(nèi)文本長度決定)边臼,因此可以看做一個定寬度塊元素哄尔,然后再利用定寬度塊狀居中的margin的方法,使其水平居中柠并。


第一步:為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 岭接、富拗、 )。

第二步:為這個 table 設置“左右 margin 居中”(這個和定寬塊狀元素的方法一樣)鸣戴。

舉例如下:

圖片發(fā)自簡書App

(2)設置 display: inline 方法:與第一種類似啃沪,顯示類型設為 行內(nèi)元素,進行不定寬元素的屬性設置窄锅。

改變塊級元素的 display 為 inline 類型(設置為 行內(nèi)元素 顯示)创千,然后使用 text-align:center 來實現(xiàn)居中效果。

圖片發(fā)自簡書App

這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽入偷,但也存在著一些問題:它將塊狀元素的 display 類型改為 inline追驴,變成了行內(nèi)元素,所以少了一些功能疏之,比如設定長度值殿雪。

(3)設置 position:relative 和 left:50%:利用 相對定位 的方式,將元素向左偏移 50% 体捏,即達到居中的目的冠摄。

我們可以這樣理解:假想ul層的父層(即下面例子中的div層)中間有條平分線將ul層的父層(div層)平均分為兩份,ul層的css代碼是將ul層的最左端與ul層的父層(div層)的平分線對齊几缭;而li層的css代碼則是將li層的平分線與ul層的最左端(也是div層的平分線)對齊河泳,從而實現(xiàn)li層的居中。

圖片發(fā)自簡書App

4.垂直居中

(1)父元素高度確定的單行文本

父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的年栓。(height: 該元素的高度拆挥,line-height: 顧名思義,行高(行間距)某抓,指在文本中纸兔,行與行之間的 基線間的距離 )。

line-height 與 font-size 的計算值之差否副,在 CSS 中成為“行間距”汉矿。分為兩半,分別加到一個文本行內(nèi)容的頂部和底部备禀。

這種文字行高與塊高一致帶來了一個弊端:當文字內(nèi)容的長度大于塊的寬時洲拇,就有內(nèi)容脫離了塊。

圖片發(fā)自簡書App

(2)父元素高度確定的多行文本

a)使用插入 table ?(包括tbody曲尸、tr赋续、td)標簽,同時設置 vertical-align:middle另患。

css 中有一個用于豎直居中的屬性 vertical-align纽乱,在父元素設置此樣式時,會對inline-block類型的子元素都有用昆箕。下面看一下例子:

圖片發(fā)自簡書App

b)這種方法兼容性比較差鸦列,只是提供大家學習參考租冠。

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell(設置為表格單元顯示)薯嗤,激活 vertical-align 屬性肺稀,但注意 IE6、7 并不支持這個樣式, 兼容性比較差应民。

圖片發(fā)自簡書App

5.隱性改變diaplay類型

有一個有趣的現(xiàn)象就是當為元素(不論之前是什么類型元素,display:none 除外)設置以下 2 個句之一:

a) position : absolute

b) float : left 或 float:right

簡單來說夕吻,只要html代碼中出現(xiàn)以上兩句之一诲锹,元素的display顯示類型就會自動變?yōu)橐?display:inline-block(塊狀元素)的方式顯示,當然就可以設置元素的 width 和 height 了涉馅,且默認寬度不占滿父元素归园。

如下面的代碼,小伙伴們都知道 a 標簽是 行內(nèi)元素 稚矿,所以設置它的 width 是 沒有效果的庸诱,但是設置為 position:absolute 以后,就可以了晤揣。

圖片發(fā)自簡書App

九.樣式

1.font-size:12px;字號

2.color:red;字體顏色

3.line-height:1.6em;行間距

4.font-weight:normal;去掉字體加粗

5.border:1px;邊框1像素寬

6.solid:red;邊框紅色實心

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末桥爽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子昧识,更是在濱河造成了極大的恐慌钠四,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件跪楞,死亡現(xiàn)場離奇詭異缀去,居然都是意外死亡,警方通過查閱死者的電腦和手機甸祭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門缕碎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人池户,你說我怎么就攤上這事咏雌。” “怎么了煞檩?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵处嫌,是天一觀的道長。 經(jīng)常有香客問我斟湃,道長熏迹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任凝赛,我火速辦了婚禮注暗,結(jié)果婚禮上坛缕,老公的妹妹穿的比我還像新娘。我一直安慰自己捆昏,他們只是感情好赚楚,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著骗卜,像睡著了一般宠页。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寇仓,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天举户,我揣著相機與錄音,去河邊找鬼遍烦。 笑死俭嘁,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的服猪。 我是一名探鬼主播供填,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼罢猪!你這毒婦竟也來了近她?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤坡脐,失蹤者是張志新(化名)和其女友劉穎泄私,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體备闲,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡晌端,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了恬砂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咧纠。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖泻骤,靈堂內(nèi)的尸體忽然破棺而出漆羔,到底是詐尸還是另有隱情,我是刑警寧澤狱掂,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布演痒,位于F島的核電站,受9級特大地震影響趋惨,放射性物質(zhì)發(fā)生泄漏鸟顺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望讯嫂。 院中可真熱鬧蹦锋,春花似錦、人聲如沸欧芽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽千扔。三九已至憎妙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間曲楚,已是汗流浹背尚氛。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留洞渤,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓属瓣,卻偏偏與公主長得像载迄,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子抡蛙,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案护昧? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,761評論 1 92
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,652評論 0 30
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中粗截,這個css樣式文件以“.css...
    KunMitnic閱讀 944評論 0 1
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途惋耙。 HTML5 HTML介紹 H...
    PYLON閱讀 3,234評論 0 5
  • CSS格式化排版 1、字體 我們可以使用css樣式為網(wǎng)頁中的文字設置字體熊昌、字號绽榛、顏色等樣式屬性。下面我們來看一個例...
    張文靖同學閱讀 1,289評論 0 3