Study 5 —— CSS概述

時間 2019-11-07

標籤 study css 概述欄目 CSS 简体版

原文原文鏈接

CSS(Cascading Style Sheet)稱爲層疊樣式表，也能夠稱爲CSS樣式表或樣式表，其文件擴展名爲.css，
CSS是用於加強或控制網頁樣式，並容許將樣式信息與網頁內容分離的一種標記性語言。
引用樣式表的目的是將「網頁結構代碼」和「網頁樣式風格代碼」分離開，對網頁佈局進行更多的控制。

CSS基礎語法
CSS樣式表由若干條樣式規則組成，每條樣式規則由三部分構成：
選擇符(selector)、屬性(property)和屬性值(value),
基本格式以下：
selector{property: value;}

CSS樣式表控制HTML5頁面效果的方式一般包括行內樣式、內嵌樣式、連接樣式和導入樣式。
連接樣式：
<link rel="stylesheet" type="text/css" href="1.css" />
（1）rel表示連接到樣式表，值爲stylesheet
（2）type表示樣式表類型爲CSS樣式表
（3）href指定了CSS樣式表文件的路徑，此處表示當前路徑下名稱爲1.css文件。此路徑根據不一樣狀況使用絕對路徑和相對路徑兩種。
導入樣式：
導入外部樣式表是指在內嵌樣式表的<style>標記中，使用@import導入一個外部的CSS文件，如：
<head>
    <style type="text/css">
    @import "1.css"
    </style>
</head>

優先級：
CSS樣式表方式的優先級順序由大到小依次是：行內樣式、內嵌樣式、連接樣式、導入樣式。

CSS選擇器（選擇符selector）
根據CSS選擇器用途能夠把選擇器分爲標記選擇器、類選擇器、全局選擇器、ID選擇器和僞類選擇器等。
全局選擇器
若是想要一個頁面中全部HTML標記使用同一種樣式，能夠使用全局選擇器，語法格式：
*{property: value;}
僞類
a:link         /*未訪問的連接*/
a:visited      /*已訪問的連接*/
a:hover        /*鼠標移動到連接上*/
a:active       /*選定的連接*/

結構僞類選擇器

選擇器                   含義
E:root                  匹配文檔的根元素，對於HTML文檔，就是HTML元素
E:nth-child(n)          匹配其父元素的第n個子元素，第一個編號爲1
E:nth-last-child(n)     匹配其父元素的倒數第n個子元素，第一個編號爲1
E:nth-of-type(n)        與:nth-children()做用相似，可是僅匹配使用同種標籤的元素
E:nth-last-of-type(n)   與:nth-last-child()做用相似，可是僅匹配使用同種標籤的元素
E:last-child            匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type         匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
E:last-of-type          匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-type(1)
E:only-child            匹配父元素下僅有的一個子元素，等同於:first-child:last-child 或:nth-child(1):nth-last-child(1)
E:only-of-type          匹配父元素下使用同種標籤的惟一一個子元素，等同於:first-of-type:last-of-type 或:nth-of-type(1):nth-last-of-type(1)
E:empty                 匹配一個不包含任何子元素的元素，注意，文本節點也被看做子元素

實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>結構僞類</title>
    <style>
        tr:nth-child(even){
            background-color: #f5fafe;
        }
        tr:last-child{
            font-size: 25px;
        }
        li:nth-child(3){
            color: red;
        }
    </style>
</head>
<body>
<table border="1" width="15%">
    <th>姓名</th><th>編號</th><th>性別</th>
    <tr><td>劉海松</td><td>006</td><td>男</td></tr>
    <tr><td>王峯</td><td>001</td><td>女</td></tr>
    <tr><td>李章立</td><td>006</td><td>男</td></tr>
    <tr><td>劉海松</td><td>006</td><td>男</td></tr>
</table>
<ul>
    <li>蔬菜</li>
    <li>水果</li>
    <li>鮮花</li>
    <li>飲料</li>
</ul>
</body>
</html>

UI元素狀態僞類選擇器
網頁中，UI元素通常是指包含在form元素內的表單元素。
經常使用的狀態僞類選擇器
選擇器          說明

E:enabled      選擇匹配E的全部可用UI元素，匹配<input type="text">
E:disabled     選擇匹配E的全部不可用UI元素,匹配<input type="button" disabled="disabled">
E:checked      選擇匹配E的全部可用UI元素,匹配<input type="checkbox" checked="checked">

實例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        input:enabled{
            border: 1px dotted #666; background: #ff9900;
        }
        input:disabled{
            border: 1px dotted #999; background: #f2f2f2;
        }
    </style>
</head>
<body>
<div style="text-align: center">
    <h3>Login</h3>
    <form method="post" action="">
        <p>username: <input type="text" name="username"></p>
        <p>password: <input type="password" name="passwd" disabled="disabled"></p>
        <p>
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </p>
    </form>
</div>
</body>
</html>

1. Study 1 —— HTML5概述
2. Web—CSS概述
3. CSS的概述
4. CSS概述
5. Css概述
6. 4-css概述
7. 【BootStrap】概述 & CSS
8. 5、NFC概述
9. 5.dom概述
10. CSS Variable Study
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Java Agent入門實戰（二）-Instrumentation源碼概述
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

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