CSS基礎(chǔ)知識點記錄

CSS參考手冊

1、CSS(層疊樣式表):描述元素的皮膚壁袄,美化頁面类早。

2、CSS使用方式:內(nèi)聯(lián)嗜逻、頁面嵌入和外部引用涩僻。

2.1、內(nèi)聯(lián)

    <input type ="text" style="background-color: Red;border-color: Green" />

2.2栈顷、頁面嵌入

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input{background-color: Red;border-color: Green}
    </style>
    </head>

所有input標(biāo)簽都被設(shè)置成該樣式逆日。

2.3、外部引用

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>

3萄凤、CSS計量單位:px(像素)室抽、30%(百分比)、em(相對單位)等靡努。

4坪圾、將光標(biāo)設(shè)置成圖標(biāo)樣式。圖標(biāo)格式必須是".cur"或"ani"格式才行惑朦。

例如:

<body style="cursor:url(tt.ani)"></body>

5兽泄、樣式選擇器:標(biāo)簽選擇器、class選擇去器漾月、id選擇器病梢。

對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器。

5.1梁肿、標(biāo)簽選擇器(對于指定的標(biāo)簽采用統(tǒng)一的樣式)

例如:

input{border-color: Yellow;color: Red;}

5.2蜓陌、class選擇器

定義一個命名的樣式觅彰,然后在用到它的時候設(shè)置元素的class屬性為樣式的名稱,還可以同時設(shè)置多個class护奈,名稱之間加空格缔莲。

例如:

<!--定義-->
.warning{backgroud: Yellow;}
.highlight{font-size: xx-large;cursor: help;}
<!--使用-->
<div class="warning">你好</div>
<div class="warning highlight">我好</div>
<div class="highlight">大家好</div>

標(biāo)簽+class選擇器

class選擇器也可以針對不同的標(biāo)簽,實現(xiàn)同樣的樣式名對于不同的標(biāo)簽有不同的樣式霉旗,只要在樣式名前加標(biāo)簽名即可。

例如:

<!--定義-->
input.accountno{text-align: right;color: Red;}
label.accountno{font-style: italic;}
<!--使用-->
<input class="acountno"  type="text" value="111"/>
<label class="acountno">222</label>

5.3蛀骇、id選擇器

為指定id的元素設(shè)置樣式厌秒,id前加#。

例如:

<!--定義-->
#username
{
    font-size: xx-large;
}
<!--使用-->
<input id="username"  type="text" value="liujf"/>

5.4擅憔、其他選擇器(不常用)

  • 關(guān)聯(lián)選擇器:

例如:
P strong{background-color: Yellow;}
表示P標(biāo)簽內(nèi)的strong標(biāo)簽內(nèi)的內(nèi)容使用的樣式鸵闪。

  • 組合選擇器:

同時為多個標(biāo)簽設(shè)置一個樣式。
例如:
h1,h2,input{background-color: Green;}

  • 偽選擇器:

為標(biāo)簽的不同狀態(tài)設(shè)置不同的樣式暑诸。
a:visited:超鏈接點擊過的樣式 蚌讼。
a:active:選中超鏈接時的樣式。
a:link:超鏈接未被訪問時的樣式个榕。
a:hover:鼠標(biāo)移到超鏈接時的樣式篡石。
例如:

a:visited{text-decoration: none;}
a:active{text-decoration: none;}
a:link{text-decoration: none;}
a:hover{text-decoration: underline;}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市西采,隨后出現(xiàn)的幾起案子凰萨,更是在濱河造成了極大的恐慌,老刑警劉巖械馆,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胖眷,死亡現(xiàn)場離奇詭異,居然都是意外死亡霹崎,警方通過查閱死者的電腦和手機珊搀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尾菇,“玉大人境析,你說我怎么就攤上這事〈砉粒” “怎么了簿晓?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長千埃。 經(jīng)常有香客問我憔儿,道長,這世上最難降的妖魔是什么放可? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任谒臼,我火速辦了婚禮朝刊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蜈缤。我一直安慰自己拾氓,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布底哥。 她就那樣靜靜地躺著咙鞍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪趾徽。 梳的紋絲不亂的頭發(fā)上续滋,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天,我揣著相機與錄音孵奶,去河邊找鬼疲酌。 笑死,一個胖子當(dāng)著我的面吹牛了袁,可吹牛的內(nèi)容都是我干的朗恳。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼载绿,長吁一口氣:“原來是場噩夢啊……” “哼粥诫!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起卢鹦,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤臀脏,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冀自,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揉稚,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年熬粗,在試婚紗的時候發(fā)現(xiàn)自己被綠了搀玖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡驻呐,死狀恐怖灌诅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情含末,我是刑警寧澤猜拾,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站佣盒,受9級特大地震影響挎袜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一盯仪、第九天 我趴在偏房一處隱蔽的房頂上張望紊搪。 院中可真熱鬧,春花似錦全景、人聲如沸耀石。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽滞伟。三九已至,卻和暖如春馆纳,著一層夾襖步出監(jiān)牢的瞬間诗良,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工鲁驶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人舞骆。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓钥弯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親督禽。 傳聞我的和親對象是個殘疾皇子脆霎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2 345

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,728評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理狈惫,服務(wù)發(fā)現(xiàn)睛蛛,斷路器,智...
    卡卡羅2017閱讀 134,601評論 18 139
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識選擇器(重要k侍浮R渖觥!)繼承菱肖、特殊性客冈、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,061評論 0 40
  • 第6章 開始學(xué)習(xí)CSS稳强,為網(wǎng)頁添加樣式 1场仲、認(rèn)識CSS樣式CSS全稱為“層疊樣式表 (Cascading Styl...
    夏沫xx閱讀 1,051評論 1 11
  • 大家好,我是悠貝南山保利繪本館的真真老師退疫。今天給大家推薦的繪本叫做《一聲尖叫》渠缕。 原本安靜的小鎮(zhèn)里忽然傳出一聲尖叫...
    茍茍的腳步_繪本與成長閱讀 4,121評論 0 0