碼上歡樂
相關內容    簡體    繁體

CSS基礎語法（一）

本文轉載自   查看原文   2021-12-09 16:35   97    web前端/ 基礎

目錄

CSS基礎語法（一）

一、CSS簡介

CSS是層疊樣式表的簡稱，其是一門標記語言

CSS主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖形處理（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式

1、CSS語法規范

使用HTML時，需要遵從一定的規范，CSS也是如此。想要熟練地使用CSS對網頁進行修飾，首先要了解CSS樣式規則

選擇器 {屬性:值}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 選擇器{樣式} */
        p {
            color:red;
            /* 修改文字的大小為12像素 */
            font-size:12px;
        }
    </style>
</head>
<body>
    <p>有點意思</p>
</body>
</html>

選擇器是用於指定CSS樣式的HTML標簽，花括號內是對該對象設置的具體樣式

屬性和值之間以”鍵值對“的形式出現

屬性時對指定的對象設置的樣式屬性，例如字體大小（font-size）字體顏色（color）

屬性和屬性之間用英文“;”分開

CSS一般寫在<head>標簽里面

2、CSS代碼風格

樣式格式書寫

  1. 緊湊格式

    h3 {color: deeppink;font-size: 20px;}

  2. 展開格式

    h3 {
color: pink:
font-size: 20px;
}

    強烈推薦第二種，更加直觀

樣式大小寫

  • 推薦用小寫

空格規范

  1. 屬性值前面，冒號后面，保留一個空格
  2. 選擇器（標簽）和大括號中間保留空格

二、CSS基礎選擇器

選擇器（選擇符）就是根據不同需求把不同標簽選出來。有基礎選擇器和復合選擇器

基礎選擇器

由單個選擇器組成

基礎選擇器包括：標簽選擇器、類選擇器、id選擇器和通配符選擇器

1、標簽選擇器

指用HTML標簽名稱作為選擇器，按標簽分類，為頁面中某一類標簽指定統一的CSS樣式

h3 {
color: pink:
font-size: 20px;
}

​ 優點：能快速為頁面中同類型的標簽統一設置樣式

​ 缺點：不能差異化樣式，只能選擇全部的當前標簽

2、類選擇器

如果想要差異化選擇不同的標簽，單獨選擇一個或某幾個標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 類選擇器，在要修飾的標簽那添加class屬性 */
        /* 類選擇器口訣：樣式點定義，結構類調用，一個或多個，開發最常用 */
        .red {
            color:red;
            font-size:12px;
        }
    </style>
</head>
<body>
    <p class="red">有點意思</p>  <!--結構需要用class屬性來調用-->
    <p>hello</p>
</body>
</html>
  1. 類選擇器的使用“.”（英文點號）進行標識，后面緊跟類名（自定義，自己命名）
  2. 可以理解為給這個標簽起名字，來表示
  3. 長名稱或詞組可以使用橫線來為選擇器命名
  4. 不要使用純數字、中文等命名，盡量使用英文字母來表示

​ 多類名

​ 使用場景

  • 可以把一些標簽元素相同的樣式（共同的部分）放到一個類里面
  • 這些標簽都可以調用這個公共的類，然后再調用自己獨有的類
  • 從而節省CSS代碼，統一修改也非常方便
  • 多類名選擇器在后期布局比較復雜的情況下，較多使用

​ 使用方式：<div class="類型一 類型二"></div>

  1. 在標簽class屬性中寫多個類名
  2. 多個類名必須用空格分開
  3. 這個標簽就可以分別具有這些類名的樣式

3、id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id選擇器，#開頭，使用方法和HTML中的錨點鏈接類似 */
        /* id選擇器的口訣：樣式#定義，結構用id調用，只能調用一次 */
        #red {
            color:red;
            font-size:12px;
        }
    </style>
</head>
<body>
    <p id="red">有點意思</p>
    <p>hello</p>
</body>
</html>

id選擇器和類選擇器的區別

  1. 類選擇器可以被多次使用
  2. id選擇器只能使用一次，不得重復
  3. id選擇器和類選擇器最大的區別在於使用次數
  4. 類選擇器在修改樣式中用的最多，id選擇器一般用於唯一性元素上，經常和JavaScript搭配使用

4、通配符選擇器

在CSS中，通配符選擇器使用"*"定義，它表示選取頁面中所有標簽

* {
屬性1:值1;
···;
}

  1. 通配符選擇器不需要調用，自動就給所有的元素使用樣式

  2. 特殊情況下使用，以下是清除所有的元素標簽的內外邊距

    * {
margin: 0;
padding: 0;
}

5、總結

基礎選擇器 作用 特點 使用情況 用法
標簽選擇器 可以選出所有相同的標簽 不能差異化選擇 較多 p {color: red;}
類選擇器 可以選出一個或多個標簽 可以根據需求選擇 非常多 .nav {color: red;}
id選擇器 一次只能選擇一個標簽 ID屬性只能在每個HTML文檔中出現一次 一般和js搭配 #nav {color: red;}
通配符選擇器 選擇所有標簽 選擇的太多，有部分不需要 特殊情況使用 * {color: red;}

三、CSS字體屬性

CSS Fonts（字體）屬性用於定義字體系列、大小、粗細和文字樣式（如斜體）

字體系列

CSS使用font-family屬性定義文本的字體系列

p {      /* p標簽內的內容字體為微軟雅黑 */
    font-family:"微軟雅黑";
}

各種字體之間必須使用英文狀態下的逗號隔開

一般情況下，如果有空格隔開的多個單詞組成的字體，加引號

盡量使用系統默認自帶字體，保證在任何用戶的瀏覽器中都能正確顯示

最常見的幾個字體："Microsoft YaHei", tahoma, arial, "Hiragino Sans GB"

字體大小

CSS使用font-size屬性定義字體大小

body {
    font-size: 20px;
}
/* 標題標簽比較特殊，需要單獨指定文字大小 */
h2 {
    font-size: 20px;
}

px（像素）大小是我們網頁常見的單位

Chrome默認的文字大小為16px

不同瀏覽器可能默認顯示的字號大小不一致，我們盡量明確大小，不要默認大小

可以給body指定整個頁面文字的大小

字體粗細

CSS使用font-weight屬性設置文本字體的粗細

body {
    font-weight: normal
}
/* nomal（默認，正常字體，400）、bold（粗體,700）、bolder（特粗體）、lighter（細體）、自定義大小（直接寫數字） */

文字樣式

CSS使用font-style屬性設置文本的風格

p {
    font-style: normal
}
/* normal（默認，標准字體樣式）、italic（斜體） */

復合屬性

簡寫方式，節約代碼

font: font-style font-weight font-size/line-height font-famliy（按照順序來哦）

p {
    font:italic 700 16px "Microsoft YaHei";
}

使用font屬性時，必須按照上面的語法格式中的順序寫，不能更換順序，並且各個屬性間以空格空開

不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用

總結

屬性 表示 注意點
font-size 字號 我們通常的單位是px像素，一定要跟上單位
font-family 字體 實際工作按照團隊約定來寫字體
font-weight 字體粗細 加粗是700或者bold、不加粗是400或者normal，數字不要跟單位
font-style 字體樣式 斜體是italic、不傾斜是normal工作中我們常用normal
font 字體連寫 1.字體連寫是有順序的，不能隨便換位置2.其中字號和字體必須同時出現

四、文本屬性

CSS Text（文本）屬性可以定義文本的外觀，比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等。

1、文本顏色

color屬性表示顏色

p {
    color: red
}
表示方法 屬性值
預定義的顏色值 red, green, blue, pink等
十六進制 #FF0000, #FF6600
RGB代碼 rgb(255, 0, 0)或(100%, 0%, 0%)

2、對齊文本

text-align屬性用於設置元素內文本內容的水平對齊方式

div {
    text-align: center;  /* 居中對齊 */
}

3、裝飾文本

text-decoration屬性規定添加到文本的裝飾。可以給文本添加下划線（underline）、刪除線（line-through）、上划線（overline）等，默認的是沒有裝飾線（none）

div {
    text-decoration: underline;
}

4、文本縮進

text-indent屬性用來指定文本的第一行的縮進，通常是將段落的首行縮進

p {
    text-indent: 20px;  /* 縮進20像素，如果是2em，則是縮進2個元素 */
}

em是一個相對單位，就是當前元素（font-size）1個文字的大小，如果單前元素沒有設置大小，則會安照父元素的一個文字大小

5、行間距

line-height屬性用於設置行間的距離（行高）。可以控制文字行與行之間的距離

p {
    line-height: 16px;
}

總結

屬性 表示 注意點
color 文本顏色 我們通常使用十六進制表示顏色
text-align 文本對齊 可以設定文字水平的方式
text-indent 文本縮進 通常我們用於段落首行縮進兩個字符text-indent: 2em;
line-height 行高 控制行與行之間的距離

五、CSS的引入方式

1、內部樣式表

內部樣式表（內嵌樣式表）是寫到html頁面的內部，是將所有的CSS代碼抽取出來，單獨放到一個<style>標簽中

<style>
    p {
        color: red;
        font-size: 20px
    }
</style>

<style>標簽理論上可以放到HTML文檔的任何位置，但一般放在文檔的<head>標簽中

通過這種方式，可以方便控制當前整個頁面中的元素樣式設置

代碼結構清晰，但是並沒有實現結構與樣式的完全分離

2、行內樣式表

行內樣式表（內嵌樣式表）是在元素標簽內部的style屬性中設定CSS樣式。適合修改簡單樣式

<div style="color: red; font-size: 20px">hello world</div>

style其實就是標簽的屬性

在雙引號中間，寫法符合CSS規范

可以控制當前頁面的標簽設置樣式

由於書寫繁瑣，並且沒有體現出結構與樣式的分離的思想，所以不推薦使用，只有對當前元素添加簡單樣式的時候，可以考慮使用

3、外部樣式表

實際開發都是外部樣式表，適合於樣式比較多的情況。核心是：樣式單獨寫到CSS文件中，之后把CSS文件引入到HTML頁面中使用

引入外部樣式表步驟：

  • 新建一個后綴名為.css的樣式文件，把所有CSS代碼都放入此文件中

  • <link rel="stylesheet" href="filename.css">

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <p id="red">有點意思</p>
    <p>hello</p>
</body>
</html>

總結

樣式表 優點 缺點 使用情況 控制范圍
行內樣式表 書寫方便，權重高 結構樣式混寫 較少 控制一個標簽
內部樣式表 部分結構和樣式相分離 沒有徹底分離 較多 控制一個頁面
外部樣式表 完全實現和樣式分離 需要引入 最多 控制多個頁面

六、Chrome調試工具

Chrome瀏覽器提供了一個非常好用的調試工具，可以用來調試我們的HTML結構和CSS樣式

使用調試工具

  1. Ctrl + 滾輪：可以放大開發者工具的代碼大小
  2. 左邊是HTML元素結構。右邊是CSS樣式
  3. 右邊CSS樣式可以改變數值（左右箭頭或者直接輸入）和查看顏色
  4. Ctrl + 0：復原瀏覽器大小
  5. 如果點擊元素，發現右側沒有樣式引入，極有可能是類名或者樣式引入錯誤
  6. 如果有樣式，但是樣式前面有黃色嘆號提示，則是樣式屬性書寫錯誤

七、Emmet語法

Emmet語法的前身是Zen coding，它使用縮寫來提高html/css的編寫速度，Vscode內部已集成該語法

1、快速生成HTML結構語法

  • 生成標簽，直接輸入標簽名按tab鍵即可。比如：div 然后tab鍵，就可以生成<div></div>

  • 如果想要生成多個相同標簽，加上*就可以了。比如：div*3 就可以生成3個div

    <!-- div*3 -->
<div></div>
<div></div>
<div></div>

  • 如果有父子級關系的標簽，可以用>。比如：ul>li 即可

    <!-- ul>li -->
<ul>
    <li></li>
</ul>

  • 如果有兄弟關系的標簽，用 + 就可以了。比如：div+p

     <!-- div+p -->
 <div></div>
 <p></p>

  • 如果生成帶有類名或者id名字的，直接編寫.demo 或者 #two tab鍵就可以了

    <!-- .demo -->
<div class="demo"></div>
<!-- #demo -->
<div id="demo"></div>

  • 如果生成的div類名是有順序的，可以用自增符號 $ 。比如：.demo$*5

     <!-- .demo$*5 -->
 <div class="demo1"></div>
 <div class="demo2"></div>
 <div class="demo3"></div>
 <div class="demo4"></div>
 <div class="demo5"></div>

  • 如果想要在生成的標簽內部寫內容可以用{}表示。比如：div{hello}——》<div>hello</div>

    <!-- div{hello$}*5 -->
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<div>hello4</div>
<div>hello5</div>

2、快速生成CSS樣式語法

CSS基本采取簡寫形式即可

  • 比如：w200 按tab 可以生成 width: 200px;
  • 比如：lh26 按tab 可以生成 line-height: 26px;

3.、快速格式化代碼

Vscode 快速格式化代碼：Shift + alt + F


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS基礎語法 CSS（1）基礎語法、常見屬性 前端基礎--css基本語法,選擇器 HTML&CSS基礎-xHtml語法規范 CSS基本語法（二） 基礎語法 【Css】SCSS基本語法 CSS 的語法格式 CSS - 語法規則 CSS(1)---css語法、css選擇器
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM