二，CSS入門

原創 好多可乐 2020-06-16 07:34

一，CSS介紹

1. 定義：
層疊樣式表（Cascading Style Sheets），決定了HTML元素以什麼樣的外觀展示。目前主流的是css3，常用組合是div+css。css一般定義在head裏
2. 三種引入方式：

  • 外觀樣式表：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!--rel: relationship，屬性用於定義連接的文件和zdHTML文檔之間的關係
    type: 是說明外鏈文檔的的類回型
    href: 導入css文件的路徑-->
    <link type="text/css" rel="stylesheet" href="custom.css">
</head>
<body>
<div> </div>
</body>
</html>

--------------------------
custom.css文件內容：

div {
    height: 1000px;
    background-color: pink;
}
  • 內部樣式表：
<style type="type/css">
           table {background-color: blueviolet;}
</style>
  • 內聯樣式：（不推薦）
<table style="background-color: red">
</table>

二，CSS語法

  1. 選擇器 {樣式屬性: 值; 樣式屬性: 值; }
  2. table { background: red; font-size: large;}

三，CSS選擇器

1. 類選擇器：

  • 定義：<table class=“class_name”>
  • 設置樣式：. class_name{}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
            div {
                height: 100px;
            }
          /*
            .：代表類名
            */
            .div1_class{
                background-color: #ff8888;
            }
            .div2_class{
                background-color:#44aa44;
            }
        </style>
</head>
<body>
<!--如果設置多個標籤，那麼多個標籤都是一個樣式-->
<div class="div1_class"> </div>
<div class="div2_class"> </div>
</body>

2. id選擇器

  • 定義：<table id=“selector_name”>
  • 設置樣式： # selector_name
    ######注意：
  • id不允許重複
  • 如果子類和父類有一樣的屬性，子類會覆蓋父類的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style type="text/css">
            div {
                height: 100px;
            }
            #div1{
                height: 200px;
                background-color: #44aa44;
            }
            #div2{
                background-color:red;
            }
        </style>
</head>
<body>
<!--如果設置多個標籤，那麼多個標籤都是一個樣式-->
<div id="div1"> </div>
<div id="div2"> </div>

</body>
</html>

3. 元素/標籤選擇器：

  • 含義：通過以標籤命名的樣式選擇器就是標籤選擇器
  • 定義：<table><table>
  • 設置樣式：table{ attribute: value; attribute: value; }
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style type="text/css">
            div {
                height: 100px;
                background-color: pink;
            }
        </style>
</head>
<body>
<!--如果設置多個標籤，那麼多個標籤都是一個樣式-->
<div> </div>
<div> </div>

</body>
</html>

4. 所有元素選擇器：
注意：

  1. 如果一個頁面上沒有設置任何的樣式，那麼所有元素選擇器裏設置的樣式會覆蓋整個界面。
  2. 如果頁面已經被設置了部分的樣式，那麼所有元素選擇器裏設置的樣式只能覆蓋其他未被設置的界面。
  • 定義：<div></div><table></table><span></span>
  • 設置樣式：*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
            /*<!-- 標記名代表一類標記-->*/
            div {
                height: 100px;
            }
            .div1_class{
                background-color: #ff8888;
            }
            .div2_class{
                background-color:#44aa44;
            }
            /*
            *：所有元素選擇器：
            */
            *{
                background-color: #ffff77;
            }
        </style>
</head>
<body>
<!--如果設置多個標籤，那麼多個標籤都是一個樣式-->
<div id="div1" class="div1_class"> </div>
<div id="div2" class="div2_class"> </div>

</body>
</html>

5. 與選擇器：

  • 定義：<table></table><span><span>
  • 設置樣式： table.span

6. 元素內選擇器：

  • 定義：<table><td></td></table>
  • 設置樣式： div span

7. 父元素選擇器：

  • 定義：<table><thead></thead></table>
  • 設置樣式： table > thead

8. 同級選擇器：

  • 定義：<table></table><span></span>
  • 設置樣式： table + span
9. 屬性選擇器：（一般重要）
  • 元素裏面所有包含xx屬性的，都要給它設一個值
  • 定義：<span id=“span1”></span>
  • 設置樣式： [id]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>屬性選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        #div2 {
            height: 100px;
        }

        [id] {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>
10. 屬性值選擇器：（一般重要）
  • 針對某個屬性值
  • 定義：<span id=“span1”></input>
  • 設置樣式：[id=span1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>屬性值選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 200px;
        }

        [class="div2_class"] {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
<div></div>
</body>
</html>
11. 屬性值模糊選擇器V1：
  • 基本被淘汰的用法。缺點：它在定義的時候一定要有空格才能匹配到。比如下面這個，我如果定義id=span1，是無法匹配到的。
  • 定義：<span id=“spa n1”></span><input id=input1></input>
  • 設置樣式： [id~=span1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> 屬性值模糊選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 200px;
        }

        [class~="div2"] {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2 _class"></div>

</body>
</html>
12. 屬性值頭索引選擇器V1：
  • 基本被淘汰的用法。缺點：它在定義的時候一定要有-才能匹配到。比如下面這個，我如果定義id=“span1”，是無法匹配到的，需要寫成“sp-an1”。
  • 定義：<span id=“sp-an1”></span><input id=input1></input>
  • 設置樣式：[id|=sp]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--設置div2的顏色爲黃色-->
<head>
    <title>屬性值頭索引選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 1000px;
        }

        [class|="div2"] {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2- _class"></div>
</body>
</html>
13. 屬性值頭索引選擇器V3-重點
  • 定義：<span id=“span1”></span><input id=input1></input>
  • 設置樣式：[id^=sp]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>屬性值頭索引選擇器V3</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 1000px;
        }

        [class^="div2"] {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>

</body>
</html>
14. 屬性值尾索引選擇器V3-重點：
  • 定義：<span id=“span1”></span><input id=input1></input>
  • 設置樣式：[id$=an1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>屬性值尾索引選擇器V3</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 1000px;
        }

        [class$="_1"] {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div_class_1"></div>
<div id="div2" class="div_class_2"></div>
</body>
</html>
15. 屬性值模糊選擇器V3-重點：
  • 定義：<span id=“span1”></span>
  • 設置樣式：[id*=an]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>屬性值模糊選擇器V3</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 200px;
        }

        [class*="2_"] {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>
16. 未訪問選擇器：
  • 定義：<a link=“www.baidu.com”>
  • 設置樣式：link
17. 訪問選擇器：
  • 定義：<a link=“www.baidu.com”>
  • 設置樣式：:visited
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>訪問選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:link {
            background-color: #ffff77;
        }

    </style>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">點擊</a>
</div>

</body>
</html>
18. 激活選擇器：
  • 定義：<a link=“www.baidu.com”>
  • 設置樣式：:active
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>激活選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:active {
            background-color: #ffff77;
        }

    </style>
</head>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">點擊</a>
</div>

</body>
</html>
19. 懸停選擇器：
  • 定義：<a link=“www.baidu.com”>
  • 設置樣式：:hover
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>懸停選擇器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:hover {
            background-color: #ffff77;
        }

    </style>
</head>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">點擊</a>
</div>

</body>
</html>

四，CSS尺寸樣式

1. width:

  • auto: 瀏覽器自動推斷
  • px：通過像素來設置元素的寬度
  • 百分百：根據百分比來設置元素的寬度
    2. height：
  • auto: 瀏覽器自動推斷
  • px：通過像素來設置元素的寬度
  • 百分百：根據百分比來設置元素的寬度
    ps：如果不設置寬度，自動會把父級的寬度直接繼承過來，就是瀏覽器的寬度。但是不設置高度就不行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS尺寸樣式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        html,body{
            height: 200px;
        }
        /*如果只寫div1的寬度，在界面是無法顯示的，CSS所有的百分數具有一定的相對性，相對於父元素而言，所以我們
        寫的時候要帶上它的父類html，body
       */
        #div1 {
            height: 50%;
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
</body>
</html>

五，CSS背景樣式

1. background-color：設置背景顏色
  • 顏色3種格式：
  1. #000000
  2. RGB:RGB(0,0,0)
  3. 英文名稱：black
  • 定義： table{background:black}
2. background-image：設置背景圖片
  • 如果是隻設置圖片，默認是水平和平行都會平鋪
  • 定義：background-image: url(“image/xxx”);
3. background-repeat：設置背景平鋪方向
  • no repeat（不平鋪）
  • repeat -x （橫向平鋪）
  • repeat -y （縱向平鋪）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS背景樣式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        html, body {
            height: 1000px;
        }
        /*寫法1：完整寫法*/
        #div1 {
            height: 50%;
            background-color: yellowgreen;
            background-image: url("image/timg.jfif");
            background-repeat: repeat-x;
        }
        /*寫法2：簡寫*/
        #div2 {
            height: 50%;
            background-color: yellowgreen;
            background: url("image/timg.jfif") repeat-x;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>
4. background-attachment ：背景圖像是否隨着頁面的其餘部分滾動（用的少）
  • fixed（窗口內容滾動圖片不滾動，所以圖片與其他內容相對滾動）
  • scroll（窗口內容滾動圖片也跟着滾動，所以圖片與其他內容相對靜止）
5. background-position：背景圖像的位置
  • 使用該屬性時一定要將background-attachment的屬性設置爲fixed
  • top left
  • x% y%
  • xpx ypx
6. background-size ：背景圖片的尺寸
  • auto：圖片原始的寬度和高度
  • px：通過像素來定義圖片的寬高（第一位是寬，第二位是高）
  • percent：根據所在元素的寬高來定義圖片大小
  • conver：將圖片填充整個元素，整個背景（如果大小不夠會被拉伸，直到充滿）
  • content：元素包含整個圖片（如果div大小小於圖片大小，圖片是自動縮小，以達到整張圖片完整顯示）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS背景樣式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        body {
            height: 1000px;
            background-image: url("image/timg.jfif");
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: right bottom;
        }

        /*寫法1：完整寫法*/
        #div1 {
            height: 300px;
            background-color: yellowgreen;
            background-size: 100% 100%;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>

七，CSS外邊距樣式

注意：

  1. 同級元素外間距之間的間隔（外邊框四面都是同樣間距）
  2. 如果不設置的話，外邊距默認是8px
  • margin：設置四面的外間距
  • margin-bottom：設置下邊的外間距
  • margin-left： 設置左邊的外間距
  • margin-right： 設置右邊的外間距
  • margin-top： 設置上邊的外間距
    設置長度：
  • auto：瀏覽器自動推斷
  • px：根據像素來設置
  • 百分比：根據百分比來設置

八，CSS內邊距樣式

  • padding：設置四面的內間距
  • padding-bottom：設置下邊的內間距
  • padding-left ：設置左邊的內間距
  • padding-right ：設置右邊的內間距
  • padding-top：設置上邊的內間距
    設置寬度高度：
  • auto：瀏覽器自動推斷
  • px：根據像素來設置
  • 百分比：根據百分比來設置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS內外邊距樣式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        /**{*/
        /*    background-color: #ffff77;*/
        /*}*/
        .div1_class {
            background-color: red;
            height: 100px;
            width: 20px;
            /*margin: 10px;*/
            /*margin-left: 100px;*/
            /*margin-bottom: 100px;*/
            /*margin-right: 100px;*/
            /* 也支持一起設置,或者設置其中幾個*/
            /*上 右 下 左*/
            margin: 100px 200px 300px 400px;
        }

        .input1 {
            padding: 100px 200px 300px 400px;
        }

    </style>
</head>

<body>
<div class="div1_class"></div>
<input class="input1" value="輸入框">
</body>

</html>

九，CSS定位樣式-重點

  1. position：
  • static：默認，不定位
  • absolute：絕對元素定位
  • relative：相對於定位
  • fixed：絕對元素定位，相對於瀏覽器
  1. top：
  2. right：
  3. bottom：
  4. left：
    設置長度：
  • auto：瀏覽器自動推斷
  • px：根據像素來設置
  • 百分比：根據百分比來設置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css定位樣式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">

        .parent {
            width: 100px;
            height: 100px;
            background-color: #ffff77;
        }

        .child {
            width: 50px;
            height: 50px;
            top: 50px;
            left: 50px;
            /*margin: 10px;*/
            position: fixed;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

十，CSS文本樣式

  1. color:
    顏色的三種格式：
  • 16進制： #000000
  • RGB：RGB(0,0,0)
  • 英文名稱：black
  1. text-align：
  • left：默認值，設置文本水平對齊方式居左
  • right：設置文本水平對齊方式居右
  • center：設置文本水平對齊方式居中
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

page-break-before和page-break-after 實現分頁打印

page-break-before和page-break-after CSS屬性並不會修改網頁在屏幕上的顯示，這兩個屬性是用來控制文件的打印方式。每

敲键盘的猫 2020-06-19 12:26:58

CSS基礎知識——backgroung（背景）

羁绊我心 2020-06-02 00:23:38

一，HTML簡介和基本結構

好多可乐 2020-05-25 11:25:09

二，CSS講解

好多可乐 2020-05-25 11:25:09

css選擇器

低调的盛大人 2020-03-18 05:54:38

CSS的position定位及區別

水笙沐 2020-02-28 09:39:58

CSS整理

icanlove 2020-02-22 07:41:24

CSS基礎

GoslingBoy 2020-02-21 19:16:30

CSS命名規範

莉莎的脑瓜疼呀脑瓜疼~ 2020-02-21 07:32:55

A4紙網頁打印

敲键盘的猫 2020-02-20 18:14:10

CSS佈局基礎心得

YuLi_Zoe 2020-02-20 16:49:30

css 知識梳理

文章目錄css 知識梳理css 基礎關於 line-heightborder文字折行僞元素和僞類區別佈局floatflex屬性Parent (Flex Container)Children (Flex Items)grid屬性Pa

平常心_c 2020-06-27 17:50:59

css基礎佈局細節（一）

一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直爲100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器爲500，右邊div爲400，瀏覽器爲900，右邊div爲800），請寫出大概的css代碼。 方式1 <s

seven-yang 2020-06-23 23:24:59

css樣式屬性繼承

CSS常用屬性繼承 1、字體系列屬性 font-family：字體系列 font-weight：字體的粗細 font-size：字體的大小 font-style：字體的風格 2、文本系列屬性 text-indent：

MrWeiGe 2020-06-22 23:49:03

移動端Flex 佈局新舊混合兼容

flex是個非常好用的屬性，如果說有什麼可以完全代替float和position，那麼肯定是非它莫屬了（雖然現在還有很多不支持flex的瀏覽器）。然而在移動開發中，本來絕大多數瀏覽器（包括安卓2.3以上的自帶瀏覽器）都支持的屬性，偏偏有

朱宝鑫 2020-06-20 23:09:20