前端學習之 CSS（一）

時間 2019-12-09

標籤前端學習 css 欄目 CSS 简体版

原文原文鏈接

一:什麼是 CSS?

·CSS 指層疊樣式表 (Cascading Style Sheets)php

·樣式定義如何顯示 HTML 元素css

·樣式一般存儲在樣式表中html

·把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題前端

·外部樣式表能夠極大提升工做效率瀏覽器

·外部樣式表一般存儲在 CSS 文件中app

·多個樣式定義可層疊爲一個ide

二:CSS語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:佈局

選擇器一般是您須要改變樣式的 HTML 元素。字體

每條聲明由一個屬性和一個值組成。網站

屬性（property）是您但願設置的樣式屬性（style attribute）。每一個屬性有一個值。屬性和值被冒號分開。

三:CSS的引入方式

1. 行內式

這種當時不推薦使用

<div>

<p style = "color:blue;">這個段落採用了CSS行內式。</p>

</div>

效果以下(style使得字體變藍):

2. 內接樣式

例子:

首先是head裏的內容：

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

View Code

而後是body裏的內容:

div>
    <p>
        這是一個內接樣式
    </p>
</div>

View Code

最後是效果圖:

3.外接樣式

(1)連接式

html內容爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="03.css">
</head>
<body>
<div>
    <p>這是一個外連接</p>
</div>
</body>
</html>

View Code

css內容爲：

p{
    color:red;
}

View Code

如圖:

運行效果以下圖:

(2) 導入式

不經常使用，由於在加載網頁的時候，沒有徹底加載的時候會網頁結構變形。

HTML例內容爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        @import url("04.css");
    </style>
</head>
<body>
<div>
    <p>這是一個外連接2</p>
</div>
</body>
</html>

View Code

css內容爲:

p{
    color:blue;
}

View Code

運行效果以下圖:

四:選擇器

具備特定屬性的HTML元素樣式

具備特定屬性的HTML元素樣式不只僅是class和id。

css優先級,指的是瀏覽器加載css樣式的前後順序.

1.基本選擇器

(1)標籤(元素)選擇器

標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是」特性「。只要相同的標籤效果都會產生

例:

首先是html上的內容是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="05_biaoqian.css">
</head>

<body>
<p>p標籤的效果</p>
body 標籤的效果
<br>
<span>span標籤的效果</span>
</body>
</html>

View Code

而後是css文件內容:

body{
    color:gray;
    font-size: 12px;
}
/*標籤選擇器 {}前面是標籤的名字*/
p{
    color: red;
    font-size: 20px;
}
span{
    color: brown;
}

View Code

兩個文件的截圖:

運行出來的效果圖:

(2)類選擇器

"." 加選中class名稱

所謂類：就是class . class與id很是類似任何的標籤均可以加類，可是類是能夠重複,屬於歸類的概念。同一個標籤中能夠攜帶多個類，用空格隔開。開發經常使用類選擇標籤。

例:

首先是html內容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="05_lei.css">
</head>
<body>
<!-- 公共類    共有的屬性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>
</body>
</html>

View Code

CSS的內容爲：

.lv{
     color: green;
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;
/*表示在文本下加下劃線*/
}

View Code

兩個代碼文件關係如箭頭，第一個p標籤有兩種類爲lv 和 big ，將達到兩種類的效果，同理另外另個p標籤也是如此。

運行後的結果如圖：

總結：

不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式

每一個類要儘量的小，有公共的概念，可以讓更多的標籤使。

(3)id選擇器(#+id名稱)

# 加選中id名稱

同一個頁面中id不能重複。

任何的標籤均可以設置id

id命名規範要以字母能夠有數字下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值。

例：

html內容爲：
<div id="box">
    <p id = "s1">id選擇器1</p>
    <p id="s2">id選擇器2</p>
</div>


css內容爲：
#box{
    background:green;
}
#s1{
    color: red;
}
#s2{
    font-size: 30px;
}

View Code

效果截圖爲：

CSS優先級，指的是瀏覽器加載CSS樣式的前後順序。

權值越大，優先級越高，如下是三個選擇器的權值比較。

2.高級選擇器

(1)後代選擇器

例：

首選是html裏面的內容爲：

<div class="father">
    father 層
    <p class="box1">
        father 的子層
        <span class="sun">
            father 的孫子級層
        </span>
    </p>
</div>
<span class="noson">不屬於father層裏</span>

View Code

而後是css內容爲：

.father .sun{
    color: darkorange;
}
.father .box1{
    color: blue;
}
.father{
    background: #666666;
}

View Code

而後是對效果進行截圖：

首選是css中後代選擇器.father .sun和.father .box1 對後代進行修飾，而後class =」noson」不是father的子類，全部不影響。

(2)子代選擇器

使用>表示子代選擇器。好比container>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

例：

前端html代碼爲：

<dic class="container">
    最外層
    <p class="son">
        這是兒子層
        <p class="sonson">
    這是孫子層
</p>
    </p>
</dic>

View Code

前端css代碼爲：

.container>p{
    color: yellowgreen;
}

View Code

效果圖：

從效果分析得，container>p,而後孫子層會繼承兒子層的效果。

(3) 並集選擇器

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器。

例：

首先是html內容爲：

<h3>這是標題3的內容</h3>
<a href="https://www.cnblogs.com/hszstudypy">跳轉到個人博客</a>

View Code

而後是css內容爲：

h3,a{
    color: #008000;
    text-decoration: none;
}

View Code

效果爲：

從效果分析,經過逗號隔開的都會產生這個css內容的效果。

好比像百度首頁使用並集選擇器。

這樣的寫法一般出如今高訪問量的網站上：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }

(4) 交集選擇器

兩個標籤有相同的屬性，而後css對這個屬性進行修飾的效果將表如今這兩個標籤上，這也就是這個兩個之間的交集

例：

首先是html代碼：

<!--html代碼-->
<div>
    <h4>高級選擇器</h4>
    <p class="active">這是一個p</p>
    <h4 class="active">交集選擇器</h4>
</div>

View Code

而後是css代碼：

h4 {
    width: 100px;
    font-size: 14px;
    background: #00BFFF;
}
.active {
    color: red;
    text-decoration: underline;
}

View Code

效果圖：

在上面的代碼可知，第二個h4 class=」active」和p之間的交集就是active，全部都有交集的效果，而第一個h4是沒有和p有交集的，全部沒有紅色字體的效果。

3.屬性選擇器

屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。

(1)屬性名稱匹配

下面的例子是把包含標題（title）的全部元素變爲藍色：

例：

html上代碼：

<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="mycnblogs" href="https://www.cnblogs.com/hszstudypy/">個人博客園</a>

View Code

css上代碼:

[title]
{
color:blue;
}

View Code

效果圖：

(2)完整匹配（屬性和值選擇器）

下面的實例改變了標題title='mycnblogs'元素的邊框樣式:

在(1)的css內容上加了：

[title=mycnblogs]
{
    border:5px solid green;
}

View Code

效果圖爲：

(3) 開頭結尾匹配和包含匹配

開頭匹配爲：屬性^=值

結尾匹配爲：屬性$=值

包含匹配爲：屬性*=值

首先是html的值：

<div class="mdiv">
    我是div的內容
    <p class="myp">

        我是div裏的p內容
    </p>
    <p class="mype2">
        我是div裏的第二p內容
    </p>

</div>
<p class="otherp">
    我是另一個的內容
</p>

View Code

而後是css的值爲：

[class^=my]{
    color: #00BFFF;

}
[class$=p]{
    text-decoration: underline;
}

[class*=e]{
    background: yellow;
}

View Code

效果圖:

效果及代碼分析：首先是class以my開頭的字體淡藍色，而後是p結尾的加下劃線，最後是包含e的背景爲黃色。

(4)表單樣式

屬性選擇器樣式無需使用class或id的形式:

例：

首先是html代碼：

<form name="input" action="demo-form.php" method="get">
name:<input type="text" name="fname" value="" size="20">
pwd:<input type="text" name="lname" value="" size="20">
<input type="button" value="Example Button">
</form>

View Code

而後是css代碼：

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

View Code

結果爲：

Input裏面相應的type修飾相應的值。

4.僞類選擇器

僞類選擇器通常會用在超連接a標籤中，使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則" LoVe HAte。

"愛恨準則"

:link

:visited

:hover(***)鼠標懸浮時,觸發

:active

例：

前端html代碼爲：

<div class="box">
    <ul>
        <li class="item1"><a href="#">沒有被訪問</a></li>
        <li class="item2"><a href="">訪問事後</a></li>
        <li class="item3"><a href="">鼠標懸停</a></li>
        <li class="item4"><a href="">鼠標摁住</a></li>
    </ul>
</div>

View Code

前端css樣式代碼爲：

*沒有被訪問的a標籤的樣式*/
.box ul li.item1 a:link{
    color: #666;
}
/*訪問事後的a標籤的樣式*/
.box ul li.item2 a:visited{
    color: red;
}
/*鼠標懸停時a標籤的樣式*/
.box ul li.item3 a:hover{
    color: green;
}
/*鼠標摁住的時候a標籤的樣式*/
.box ul li.item4 a:active{
    color: yellowgreen;
}

View Code

效果須要本身運行才能夠清楚看到

5.僞元素選擇器

例：

html代碼:

<p>這是一個p標籤</p>

css代碼：

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }

/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'hello';
        }

/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'after';
            color: red;
            font-size: 40px;
        }