CSS概念，引入，選擇器

時間 2019-12-01

標籤 css 概念引入選擇器欄目 CSS 简体版

原文原文鏈接

概念

層疊樣式表,定義如何顯示HTML元素.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>

外部樣式表

推薦使用此方式. link 標籤寫在 head 標籤內blog

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

href　　外部 CSS 文件的路徑繼承

rel　　固定爲 stylesheet字符串

type　　固定爲 text/cssinput

import 導入式

導入式會在整個網頁裝載完後再裝載CSS文件it

　　所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。class

　　使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果。

CSS 選擇器

基本選擇器

標籤名
#id
.類名
*

組合選擇器

後代選擇器

/*li內部的a標籤設置字體顏色*/
li a {
color: green;
}

兒子選擇器

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

毗鄰選擇器

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

弟弟選擇器

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

屬性選擇器

/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}

/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}


不怎麼經常使用的屬性選擇器:
/*找到全部title屬性以hello開頭的元素*/
[title^="hello"] {
color: red;
}

/*找到全部title屬性以hello結尾的元素*/
[title$="hello"] {
color: yellow;
}

/*找到全部title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}

/*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
[title~="hello"] {
color: green;
}

分組

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

div標籤和p標籤統一設置字體爲紅色。

div, p {
color: red;
}

分兩行來寫更清晰一些

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輸入框獲取焦點時樣式*/
input:focus {
outline: none;
background-color: #eee;
}

僞元素選擇器　　　　

first-letter

/*在每一個<p>元素內容首字母添加樣式*/ 
 p:first-letter {
 font-size: 48px;
 color: red;
 }

before

/*在每一個<p>元素以前插入內容*/
p:before {
content:"*";
color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
content:"[?]";
color:blue;
}

ps:

　　before 和 after 多用於清除浮動

選擇器的優先級

CSS繼承

CSS的繼承機制得以讓樣式能夠給予標籤和其後代

選擇器的優先級權重　

內聯樣式　　1000

　　id選擇器　　 100

　　類選擇器　　 10

　　元素選擇器　1

ps:

　　可是某些屬性是沒法繼承的好比: border, margin, padding, background等

　　權重計算永不進位

　　羣組選擇器中 , 各個選擇器由自身的權重決定 , 互相之間是獨立的

　　後代 / 子代 / 僞類選擇器優先級計算按照各組成部分相加獲得

特殊方式

除此以外還能夠經過添加 !important 方式來強制讓樣式生效，但並不推薦使用。

過多的使用!important 會使樣式文件混亂不易維護。

萬不得已再用 !important 吧

相關標籤/搜索

每日一句

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