前端基礎之css

時間 2019-11-30

標籤前端基礎 css 欄目 CSS 简体版

原文原文鏈接

css介紹

CSS(Cascading Style Sheet ,層疊樣式表)定義如何顯示HTML元素。css

當瀏覽器讀到一個樣式表，它就會按照這個樣式表對文檔進行格式化（渲染）。瀏覽器

每一個css樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。字體

css的幾種引入方式

行內樣式

行內式在標記的style屬性中設定css樣式。不推薦大規模使用。spa

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將css樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：code

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。blog

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

css選擇器

基本選擇器繼承

元素選擇器　　p {color: "red";}文檔

id選擇器：　　#i1 {background-color：red；}字符串

類選擇器：　　.c1 (font-size:14px;) 　　或者p.c1 {color:red;}input

注意：

樣式類名不要用數字開頭（有的瀏覽器不認）

標籤中的class屬性若是有多個，要用空格分隔。

通用選擇器：　　* {color:white;}

組合選擇器

後代選擇器：　　li a {color:green;} /* li內部的a標籤設置字體顏色*/

兒子選擇器：　　div>p {font-family; "Arial Black", arial-black, cursive;} /*選擇全部父級是<div>元素的 <p>元素*/

毗鄰選擇器：　　div+p {margin: 5px;} /*選擇全部緊接着<div>元素以後的<p>元素*/

弟弟選擇器：　　#il~p {border: 2px solid royalblue;} /*i1後面全部的兄弟p標籤*/

屬性選擇器

/*用於選取帶有指定屬性的元素。*/

p[title] {color: red;}

/*用於選取帶有指定屬性和值的元素*/

p[title='213'] {color: green;}

/*找到全部title屬性以hello開頭的元素*/

[title^='hello'] {color:red;}

/*找到全部title屬性中包含（字符串包含）hello的元素*/

[title*='hello'] {color:red;}

/*找到全部title屬性以hello結尾的元素*/

[title$='hello'] {color: yellow;}

/*找到全部title屬性（有多個值換貨值以空格分割）中有一個值爲hello的元素*/

[title~='hello'] {color:green;}

分組和嵌套

分組

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的紛組選擇來統一設置元素樣式。

div, p { color : red ;}

上面的代碼爲div標籤和p標籤統一設置字體爲紅色。

一般咱們用兩行寫，更清晰。

div,

p { color : red ;

}

嵌套

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p { color : red ;}

僞類選擇器

/*未訪問的連接*/

a:link { color : #FF0000}

/*已訪問的連接*/

a:visited {color :#00FF00}

/*鼠標移動到連接上*/

a:hover { color : #FF00FF}

/*選定的連接*/

a:active { color : #0000FF}

/*input輸入框獲取焦點時樣式*/

僞元素選擇器

first-letter

經常使用的給首字母設置特殊樣式：p: first-letter {font-size: 48px; color: red;}

before

/*在每一個<p>元素以前插入內容*/

p:before {content: '*' color : red;}

after

/* 在每一個<p>元素以後插入內容*/

p: after {content：‘[?]’ ; color:blue ;}

before和after多用於清除浮動

選擇器的優先級

css繼承

繼承是css的一個主要特徵，它是依賴於祖先-後代的關係。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。

body {color : red ;}

此時頁面上全部標籤都會繼承body的字體顏色，然而css繼承性的權重是很是低的，是比普通元素的權重還要低的0。

咱們只要給對應的標籤設置字體顏色就可覆蓋它繼承的樣式。 p { color : green ;}

此外，繼承是css重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但css繼承也是有限制的，有一些屬性不能被繼承，如：border,margin,padding,background等。

選擇器的優先級

咱們上面學了不少選擇器，也就是說在一個HTML頁面中有不少方式找到一個元素而且爲其設置樣式，那瀏覽器根據什麼來決定應該應用哪一個樣式呢？

除此以外還能夠經過!important方式來強制讓樣式生效，但並不推薦使用，由於若是過多的使用！important會使樣式文件混亂不易維護

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。