前端知識(shí)——CSS

CSS 頁面美化和布局控制

概念:

Cascading Style Sheets 層疊樣式表

  • 層疊:多個(gè)樣式可以作用在同一個(gè)html元素上,同時(shí)生效

好處

  1. 功能強(qiáng)大
  2. 將內(nèi)容展示和樣式控制分離
    1. 降低耦合度
    2. 讓分工協(xié)作更容易
    3. 可以提高開發(fā)效率

CSS使用

CSS與html結(jié)合方式

  1. 內(nèi)聯(lián)樣式
  • 在標(biāo)簽內(nèi)使用style屬性指定css代碼
  1. 內(nèi)部樣式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
<!--內(nèi)部樣式
        * 在head標(biāo)簽內(nèi),定義style標(biāo)簽力崇,style標(biāo)簽的標(biāo)簽體內(nèi)容就是css代碼
-->
<div>Hello Css</div>

</body>
</html>
  1. 外部樣式
  • 在head標(biāo)簽內(nèi) 定義link標(biāo)簽,引入外部的資源文件
a.css
div {
    color: lightgreen;
}
* head中l(wèi)ink標(biāo)簽引入
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/a.css"/>
</head>

注意:

  1. 1步悠,2内贮,3 三種方式 css作用范圍越來越大

CSS語法

格式

選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}

注意: 每一對(duì)屬性要用,隔開宣赔,最后一對(duì)屬性可以不加惭笑;

選擇器

分類

基礎(chǔ)選擇器
  1. id選擇器 選擇具體的id屬性值的元素
* 語法:#id屬性值{}
  <style>
        #div1{
            color:red;
        }
    </style>
<div id="div1">永不妥協(xié)</div>
  1. 元素選擇器
    選擇具有相同標(biāo)簽名稱的元素
  • 語法:標(biāo)簽名稱{}
div {
            color: green;
        }

注意 id選擇器優(yōu)先級(jí)高于元素選擇器

  1. 類選擇器
    選擇具有相同的class屬性值的元素
  • 語法 .class屬性值{}
.cls1 {
            color: blue;
        }
<p class="cls1">道不同不相為謀</p>

注意:類選擇器優(yōu)先級(jí)高于元素選擇器

以上選擇器中 id選擇器優(yōu)先級(jí)>類選擇器優(yōu)先級(jí)>元素選擇器優(yōu)先級(jí)

擴(kuò)展選擇器
  1. 選擇所有元素:
  • 語法 *{}
    通用選擇器侣姆,會(huì)選擇所有元素
  1. 并集選擇器
  • 語法 選擇器1,選擇器2{}
  1. 子選擇器 篩選選擇器1下的選擇器2
  • 語法 選擇器1 選擇器2{}
  1. 父選擇器 篩選選擇器2上的父元素選擇器1
  • 語法 選擇器1>選擇器2{}
  1. 屬性選擇器 選擇元素名稱,屬性名=屬性值的元素
  • 語法 元素名稱[屬性名=‘屬性值’]{}
<input type="text">
        /*屬性選擇器*/
        input[type='text'] {
            border: 1px solid red;
        }

  1. 偽類選擇器 選擇一些元素具有的狀態(tài)
  • 語法:元素:狀態(tài){}
 a:link {
            color: deeppink;

        }

        a:hover {
            color: blueviolet;
        }

        a:active {
            color: greenyellow;
        }

        a:visited {
            color: black;
        }
<a href="#">去死吧</a>

屬性(常見)

  1. 字體 文本
    • font-size:字體大小
    • color:文本顏色
    • text-align:文本對(duì)齊方式
    • line-height:行高
  2. 背景
    • background 背景 復(fù)合屬性
  3. 邊框 輪廓
    • border:邊框 復(fù)合屬性
  4. 尺寸
    • 寬度:width
    • 高度:heigh
  5. 盒子模型 控制布局
    • margin:外邊距
    • padding:內(nèi)邊距
      • 默認(rèn)情況下 內(nèi)邊距會(huì)影響盒子的大小
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末生真,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子捺宗,更是在濱河造成了極大的恐慌柱蟀,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蚜厉,死亡現(xiàn)場(chǎng)離奇詭異长已,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)昼牛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門痰哨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人匾嘱,你說我怎么就攤上這事≡缈伲” “怎么了霎烙?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蕊连。 經(jīng)常有香客問我悬垃,道長(zhǎng),這世上最難降的妖魔是什么甘苍? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任尝蠕,我火速辦了婚禮,結(jié)果婚禮上载庭,老公的妹妹穿的比我還像新娘看彼。我一直安慰自己,他們只是感情好囚聚,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布靖榕。 她就那樣靜靜地躺著,像睡著了一般顽铸。 火紅的嫁衣襯著肌膚如雪茁计。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天谓松,我揣著相機(jī)與錄音星压,去河邊找鬼。 笑死鬼譬,一個(gè)胖子當(dāng)著我的面吹牛娜膘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拧簸,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼劲绪,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起贾富,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤歉眷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后颤枪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體汗捡,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年畏纲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扇住。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡盗胀,死狀恐怖艘蹋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情票灰,我是刑警寧澤女阀,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站屑迂,受9級(jí)特大地震影響浸策,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜惹盼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一庸汗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧手报,春花似錦蚯舱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至盏档,卻和暖如春凶掰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜈亩。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工懦窘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人稚配。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓畅涂,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親道川。 傳聞我的和親對(duì)象是個(gè)殘疾皇子午衰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案立宜? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)臊岸。 注意:講述HT...
    kismetajun閱讀 27,522評(píng)論 1 45
  • 選擇器 選擇器(selector)橙数,會(huì)告訴瀏覽器:網(wǎng)頁 上的哪些元素需要設(shè)置什么樣的樣式。 CSS 元素選擇器 元...
    Pickupthesmokes閱讀 70評(píng)論 0 0
  • 三. CSS介紹 1.為了讓網(wǎng)頁元素的樣式更加的豐富, 也為了讓網(wǎng)頁的內(nèi)容和樣式能拆分開, CSS由此而誕生. ...
    effortFMC閱讀 258評(píng)論 0 0
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的帅戒,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體灯帮。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,908評(píng)論 0 0