前端開發【第2篇：CSS】

時間 2019-12-04

標籤前端開發第2篇：CSS 欄目 CSS 简体版

原文原文鏈接

雞血

樣式的屬性多達幾千個，但別擔憂，按照80-20原則，經常使用的也就幾十個，你徹底能夠掌握它。css

Css初識

HTML的誕生html

早期只有HTML的時候爲了讓HTML更美觀一點，當時頁面的開發者會把顏色寫到標籤裏面，想一想一下一堆標籤一堆屬性：顏色、字體等，總結一個字就是「亂」前端

爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 以外創造出樣式（Style）。數組

全部的主流瀏覽器均支持層疊樣式表。瀏覽器

CSS語法和CSS優先級ide

一、CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。字體

二、3種css樣式url

內聯樣式spa

當你鍵入<h2 style="color: red">CatPhotoApp</h2>，你就給h2元素添加了inline style(內聯樣式)。ssr

層疊樣式

內聯樣式是爲元素添加樣式的最簡單有效的方式，可是更易於維護的方式是使用層疊樣式表CSS（Cascading Style Sheets）

<!-- 在代碼的最頂端，建立一個以下的style元素：
在這個style元素內, 你能夠爲全部的h2元素建立一個元素選擇器。好比，若是你想要將全部的h2元素設置爲紅色,
你的代碼應該看起來像這樣：
 -->
<style>
  <!-- 選擇器 {屬性名稱: 屬性值;} -->
  h2 {color: red;}
</style>

外部樣式

單獨把css寫入到一個文件中稱爲外部樣式

    <!-- 引入CSS樣式文件 -->
    <!--<link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>-->

三、優先級

內聯樣式 > 層疊樣式 > 外部樣式

選擇器

選擇器能夠層層嵌套,這句話不懂不要緊繼續看

元素選擇器[標籤選擇器]

最多見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。

若是設置 HTML 的樣式，選擇器一般將是某個 HTML 元素，好比 p、h一、em、a，甚至能夠是 html 自己：

它會根據頁面自動應用到標籤中不須要調用

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

類選擇器[Css樣式類選擇器]

類選擇器能夠理解爲把多個樣式封裝到一個變量中，當咱們使用這個變量的時候其實就是調用這一組樣式

它能夠放到外部樣式文件中也能夠在頭部樣式中定義

<!-- 定義類選擇器樣式 -->
    <style type="text/css">
        .main-container  {
            background-color: aqua;
        }
    </style>

<!-- 應用類選擇器樣式 -->
    <div class="main-container">
        Test information
    </div>

id選擇器

和類選擇器相似，類選擇器在使用的時候咱們使用的class屬性來應用類選擇器，使用id選擇器的時候咱們應用使用id屬性

        /* id 選擇器 */
        #footer {
            background-color: aqua;
        }

        <!-- id選擇器應用 -->
        <div id="footer">
            Test information
        </div>

上面的不論是類選擇器和id選擇器仍是元素選擇器能夠進行嵌套

    <style type="text/css">
        #footer div .main-container div {
            background-color: aqua;
        }
    </style>

    <!-- 使用-->
    <div id="footer">
        <div class="main-container">
            Test information
            <div>
                Test information
            </div>
        </div>
    </div>

子元素選擇器

h1 > strong {color:red;}

<!-- 使用 -->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

屬性選擇器

/* 下面的例子爲帶有 title 屬性的全部元素設置樣式： */
[title] { color:red; }


/* 下面的例子爲 title="shuaige" 的全部元素設置樣式：*/

<img title="shuaige" src="/i/w3school_logo_white.gif" />


/* 下面的例子爲包含指定值的 title 屬性的全部元素設置樣式。適用於由空格分隔的屬性值： */
[title~=hello] { color:red; }

<h2 title="hello world">Hello world</h2>
<h2 title="hello shuaige">Hello world</h2>


/* 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。在css中分隔符是使用  "-"  例如en-shuaige, en-name*/
[lang|=en] {background:yellow;}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>

/* 匹配屬性值以指定值開頭的每一個元素。 */
div[class^="test"]
<div class="test-shuaige">第三個 div 元素。</div>

/* 匹配屬性值以指定值結尾的每一個元素。 */
div[class$="test"]
<div class="test">第三個 div 元素。</div>

/* 匹配屬性值中包含指定值的每一個元素只要包含就能夠。*/
div[class*="test"]
<div class="first_test">第一個 div 元素。</div>

僞類選擇器

a:link {color: #FF0000}        /* 未訪問的連接 */
a:visited {color: #00FF00}    /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}    /* 選定的連接 */

CSS樣式

背景

background-color 不能繼承，其默認值是 transparent。transparent 有「透明」之意。也就是說，若是一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

一、普通顏色背景和img背景

/* 普通背景 */
p {background-color: gray;}
/* 圖片背景 */
body {background-image: url(/i/eg_bg_04.gif);}

二、背景重複

好比咱們定義的div元素是100px,背景圖片是10px，默認狀況下圖片就會平鋪開來佈滿整個100px大小,若是咱們不想讓他重複可使用repeat屬性

屬性值 repeat 致使圖像在水平垂直方向上都平鋪，就像以往背景圖像的一般作法同樣。repeat-x 和 repeat-y 分別致使圖像只在水平或垂直方向上重複，no-repeat 則不容許圖像在任何方向上平鋪。

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

三、背景圖片定位

能夠利用 background-position 屬性改變圖像在背景中的位置。

<html>
<head>

<style type="text/css">
body { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat: no-repeat;
    background-position:center;
}
</style>

</head>

<body>
</body>
</html>

定位方式

有關鍵字：(center、top、bottom、right、left)中心、上、下、左、右，兩兩來組合進行定位

<style type="text/css">
body { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
</style>

百分比方式

有時候上面關鍵字知足不了咱們就能夠採用百分比的方式

<style type="text/css">
body { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat:no-repeat;
    background-position:20% 100%;
}
</style>

這個百分比也是由兩個百分數組合的第一個百分數表明「裏左邊多遠」，第二個百分數表明「裏上面多遠」哈哈好理解吧

四、背景關聯

若是文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您能夠經過 background-attachment 屬性防止這種滾動。經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed），所以不會受到滾動的影響：

<html>
<head>
<style type="text/css">
body 
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>

<body>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
<p>圖像不會隨頁面的其他部分滾動。</p>
</body>

</html>

文字

CSS 文本屬性可定義文本的外觀。

經過文本屬性，您能夠改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等

字體

CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）

列表

列表屬性簡寫：

ul { list-style:square inside url('/i/arrow.gif'); }  /* 第一個值是類型 第二個值是位置 第三個值是圖片url*/

一、列表類型- list-style-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端開發-CSS-1</title>
    <style type="text/css">

        ul.circle {list-style-type:circle}  /* 圓形 */
        ul.square {list-style-type:square}  /* 方塊*/
        ol.upper-roman {list-style-type:upper-roman}  /* 羅馬符號 I II */
        ol.lower-alpha {list-style-type:lower-alpha}  /* 希臘符號 --! a b c d */
    </style>
</head>
<body>
    <div>
        <p>圓形:</p>
        <ul class="circle">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ul>

        <p>方形:</p>
        <ul class="square">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ul>

        <p>羅馬符號:</p>
        <ol class="upper-roman">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ol>

        <p>希臘符號:</p>
        <ol class="lower-alpha">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ol>
    </div>

</body>
</html>

二、列表圖像 list-style-image

<html>
<head>
    <style type="text/css">
        ul { list-style-image: url('/i/eg_arrow.gif')}
    </style>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>可口可樂</li>
    </ul>
</body>

</html>

三、圖標位置 list-style-position

<html>
<head>
    <style type="text/css">
        ul.inside { list-style-position: inside }

        ul.outside { list-style-position: outside }
    </style>
</head>

<body>
    <p>該列表的 list-style-position 的值是 "inside"：</p>
    <ul class="inside">
        <li>Earl Grey Tea - 一種黑顏色的茶</li>
        <li>Jasmine Tea - 一種神奇的「全功能」茶</li>
        <li>Honeybush Tea - 一種使人愉快的果味茶</li>
    </ul>

    <p>該列表的 list-style-position 的值是 "outside"：</p>
    <ul class="outside">
        <li>Earl Grey Tea - 一種黑顏色的茶</li>
        <li>Jasmine Tea - 一種神奇的「全功能」茶</li>
        <li>Honeybush Tea - 一種使人愉快的果味茶</li>
    </ul>
</body>
</html>

盒子模型

你可能早已經注意到了這點，全部的 HTML 元素本質上是小的矩形塊，表明着某一小塊區域。

拿小米官網來講首屏被分文了這麼多個盒子，固然就和咱們平時使用的盒子同樣，裏面也能夠包含一個一個的小盒子

從上圖能夠看到標準 w3c 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。

content：也就是實際的內容的[文字、圖片](實際指的是內容的高度和寬度)

border：是邊框，也就是包裹盒子的邊，或邊緣（邊框包裹內容和內邊距，它能夠有寬度他也有4個方向）

padding：是內容到邊框的距離，能夠有上、下、左、右（內容距離盒子內邊緣的舉例它有4個方向）

margin：外邊框能夠理解爲，邊框的擴展還須要佔用多大的空間，也是上、下、左、右（不一樣的盒子邊框外邊緣距離另外一個盒子邊框外邊緣的距離）

模型兼容性問題

一、margin值：若是兩個盒子是上下排布，上面的盒子給margin-bottom值，下面盒子給margin-top值那麼盒子之間的實際值不是它們相加的和而是取最大值，這裏有個特殊的當它們float起來後其值爲和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            border: 10px solid red;
            margin-bottom: 30px
        }
        .box2 {
            border: 10px solid blue;
            margin-top: 10px
        }
    </style>
</head>
<body>
    <div style="position: fixed; top: 50%; left: 50%;  width: 200px; background-color: chartreuse">
        <div class="box1"> Box1 </div>
        <div class="box2"> Box2 </div>
    </div>
</body>
</html>

解決方法：只寫一個便可、或者讓盒子浮動起來

二、margin值：盒子之間爲父子關係的時候，若是父級盒子沒有margin-top和padding值，那麼子級盒子的margin-top會被父級繼承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {  width: 100px;  height: 100px;  background-color:red;  }
        .box2 {  width: 100px;  height: 100px;  background-color:orange;}
        p {width: 50px; height: 50px; margin-top: 20px; background-color: black}

    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2">
        <p></p>
    </div>

</body>
</html>

問題緣由：

看補充的overflow這也是一個溢出處理，overflow的本質是溢出隱藏而在這裏是將溢出的收回來~

問題解決方法：

給父級盒子添加：overflow:hidden溢出隱藏

.box2 {  width: 100px;  height: 100px;  background-color:orange; overflow: hidden}

三、盒子屬性的寫法

    <!--
    大小：
    width
    height
    ----------------------------------------
    內邊框[padding]:
    padding: 10px 20px 30px 40px;   上下左右
    padding: 10px;  4個方向
    padding: 10px 20px 30px;  上 左右 下
    padding: 10px 20px;  上下 左右
    ----------------------------------------
    外邊框[margin]：和padding同樣
    margin: 10px 20px 30px 40px;   上下左右
    margin: 10px;  4個方向
    margin: 10px 20px 30px;  上 左右 下
    margin: 10px 20px;  上下 左右
    ----------------------------------------
    邊[border]:
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: red;
    簡寫: border-top: 20px solid red;  寬 樣式  顏色
    一樣：他有4個方向  上下左右 均可以按照上面的方式配置
    若是4個邊框都相同:
    border: 20px solid red;  同理

    -->

CSS定位

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

除非專門指定，不然全部框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

相對定位

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。

絕對定位

absolute這個屬性老是有人給出誤導。說當position屬性設爲absolute後，老是按照瀏覽器窗口來進行定位的，這實際上是錯誤的。實際上，這是fixed屬性的特色。

當sub1的position設置爲absolute後，其到底以誰爲對象進行偏移呢？這裏分爲兩種狀況：

當sub1的父對象(或曾祖父，只要是父級對象)parent也設置了position屬性，且position的屬性值爲absolute或者relative時，也就是說，不是默認值的狀況，此時sub1按照這個parent（在父對象內）來進行定位。
若是sub1不存在一個有着position屬性的父對象，那麼那就會以body爲定位對象，按照瀏覽器的窗口進行定位，這個比較容易理解

    <div style="position:relative;background-color: blue;height:100px;">
        <!--當sub1的父對象(或曾祖父，只要是父級對象)parent也設置了position屬性-->
        <div style="position:absolute;right: 0px;bottom:0px;background-color: blueviolet">su1</div>
    </div>

    <div style="background-color: blue;height:100px;">
    <!--當sub1的父對象(或曾祖父，只要是父級對象)parent也設置了position屬性-->
    <div style="position:absolute;right: 0;bottom:0;background-color: blueviolet">su1</div>
    </div>
    <div style="height: 1000px; background-color: aqua">
        shuai
    </div>

這裏仔細看下我給他定位的位置是右下角,當咱們打開網頁後它是在右下角可是鼠標華東後看下結果，它就不在右下角了，因此說若是父級別沒有使用position的時候須要注意

fixed是特殊的absolute，即fixed老是以body爲定位對象的，按照瀏覽器的窗口進行定位。

補充

溢出

應用場景，有這麼一種狀況，在一個div內有不少的的內容，若是div的框體不是很大超出去了怎麼辦？詳細狀況以下圖，代碼

代碼以下：

    <div style="height:100px;width: 500px; background-color:green;">
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
    </div>

解決方法：增長overflow樣式，代碼以下:

    <div style="overflow:auto;height:100px;width: 500px; background-color:green;">
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
    </div>

透明度

透明度，用的比較多，須要注意，簡單代碼例子以下：

    <div style="background-color:blue;height:100px;padding-top:30px">
        <!--這裏設置內部的div的透明度-->
        <div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">

        </div>
    </div>

效果圖以下：

層級

大部分主流瀏覽器都支持層級，咱們可使用z-index+浮動+透明度實現一個例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端開發-CSS-1</title>
    <style type="text/css">
        .main-container {
            position: absolute;
            top: 0; left: 0;
            height: 100%; width: 100%;
            background-color: rgba(0,0,0,0.1);
            z-index: 1;
        }
        .main-cover {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100px;
            width: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    主題內容爲白色
    <div class="main-container">
        <div class="main-cover">
            ceshi
        </div>
    </div>
</body>
</html>

圓潤度

除了像素，你還可使用百分比來指定border-radius邊框半徑的值。當border-radius爲50%的時候他就是一個圓形了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .main-container{
            position: fixed; 
            left: 50%; 
            top: 50%;
            height: 100px; 
            width: 100px; 
            background-color: chartreuse;
            border-radius: 10%; 
        }
    </style>
</head>
<body>
    <div class="main-container">
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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