Web前端基礎 —— 【02】CSS和CSS3 ①

原創 人生、蜕变 2020-07-07 01:55

文章目錄

一、CSS介紹

在這裏插入圖片描述

二、字體樣式屬性

在這裏插入圖片描述

2.1 字號大小和字體

在這裏插入圖片描述
在這裏插入圖片描述
Notes：
    1.現在網頁中普遍使用的是14px。
    2.儘量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
    3.各種字體之間必須使用英文狀態下的逗號隔開。
    4.中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。
    5.如果字體名中包含了空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family:"Times New Roman"。
    6.儘量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

2.2 Unicode字體

在這裏插入圖片描述

			/* 宋體、微軟雅黑 */
            font-family: "\5B8B\4F53","\5FAE\8F6F\96C5\9ED1";

在這裏插入圖片描述

2.3 CSS註釋

/* 我是被註釋的內容，你看不見我 */

在這裏插入圖片描述

2.4 字體加粗

			/* 字體加粗 */
            font-weight: 400; /* normal */
            font-weight: 700; /* bold */

在這裏插入圖片描述

2.5 字體傾斜

			/* 字體傾斜 */
            font-style: italic;

在這裏插入圖片描述

2.6 字體綜合設定☆☆

p {
            /* 字體綜合設定 */
            font: font-style font-weight font-size/line-height font-family;
  }

在這裏插入圖片描述

三、基本選擇器

3.1 標籤選擇器（元素選擇器）

在這裏插入圖片描述

        p {
            color: pink;
            font: 14px "宋體";
        }

3.2 類選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xgg {
            color: pink;            
        }
    </style>
</head>
<body>
    <div class="xgg">小光光1</div>
    <div>小光光2</div>
    <div class="xgg">小光光3</div>
</body>
</html>

3.2.1 CSS命名規範

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color-orange {
            color: orange;
        }
    </style>
</head>
<body>
    <div class="color-orange">猥瑣發育，別浪</div>
    <div>全軍出擊</div>
    <div class="color- orange">哎呀，被玩壞了</div>
</body>
</html>

3.2.2 多類名選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .font20 {
            font-size: 20px;
        }
        .font14 {
            font-size: 14px;
        }
        .pink {
            color: pink;
        }
        .fontweight {
            font-weight: 700;
        }
    </style>
</head>
<body>
   <div class="font20 pink fontweight">亞瑟</div>
   <div class="font20">劉備</div> 
   <div class="font14 pink">安琪拉</div>
   <div class="font14">貂蟬</div>
</body>
</html>

在這裏插入圖片描述
在這裏插入圖片描述

3.3 ID選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tou {
            color: red;
        }
        #big {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="big">熊大</div>
    <div>熊二</div>
    <div class="tou">光頭強</div>
</body>
</html>

3.4 ID選擇器和類選擇器的區別

在這裏插入圖片描述

3.5 通配符選擇器

在這裏插入圖片描述

3.6 僞類選擇器

在這裏插入圖片描述

3.6.1 鏈接僞類選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未訪問的鏈接 */
        a:link {
            font-size: 16px;
            color: gray;
            font-weight: 700;
        }

        /* 已訪問的鏈接；我們已經點擊過一次的狀態 */
        a:visited {
            font-size: 16px;
            color: orange;
            font-weight: 700; 
        }

        /* 鼠標移動到鏈接上 */
        a:hover {
            font-size: 16px;
            color: red;
            font-weight: 700;
        }

        /* 選定的鏈接；當我們點擊別鬆開鼠標，顯示的狀態 */
        a:active {
            font-size: 16px;
            color: blue;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">秒殺</a>
        <a href="#">閃購</a>
    </div>
</body>
</html>

3.6.2 鏈接僞類選擇器的簡寫方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
        a:hover {  /* :hover是鏈接僞類選擇器，鼠標經過 */
            color:red;  /* 鼠標經過的時候，由原來的灰色變成了紅色 */
        }
    </style>
</head>
<body>
    <a href="#">秒殺</a>
</body>
</html>

3.6.3 結構僞類選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 選擇第一個元素 */
        li:first-child {
            color: pink;
        }  
        /* 選擇最後一個元素 */
        li:last-child {
            color: blue;
        }
        /* 選擇第四個元素 */
        li:nth-child(4) {
            color: skyblue;
        }

        /* 選擇偶數的元素 */
        li:nth-child(even) {
            color: red;
        }
        /* 選擇奇數的元素 */
        li:nth-child(odd) {
            color:yellow;
        }

        /* 選擇全部的元素  */
        li:nth-child(n) {
            
        }
        /* 選擇偶數的元素 */
        li:nth-child(2n) {
            
        }
        /* 選擇奇數的元素 */
        li:nth-child(2n+1) {

        }

        /* 從最後一個選擇開始數，選擇偶數的元素 */
        li:nth-last-child(even) {
            font-weight: 700;
            font-style: italic;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一個孩子</li>
        <li>第二個孩子</li>
        <li>第三個孩子</li>
        <li>第四個孩子</li>
        <li>第五個孩子</li>
        <li>第六個孩子</li>
        <li>第七個孩子</li>
    </ul>
</body>
</html>

3.6.4 目標僞類選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 目標僞類選擇器 */
        :target {
            color: red;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <a href="#movie">演藝經歷鏈接</a>
    <h3 id="movie">演藝經歷</h3>
</body>
</html>

四、CSS外觀樣式屬性

4.1 文本顏色

在這裏插入圖片描述

        /* 預定義的顏色值 */
        .red {
            color: red;
        }
        /* 十六進制 */        
        .color-0f0 {
            color: #0f0;  /* 十六進制，簡寫形式*/
            color: #ff02ed;
        }
        /* RGB代碼 */
        .rgb {
            color: rgb(255, 0, 0);                        
        }

4.2 行間距（行高）

在這裏插入圖片描述

        p {
            line-height: 25px; /* 行間距 */
        }

Notes：一般行間距比字號大7,8個像素左右就Ok了！

4.3 水平對齊方式

在這裏插入圖片描述

        h3 {
            text-align: center; /* 文字水平對齊 */
        }

4.4 首行縮進

在這裏插入圖片描述

        p {           
            text-indent: 2em; 
        }

4.5 字間距和單詞間距

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            letter-spacing: 2px; /* 字間距 */
        }
        p {
            word-spacing: 10px; /* 單詞間距 */
        }
    </style>
</head>
<body>
    <div>我是小光光</div>
    <p>my name is Nacy</p>
</body>
</html>

在這裏插入圖片描述

4.6 顏色半透明

在這裏插入圖片描述

        p {
            color: rgba(255, 0, 0, 0.2);
        }

4.7 文字陰影

在這裏插入圖片描述

        h1 {            
            text-shadow: 6px 10px 3px rgba(0,0,0,0.4);
        }

4.8 代碼快捷方式

在這裏插入圖片描述

五、CSS樣式表

5.1 內聯樣式表（行內式）

在這裏插入圖片描述

    <div style="color: #f00; font-size: 12px;">小光光優秀！</div>

5.2 內部樣式表（內嵌式）

在這裏插入圖片描述

5.3 外部樣式表（外鏈式）

在這裏插入圖片描述
test01.css：

.demo {
    color: #f00;
}

test01.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   
    <!-- 外部樣式表 -->
    <link rel="stylesheet" href="test01.css">    
</head>
<body>
    <div class="demo">外部樣式表</div>
    <div>外部樣式表</div>
    <div>外部樣式表</div>
</body>
</html>

5.4 三種樣式表總結

在這裏插入圖片描述

六、標籤的顯示模式

6.1 塊級元素顯示模式

在這裏插入圖片描述
在這裏插入圖片描述

6.2 行內元素顯示模式

在這裏插入圖片描述
在這裏插入圖片描述

6.3 塊級元素和行內元素區別

在這裏插入圖片描述

6.4 行內塊元素

在這裏插入圖片描述

6.5 標籤顯示模式轉換

在這裏插入圖片描述

七、CSS複合選擇器

在這裏插入圖片描述

7.1 交集選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集選擇器 */
        div.singer {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div class="singer">劉德華</div>
    <div class="singer">張學友</div>
    <p class="singer">韓紅</p>
    <p class="singer">汪峯</p>
</body>
</html>

7.2 並集選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 並集選擇器 */
        p,div,h1 {
            color: #f00;
        }                     
    </style>
</head>
<body>
    <p>香蕉</p>
    <p>橘子</p>
    <div>大白菜</div>
    <div>辣椒</div>
    <h1>米飯</h1>
    <h1>麪條</h1>
</body>
</html>

7.3 後代選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 後代選擇器 */        
        .nav ul li { 
            color: #f00; /* 要求 首頁、導航、聯繫 顏色爲紅色 */
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>首頁</li>
            <li>導航</li>
            <li>聯繫</li>
        </ul>
    </div>

    <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>搜狐</li>
    </ul>
</body>
</html>

7.4 子元素選擇器

在這裏插入圖片描述

7.5 屬性選擇器

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 屬性選擇器 */

        /* 存在title屬性即可 */
        a[title] { 
            color: red;
        }

        /* 屬性值等於text */
        input[type="text"] {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="#" title="我是百度">百度</a>
    <a href="#" title="我是新浪">新浪</a>
    <a href="#">搜狐</a> 
    <input type="text" value="文本框">
    <input type="text" value="文本框">
    <input type="submit">
    <input type="reset">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 屬性選擇器 */

        /* 屬性值裏包含font字符，並且在“開始”位置 */
        div[class^=font] {
            color: pink;
        }

        /* 屬性值裏包含footer字符，並且在“結束”位置 */
        div[class$=footer] {
            color: deeppink;
        }

        /* 屬性值裏包含tao字符，並且在“任意”位置 */
        div[class*=tao] {
            color: green;
        }
    </style>
</head>
<body>
    <div class="font12">屬性選擇器</div>
    <div class="font12">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="24font">屬性選擇器</div>
    <div class="sub-footer">屬性選擇器footer</div>
    <div class="jd-footer">屬性選擇器footer</div>
    <div class="news-tao-nav">屬性選擇器</div>
    <div class="tao-hh-header">屬性選擇器</div>
</body>
</html>

7.6 僞元素選擇器

在這裏插入圖片描述

        /* 僞元素選擇器 */

        /* 選擇第一個字 */
        p::first-letter {
            font-size: 50px;
            color: red;
        }
        /* 選擇第一行 */
        p::first-line {
            color: green;
        }
        /* 選中文字時，變化的樣式 */
        p::selection {
            color: pink;
        }

使用before和after在盒子div的內部前面插入或者是內部後面插入
在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 僞元素選擇器 */

        div::before {
            content: "我";
        }

        div::after {
            content: "很開心！";
        }
    </style>
</head>
<body>
    <div>今年</div>    
</body>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Web前端基礎 ——【01】HTML和HTML5 ①

文章目錄一、瀏覽器介紹1.1 認識網頁1.2 常見瀏覽器1.3 瀏覽器內核1.4 web標準二、HTML基本結構2.1 HTML初識2.2 HTML骨架格式三、HTML常用標籤☆☆☆3.1 快速生成html骨架（vscode爲例）

人生、蜕变 2020-07-07 01:55:40

Web前端基礎 —— 【01】HTML和HTML5 ②

文章目錄一、路徑1.1 相對路徑1.2 絕對路徑二、列表2.1 無序列表2.2 有序列表2.3 自定義列表三、表格3.1 表格屬性3.2 表頭標籤3.3 表格結構3.4 表格標題標籤3.5 合併單元格3.5.1 跨列合併3.5.2

人生、蜕变 2020-07-07 01:55:40

Javascript 數據類型和一些函數的複習3

1.car=‘hihha’：像這樣給尚未聲明的變量賦值，則這個變量將會成爲全局變量，在函數內部聲明的變量是局部變量，在函數執行完畢後，這個局部變量將會被銷燬。並且在函數的外部這個變量是不可以被訪問的。2.比較運算符==  等於 ：比較值是

轻云K 2020-06-22 04:17:29

常用的CSS的樣式設置

最好先寫最基礎的樣式定義，在一步步詳細寫其他的細節的定義1.清除所有的元素標記的內外邊距    body,ul,li,a,img,p,input{margin:0px;padding:0px;}    或者我覺得直接寫成:*{margin

轻云K 2020-06-22 04:17:29

CSS3基礎與進階

芒果-橙 2020-06-03 23:14:16

Web前端基礎 —— 【02】CSS和CSS3 ③

人生、蜕变 2020-05-24 05:38:05

Web前端基礎 —— 【02】CSS和CSS3 ②

人生、蜕变 2020-05-19 03:26:14

JavaScript複習1(介紹基本的知識)

轻云K 2020-02-25 02:22:11

CSS 定位複習

轻云K 2020-02-25 02:22:11

CSS3 瞭解

轻云K 2020-02-25 02:22:11

CSS的基本複習1

轻云K 2020-02-25 02:22:11

Javascript複習2之數據類型

轻云K 2020-02-25 02:22:11

JS中一些對象的學習和一些函數的相關知識

轻云K 2020-02-25 02:22:11

HTML基本元素瞭解

ninetyhe 2020-02-24 10:27:46

AJAX快速掌握

ninetyhe 2020-02-24 10:27:45