前端基礎之CSS

時間 2020-07-30

標籤前端基礎 css 欄目 CSS 简体版

原文原文鏈接

前端基礎之CSS

一、什麼是CSS

層疊樣式表，用來調節標籤的樣式css

二、註釋

/*註釋內容*/
CSS應該有一個獨立的文件，而且有註釋說明每一塊的CSS代碼位置，方便維護
/*首頁的CSS樣式*/
/*側邊欄的CSS樣式*/
/*頁面通用的CSS樣式*/

三、CSS語法結構

每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束html

選擇器 {屬性名1：屬性值1；屬性名2：屬性值2}前端

四、CSS三種引入方式

一、外部CSS文件（最正規）在head內用link引入python

二、HTML代碼head內直接用style標籤內書寫CSS代碼瀏覽器

三、標籤內經過style屬性直接書寫對應的樣式（不推薦）微信

五、如何查找標籤

一、基本選擇器

        /*標籤選擇器，元素選擇器
        將頁面全部的div內的內容所有改變樣式*/
        div {color: darkred}
        
        /*類選擇器
        用點類名的方式將全部的類c1改變樣式*/
        .c1 {color: aqua}
        
        /*id選擇器
        用#加id名將全部id='d1'的改變樣式*/
        #d1 {color: coral}
        
        /*通用選擇器
        用*表明所有，將頁面其餘未經過CSS改變的樣式所有改變樣式*/
        * {color: blue}

二、組合選擇器

        /*後代選擇器，
        用空格隔開將全部div內部的全部的span所有改變樣式，沒有層級限制*/
        div span {color: blue}

        /*兒子選擇器
        將全部div下面的全部第一級span改變樣式*/
        div > span {color: aqua}

        /*毗鄰選擇器
        div外部緊挨着的第一個改變樣式*/
        div + span {color: darkred}

        /*弟弟選擇器
        同級別下的全部標籤改變樣式*/
        div ~ span {color: aqua}

三、屬性選擇器 [ ]

        /*找到頁面上全部的username的屬性名標籤改變樣式*/
        [username] {background-color: aqua}

        /*找到username='tank'的全部屬性改變標籤樣式*/
        [username='tank'] {background-color: aqua}

        /*找到input中username='tank'的標籤改變標籤樣式，input與[]之間不能加空格*/
        input[username='tank'] {background-color: darkred}
        /*找到span中username='tank'的標籤改變標籤樣式，span與[]之間不能加空格*/
        span[username='tank'] {background-color: blue}

四、分組與嵌套選擇器，

        /*嵌套，將全部的div和p標籤改變樣式*/
        div,p {color: blue}

        /*將全部的c1和d1和span改變樣式*/
        .c1, d1, span {color: aqua}

五、僞類選擇器：

        /*未訪問的連接，改變樣式*/
        a:link {color: blue}

        /*鼠標移動到連接上面改變樣式*/
        a:hover {color:black}

        /*鼠標點擊選中連接時的樣式*/
        a:active {color: fuchsia}

        /*已經訪問過的連接*/
        a:visited {color: gray}

        /*點擊input輸入框是獲取焦點時樣式*/
        input:focus {background-color: aqua}

六、僞元素選擇器

        /*給首字母設置特殊樣式*/
        div:first-letter {color: crimson;
        font-size: 38px}
        
        /*在每一個div標籤前面插入內容，用戶沒法選中*/
        div:before {content: '你好啊';
        color: fuchsia}
        
        /*在每一個div標籤後面插入內容，用戶沒法選中*/
        div:after {content: '拜拜！';
        color: blue}

六、選擇器優先級

一、選擇器相同，引入方式不一樣，就近原則ide

二、選擇器不一樣，引入方式相同，按照：內聯樣式 > id選擇器 > 類選擇器 > 屬性選擇器佈局

除此以外還能夠經過添加 !important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。學習

萬不得已可使用 !important字體

七、如何調節樣式

一、設置高寬

width屬性設置寬度，height屬性設置高度

塊級標籤能夠設置長寬，內聯標籤的長寬由內容來決定

    div {border: solid 2px; width: 100px;height: 30px}  /*border solid 是設置邊框是實線*/
    span {border: solid 2px; width: 200px;height: 300px}

二、設置字體屬性

文字字體：font-family

字體大小：font-size

字體粗細(font-weight)：bold粗體，bolder更粗，lighter更細

字體顏色(color)：一、十六進制如#FF0000，二、RGB(255,255,0)，三、顏色英文名，四、rgba(255,123,102,0.4) 第四個值是透明度從0.0~1.0

三、設置文字屬性

文字對齊(text-align)

文字裝飾（text-decoration）

經常使用去掉a標籤鏈接的下劃線： a { text-decoration: none }

首行縮進(text-indent)：p {text-indent: 32px}

注意：塊級標籤能夠首行縮進，行內標籤不能首行縮進

四、背景屬性

背景顏色(background-color)

背景圖片(background-image)

背景圖片不動：background-attachment: fixed;

背景位置(background-position)

            background-position: right;
            background-position: center;
            background-position: top;
            background-position: bottom;
            background-position: 100px, 100px;  /*第一個參數是調節左右，第二個是上下*/

背景重複(background-repeat)

repeat(默認):背景圖片平鋪排滿整個網頁

repeat-x：背景圖片只在水平方向上平鋪

repeat-y：背景圖片只在垂直方向上平鋪

no-repeat：背景圖片不平鋪

背景屬性能夠簡寫爲：background: url('111.jpg') left top no-repeat

五、邊框屬性

border-width：邊框寬度

border-color：邊框顏色

border-style：邊框樣式有：無邊框none，點虛線邊框dotted，矩形虛線邊框dashed，實線邊框solid

也是能夠簡寫：border：2px dashed red;

也能夠指定某一條邊的樣式

p {
            /*border: crimson 3px solid;*/
            border-left-style: solid;
            border-left-color: crimson;
            border-top-style: dashed;
            border-right-style: dotted;
            border-right-width: 4px;
        }

圓形邊框：border-radius: 50%

    div {
        color: crimson;
        border-style: dashed;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

六、display

控制塊級標籤和行內標籤的展現效果

讓塊級標籤邊爲行內標籤樣式讓幾個塊級標籤在一行展現可設置長寬：display: inline

讓行內標籤有塊級標籤樣式，行內標籤獨佔一行：display: block

讓塊級標籤有設置長寬又有行內標籤在一行展現的特色：display: inline-block

隱藏標籤而且讓出標籤所佔位置：display: none

隱藏標籤不讓出標籤所佔位置：visibility: hidden

七、盒子模型

快遞盒與快遞盒之間的距離 >>> 標籤與標籤之間的距離 >>> 外邊框（margin）

快遞盒盒子的厚度 >>> 標籤的邊框 >>> 邊距（border）

快遞盒裏面的快遞到盒子的距離 >>> 標籤內部文本到邊框的距離 >>> 內邊距/內填充（padding）

快遞盒內的內容大小 >>> 文本和圖像內容 >>> 內容（content）

margin外邊框：

        p {
            border-style: solid;
            margin-top: 15px;
            margin-right: 5px;
            margin-bottom: 10px;
            margin-left: 25px;
        }
        /*能夠簡寫：*/
        p {
            margin: 50px; /*只寫一個值是上下左右均是50px*/
            margin: 20px 80px;  /*寫兩個值第一個是上下，第二個是左右*/
            margin: 20px 80px 50px;  /*寫三個值第一個是上，第二個是左右,第三個是下*/
            margin: 20px 80px 50px 120px;  /*寫四個值順時針排第一個是上，第二個是右,第三個是下,第四個是左*/
            margin: 0 auto;  /*水平居中*/
        }

padding內填充：

使用與margin用法相同

八、浮動float

在CSS中任何元素均可以浮動，浮動的元素是脫離正常文檔流的自身多大就會佔多大，再也不有獨佔一行的概念

浮動多用於前期佈局

浮動的缺陷：會形成父標籤塌陷的問題

clear屬性：專門用來清除浮動帶來的缺陷，父類塌陷問題

用法：在寫頁面以前先定義一個清除浮動的css代碼,誰塌陷了給誰加上clearfix樣式類

.clearfix:after {
    content:'';
    display:block;
    clear:both;
}

九、溢出屬性overflow

            /*溢出的內容會被修剪，而且其他的內容不可見*/
            overflow: hidden;
            /*內容會被修剪，但會以滾動條來查看其他內容*/
            overflow: scroll;
            /*內容會被修剪，但會以滾動條來查看其他內容*/
            overflow: auto;

十、圓形頭像

        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            }
        /*圖片所有顯示*/
        img {
            max-width: 100%;

十一、定位

全部的標籤默認狀況下都是靜態的（static）沒法作位置的修改，能夠修改靜態爲其餘的狀態

相對定位 relative：至關於標籤原有的位置坐偏移

絕對定位 absolute：至關於已經定位過的（static >>> relative)父標籤作偏移

固定定位 fixed ：至關於瀏覽器窗口固定在某個位置始終不變 >>>回到頂部

返回頂部實例
<!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">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

回到頂部

十二、脫離文檔流

驗證這個標籤原來所佔用的位置還在不在：浮動、定位

不脫離文檔流：相對定位

脫離文檔流：絕對定位、固定定位

1三、z-index設置對象的層疊順序

z-index的值大就在前面，壓着數字小的

1四、opacity設置透明度

取值範圍是0~1，0是徹底透明，1是徹底不透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: gray;
            width: 1000px;
            height: 1000px;
        }
        #id1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            z-index: 100;
            opacity: 0.7;
            position: fixed;
            left: 5px;
            top: 30px;
        }
        #id2 {
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 1000;
            opacity: 0.6;
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div>最底下</div>
<div id="id1">第二層</div>
<div id="id2">最上層</div>
</body>
</html>

設置摺疊順序和透明度

練習：博客園頁面樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客園界面</title>
    <link rel="stylesheet" href="blogcss.css">
</head>
<body>
<div class="left_menu">
    <div class="blog_image">
        <img src="111.jpg" alt="">
    </div>
    <div class="username">
        <p>Mr沈博客</p>
    </div>
    <div class="userinfo">
        <p>這我的很帥，人狠話很少</p>
    </div>
    <div class="blog_link">
        <ul>
            <li><a href="">關於我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公衆號</a></li>
        </ul>
    </div>
    <div class="blog_tage">
        <ul>
            <li><a href="">#python</a></li>
            <li><a href="">#HTML</a></li>
            <li><a href="">#CSS</a></li>
        </ul>
    </div>
</div>
<div class="right_content">
    <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
        <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
        <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
        <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
        <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
        <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
        <div class="content_list">
        <div class="content_title">
        <span class="title">前端學習</span>
        <span class="date">2019/12/28</span>
    </div>
    <div class="content">
        <p>前端學習大法，HTML，CSS，JS...</p>
    </div>
    <div class="content_bottom">
        <span>#python</span>
        <span>#go</span>
    </div>
    </div>
</div>
</body>
</html>

cnblogs頁面

/*通用樣式*/
body {
    margin: 0;
    background: aliceblue;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}

/*左側樣式*/
.left_menu {
    width: 20%;
    height: 100%;
    float: left;
    background: darkgray;
    position: fixed;
}
.blog_image {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}
.blog_image img {
    max-width: 100%;
}
.username,.userinfo {
    font-size: 18px;
    color: black;
    text-align: center;
}
.blog_link a,.blog_tage a{
    font-size: 28px;
    color: blue;
    font-weight: bold;
}
.blog_tage a:hover,.blog_link a:hover{
    color: aliceblue;
}
.blog_tage ul,.blog_link ul{
    text-align: center;
    margin: 80px 0;
}

/*右側樣式*/
.right_content {
    width: 80%;
    /*background: antiquewhite;*/
    float: right;
}
.content_list {
    background: antiquewhite;
    margin: 10px 40px 10px 10px;
    box-shadow: rgba(128,128,128,0.5) 5px 5px 10px;
}
.title {
    font-size: 32px;
}
.date {
    float: right;
    font-size: 20px;
    margin:10px 20px;
}
.content_title {
    border-left: 5px solid red;
    text-indent: 14px;
}
.content {
    text-indent: 20px;
    border-bottom: solid 2px black;
    font-size: 20px;
}
.content_bottom {
    padding: 10px 10px 10px 20px;
    font-size: 18px;
}