CSS入門：基本語法、選擇器用法

時間 2019-11-21

標籤 css 入門基本語法選擇器用法欄目 CSS 简体版

原文原文鏈接

1. css的概念及其做用

css全稱爲（Cascading Style Sheets）翻譯過來就是層疊樣式表。
做用：主要做用就是設置網頁的文字（大小，顏色，字體，對齊等等）圖片和板式佈局等等，其實說的簡單點了就是給頁面化妝的。css

基本語法

選擇器 {
    屬性1: 值1;
    屬性2: 值2;   
    ...
}

CSS初體驗

修改字體的顏色和字體大小，經過標籤div選擇器設置。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>CSS入門初體驗</div>

</body>
</html>

構建css的運行環境是經過style標籤，該標籤能夠寫在任意位置，但一般寫在head標籤裏面。而在style標籤裏選中對應的元素，如div，div標籤後面跟一個空格，而後在大括號中以健值對的方式寫屬性和屬性值。佈局

2. 字體屬性

2.1 設置字體的大小

font-size 設置字體的大小
取值：font-size: 30px;
注意：在css大多數數值都須要添加單位，px是一個單位像素，表明屏幕的像素

經過標籤選擇器設置字體的大小字體

<head>
    <style>
        div {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>設置字體的大小</div>
</body>

2.2 設置字體的粗細

font-weight 設置字體的粗細
取值：normal（普通字體）、bold（加粗字體）、100-900

注意：用數字設置的時候，只有400和700會產生變化，是由於字體在初始設計的時候就沒有設置太多的粗細標準，通常就是兩種，默認的和加粗的，因此在實際工做中，用的最多的就是normal（400） bold（700）翻譯

經過標籤選擇器設置字體的粗細設計

<head>
    <style>
        div {
            font-weight: bold;
        }
    </style>
</head>

<body>
<div>設置字體的粗細</div>
</body>

2.3 設置字體的風格

font-style 設置字體的風格（樣式）
取值：normal 默認，顯示標準字體樣式
italic 字體斜體

經過標籤選擇器設置字體的風格（樣式）code

<head>
    <style>
        div {
            font-style: italic;
        }
    </style>
</head>

<body>
<div>設置字體的風格(樣式)</div>
</body>

2.4 設置不一樣類型的字體

font-family 設置不一樣類型的字體
取值：宋體、微軟雅黑、黑體等

注意：orm

不推薦使用一些冷門字體，由於一些冷門字體不少電腦裏面默認沒有安裝，這個時候就會顯示不出來。因此實際工做中，默認都是一些主流字體如宋體微軟雅黑等
字體能夠寫多組，中間用逗號隔開；如：font-family: '微軟雅黑', Arial;
字體名稱中若是有空格 # $ 這種特殊字符的時候須要添加上引號，中文字體也須要添加引號。瞭解：http://code.ciaoca.com/style/...

2.5 font簡寫

font: font-style  font-weight  font-size/line-height  font-family;

不建議修改順序，而且不須要設置的屬性能夠不寫，可是font-size和font-family必須指定，不然將不起做用

font簡寫設置字體htm

<head>
    <style>
        div {
            font: italic bold 20px/1 '宋體';
        }
    </style>
</head>

<body>
<div>font的簡寫</div>
</body>

3 選擇器

想要操做任何一個標籤，那麼首先須要作的事情就是選中對應的標籤，而這個就是選擇器的做用圖片

3.1 標籤選擇器

標籤名 {
     屬性1: 值1;
     屬性2: 值2;
     ...
}

特色：會將頁面上全部符合的標籤都選擇上，可是不能實現差別化選擇。

使用標籤選擇器，如示例中的div標籤，全部的div標籤都會應用上css樣式。

<head>
    <style>
        div {
            color: pink;
            font-size: 20px;
            font-weight: normal;
            font-style: italic;
        }
    </style>
</head>

<body>
<div>標籤選擇器</div>
<div>標籤選擇器</div>
</body>

3.2 類名選擇器

聲明類名選擇器: 聲明自定義類名 .自定義類名 {屬性1:值1;屬性2: 值2;}
調用類名選擇器: 給對應的元素添加class類名屬性 class="自定義的類名"

<head>
    <style>
        /* 聲明類名選擇器 */
        .box {
            font-size: 20px;
        }
    </style>
</head>

<body>
<!-- 調用類名選擇器 -->
<div class="box">類選擇器</div>
</body>

特色：能夠給相同標籤的元素定義不一樣的樣式，在實際工做中用的最多

<head>
    <style>
       /* 聲明兩個類名選擇器 */
        .box1 {
            font-size: 20px;
        }

        .box2 {
            color: red;
        }
    </style>
</head>

<body>
<!-- 兩個相同的標籤訂義不一樣的樣式 -->
<div class="box1">類選擇器</div>
<div class="box2">類選擇器</div>
</body>

3.3 多類名選擇器

需求：兩個相同的標籤，有一些共同的css樣式可是也有一些差別化的css樣式，怎麼實現呢？
如：字體的顏色相同，但字體的大小不同

<head>
    <style>
        .red {
            color: red;
        }

        .fz-20 {
            font-size: 20px;
        }

        .fz-25 {
            font-size: 25px;
        }

    </style>
</head>

<body>
<!-- 多個類名使用 空格 隔開 -->
<div class="red fz-20">類選擇器</div>
<div class="red fz-25">類選擇器</div>
</body>

一個元素能夠擁有多個類名，類名和類名之間用空格隔開，多類名選擇器可讓咱們解決更復雜的一些需求。

3.4 id選擇器

id選擇器的使用方式和類選擇器基本一致：

聲明id方式： #自定義id名字 {屬性1:值1;屬性2:值2;}
調用id方式：給對應的元素添加屬性 id="自定義id"

<head>
    <style>
       /* 聲明id選擇器，語法： #自定義id名字 */
        #box {
            color: red;
        }

    </style>
</head>

<body>
<!-- 調用id選擇器：經過屬性id設置-->
<div id="box">id選擇器</div>
</body>

特色：id選擇器通常配合後期的js使用較多，效果和類選擇器同樣，只不過是類選擇器能夠被多個元素調用，可是id選擇器只能被一個元素調用在同一個頁面中，不能出現兩個id值相同的元素

3.5 通配符選擇器

* {
    屬性1: 值1;
    屬性2：值2;
}

特色：選中任何元素，後期用於頁面初始化。

3.6 僞類選擇器

僞類選擇器能夠理解爲選擇的元素的一種狀態，並非如以前直接選中元素就完事了。
如：a標籤的僞類選擇器

a:link   沒有被訪問的時候的狀態
a:visited  訪問以後的狀態    
a:hover        鼠標移動上去以後的狀態
a:active    鼠標按下的狀態

僞類選擇器在實際工做中，不會寫這麼多，意義不大，推薦簡寫的方式完成

a {}
a:hover {} 鼠標移動上去以後的狀態

4 文字的對齊、縮進、下劃線

4.1 水平對齊

經過text-align屬性設置，如：text-align:值;
取值：left 左對齊方式
right 右對齊方式
center 居中對齊方式

注意：該屬性控制的是標籤「內部的文字」水平居中

<head>
    <style>
        .box {
            text-align: right;
        }
    </style>
</head>

<body>
<div class="box">文字水平對齊</div>
</body>

4.2 首行縮進

經過text-indent屬性設置，如：text-indent:值;
取值能夠是像素，也能夠是em 推薦寫法：text-indent:2em;

<head>
    <style>
        .box {
            width: 100px; /* 設置寬度爲100px，爲了演示效果 */
            text-indent: 2em;
        }

    </style>
</head>

<body>
<div class="box">首行縮進, 首行縮進, 首行縮進</div>
</body>

4.3 字體下劃線和刪除線

經過text-decoration屬性設置，如：text-decoration:值;
取值：underline 下劃線

line-through 刪除線，貫穿線
none 去掉多餘的樣式

<head>
    <style>
        .box {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="box">字體的下劃線</div>
</body>

5 行高

行高控制的是文字與文字之間的上下距離（行距）

line-height:值;

值的取值是像素，也能夠是倍數，如：line-height:1.5;
若是將標籤的高度和行高設置成同樣，那麼這個標籤裏面的文字能夠在這個標籤裏面垂直居中
與text-align: center;結合使用可讓單行文字在標籤內部水平垂直居中

<head>
    <style>
        div {
            width: 250px;
            height: 250px;
            background-color: pink;
            line-height: 250px;
            text-align: center;
            /* 讓單行文字在盒子裏水平垂直居中，
              text-align: center;
              line-height值設置爲標籤高度便可
           */
        }
    </style>
</head>

<body>
<div>行高，設置水平垂直居中</div>
</body>