前端 -- CSS

時間 2019-11-15

標籤前端 css 欄目 CSS 简体版

原文原文鏈接

11.2 CSS

CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。css

CSS 優勢：html

使數據和顯示分開瀏覽器
下降網絡流量網絡
使整個網站視覺效果一致字體
使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）網站

11.2.1 導入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入方式二:內接引入-->
    <style>
        div{
            color: deepskyblue;
        }
    </style>
    
<!--    引入方式三:外接樣式_連接式:link導入一個連接*****-->
    <link rel="stylesheet" href="index.css">
    
<!--    引入方式四:外接樣式:style導入一個@import url("路徑")-->
    <style>
        @import url("index.css");
    </style>
</head>
<body>
    
<!--引入方式一:行內引入-->
<div style="color: red;">字體顏色設置</div>
    
</body>
</html>

<!--css基本設置-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: rebeccapurple;
            width: 200px;
            height: 400px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div>最簡單的基本樣式</div>
</body>
</html>

11.2.2 選擇器

基本選擇器

1.標籤選擇器

標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        span{
            color: blue;
        }
        a{
            color: green;
        }
    </style>
</head>
<body>
<div>
    標籤選擇器:div1的顏色  /* red */
    <span>標籤選擇器:div中的span的顏色</span> /* blue */
</div>
<span>標籤選擇器:單獨span的顏色</span> /* blue */
<div>
    標籤選擇器:div2的顏色 /* red */
    <a href="http://www.baidu,com">標籤選擇器:連接的顏色</a> /* green */
</div>
</body>
</html>


/* 1.子元素會繼承父元素的的樣式,可是a標籤除外
   2.要想對a標籤進行設置,必須直接找到a標籤的位置,對a單獨設置
   3.樣式之間的重疊部分是有優先級的,繼承下來的優先級爲0(最低)*/

2.id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            color: purple;
        }
    </style>
</head>
<body>
<div id="div1">
    id選擇器:有id的div1的顏色 /* purple */
    <span>id選擇器:div中的span顏色</span> /* purple */
</div>
<div>
    id選擇器:div2的顏色
</div>
</body>
</html>

3.類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl{
            color: orangered;
        }
    </style>
</head>
<body>
<div>
    類選擇器:div1的顏色
    <span class="cl">類選擇器:div1中的span顏色</span> /* orangered */
</div>
<div>
    類選擇器:div2的顏色
    <span class="cl">類選擇器:div2中的span顏色</span> /* orangered */
</div>
</body>
</html>

4.通用選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: yellow;
        }
    </style>
</head>
<body>
<div>
    通用選擇器:div1顏色 /* yellow */
    <span>通用選擇器:span顏色</span> /* yellow */
</div>
<div>
    通用選擇器:div2顏色 /* yellow */
</div>
</body>
</html>

高級選擇器

1. 後代\子代選擇器

後代選擇器:找的是子子孫孫,所有都找出來.spa

子代選擇器:只找後面一代rest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*後代*/
       div span{
           color: tomato;
        }
        /*子代*/
       div>span{
           color: tomato;
        }
    </style>
</head>
<body>
<div>
    我是div標籤的content
    <span>後代1:西紅柿色</span> /*後代變色*/ , /*子代只有這個變色*/
    <p>
        在div-p標籤中
       <span>後代2:西紅柿色</span> /*後代變色*/
    </p>
</div>
<span>我只是一個單純的span標籤</span>
</body>
</html>

2. 毗鄰\弟弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*毗鄰*/
       span+a{
           color: tomato;
        }
        /*弟弟*/
        span~a{
           color: tomato;
        }
    </style>
</head>
<body>
<div>
    <a>我是a0標籤</a>
    <span>span標籤</span>
/* 若是這裏還有一個非a標籤,毗鄰.下面不變色 */
    <a>我是a1標籤</a>  /*弟弟:變色*/ , /*毗鄰:變色*/
    <a>我是a2標籤</a>  /*弟弟:變色*/
</div>
</body>
</html>

3. 屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[href]{
            color: green;
        }
        a[href='http://www.taobao.com']{
            color: lightpink;
        }
        input[type='text']{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.taobao.com">我是a0標籤</a> /*屬性:href變色*/ /*屬性:href有網址的變色*/
        <span>span標籤</span>
        <a href="http://www.jd.com">我是a1標籤</a> /*屬性:href變色*/
        <a href="http://www.mi.com">我是a2標籤</a> /*屬性:href變色*/
        <a>沒有href屬性</a>
    </div>
    <input type="text"> /*屬性:type='texe'變色*/
    <input type="password">
</body>
</html>

4. 並集\交集選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 並集選擇器 */
    ul,ol,span{
       background-color: gainsboro;
    }
    </style>
</head>
<body>
    <ul>
        <li>u-first</li> /* 並集變色 */
    </ul>
    <ol>
        <li>o-first</li> /* 並集變色 */
    </ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 交集選擇器 */
        div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1 box2">box1box2</div>  /* 交集:變色 */
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span標籤</span>
</body>
</html>

5. 僞類選擇器

a 專屬 : link visited activecode
input 專屬 : focus
通用 : hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 連接點擊以前的顏色 */
        a:link{
            color:tomato;
        }
        /* 連接點擊以後的顏色 */
        a:visited{
            color: gray;
        }
        /* 點擊時的顏色 */
        a:active{
            color: green;
        }
        /* 點擊對話框的顏色 */
        input:focus {
            background-color: aquamarine;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        /* 鼠標懸浮變色 */
        div:hover{
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="http://www.jd.com">京東</a>
    <a href="http://www.xiaohuar.com">校花</a>
    <input type="text">
    <div></div>
</body>
</html>

6. 僞元素選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 第一個字變色 */
        p:first-letter{
            color: green;
        }
        /* 所選內容前面添加的內容:變色 */
        p:before{
            content: '**';
            color: pink;
        }
        /* 所選內容後面添加的內容:變色 */
        p:after{
            content: '.....';
            color: lightblue;
        }
    </style>
</head>
<body>
    <p>春江水暖鴨先知</p>
</body>
</html>

7. 選擇器的優先級

行內>id選擇器>類選擇器>標籤選擇器>繼承
1000   100     10        1       0

全部的值能夠累加可是不進位
相同優先級的放在後面的生效
!important 提升樣式的優先級到最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: lavender;
        }
       div#AA{
            background-color: red;
        }
        div.aa{
            background-color: green;
        }
        div.aa.bb{
            background-color: yellow;
        }
        div#BB{
            background-color: pink;
        }
    </style>
</head>
<body>
<div>普通的div</div>   /* lavender */
<div id="AA">有一個id的div</div>   /* red */
<div class="aa">有一個類的div</div>   /* green */
<div class="aa bb">有兩個個類的div</div>   /* yellow */
<div class="aa" id="BB">有一個類而且有一個id的div</div>   /* pink */
</body>
</html>

11.2.3 顏色表示

rgb表示法:
    rgb:red green blue 光譜三原色
    rgb(255,255,255) 白色
    rgb(0,0,0) 黑色

16進制的顏色表示法:
    #000000 - #ffffff
    #000 - #fff

單詞表示法:
    red blue yellow

rgba表示法:
    a表示透明度,0-1,0是徹底透明,1是不透明

顏色對照表
    https://htmlcolorcodes.com/zh/yanse-ming/

11.2.4 字體設置

屬性	描述	屬性值	說明
font-size	字體大小	50px
font-family	字體系列	"Microsoft Yahei","微軟雅黑", "Arial", sans-serif	瀏覽器使用它可識別的第一個值
font-weight	字體粗細	none bold border lighter 100~900 inherit	默認值，標準粗細粗體更粗更細值，400=normal，700=bold 繼承父元素字體的粗細值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-family: '楷體','宋體';
            font-weight: bolder;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p>字體設置</p>
</body>
</html>

11.2.5 文本設置

屬性	描述	屬性值	說明
text-indent	首行縮進	單位建議em
text-align	文本對齊方式	none center left right justify	默認水平居中左對齊右對齊兩端對齊
text-decoration	規定文本修飾的樣式	none underline overline line-through inherit	默認下劃線定義文本上的一條線定義穿過文本下的一條線繼承父元素text-decoration屬性的值
line-height *	行高	line-height: 200px;	設置行高=容器高度,文字自動垂直居中
text-shadow	陰影	5px 5px 5px #FF0000	水平方向偏移量 / 垂直方向偏移量 / 模糊度 / 陰影顏色
text-overflow	文字溢出	clipellipsis	修剪文本顯示省略號表明被修剪文本

<!-- 文字溢出 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*顯示省略符號來表明被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="div0">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div1">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div2">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div3">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
</body>
</html>

11.2.6 背景圖片

background-repeat	設置背景圖像的平鋪方式
repeat	默認。背景圖像將在垂直方向和水平方向重複
repeat-x	背景圖像將在水平方向重複
repeat-y	背景圖像將在垂直方向重複
no-repeate	背景圖像將僅顯示一次

background-position	設置背景圖像的起始位置
100px 100px	圖片與左邊 / 上邊的邊距
top / center / bottom	垂直位置 : 上 / 中 / 下
left / center / right	水平位置 : 左 / 中 / 右
background-size	圖片大小
background-attachment: fixed	固定背景圖片的位置,頁面滾動圖片不會移動
background-image: url(xxx.jpg)	背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            background-color: deepskyblue;
            background-image: url(xjs.jpg);
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-position: 100px 100px;
            background-position: center top;
            background-attachment: fixed;
            background: red url("xjs.jpg") no-repeat left center; /* 綜合寫法 */
        }
    </style>
</head>
<body>
<div>
    <p>我是一個小殭屍</p>
</div>
</body>
</html>

11.2.7 邊框的設置

可分別設置四邊的顏色,粗細,樣式,遵循上右下左的順序

一個值:上下左右
兩個值:遵循上下 / 左右
三個值:上 / 右左 / 下
四個值:遵循順時針上右下左

border的設置	解釋
border-color	邊框顏色
border-width	邊框粗細
border-style	邊框樣式
border: color width style	綜合寫法:設置邊框顏色,粗細,樣式
border-radius	設置圓角

11.2.8 塊和行內的概念 / 轉換

行內元素：

與其餘行內元素並排；
對於行內標籤來講不能設置寬和高,默認的寬度，就是文字的寬度

塊級元素：

獨佔一行，不能與其餘任何元素並列；
能設置寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-color: blue;
            border-width: 5px;
            border-style: solid double dotted dashed;
            border-top-color: orangered; 
            border-top-style: solid;
            border-top-width: 3px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

display的屬性值	解釋
display: block;	獨佔一行而且能夠設置寬高
display: inline-block;	既能夠設置寬高又不會獨佔一行行內\塊轉行內快
display: inline;	表示一個行內元素,不能設置寬高
display: none;	不只不顯示內容,連位置也不佔了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            /*display: block;*/
            display: inline-block;
            /*width: 100px;*/
            height: 20px;
            background-color: purple;
            text-align: center;
            line-height: 20px;
            text-decoration: none;
        }
        div{
            display: inline-block;
            width: 50px;
            height: 50px;
            border-color: orangered;
            border-style: solid;
        }
        div.div{
            display: none;
            width: 50px;
            height: 50px;
            border-color: blue;
            border-style: solid;
        }
    </style>
</head>
<body>
<div class="div"></div>
<div></div>
<a href="">a標籤1</a>
<a href="">a標籤2</a>
</body>
</html>

11.2.9 盒模型

背景包含的部分: padding + content
盒模型大小計算:width/height + padding*2 + border*2

代碼	解釋
margin	外邊距(盒子與盒子之間的距離)
margin-left: auto	表示靠左
margin-right: auto	表示靠右
margin: 0 auto	表示居中 (父/子盒子都要有寬度)
padding	內邊距(內容框與邊框的距離)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: solid purple 10px;
            padding: 20px;
            /*margin: 20px;*/
            margin-bottom: 20px;
        }
        div.box2{
            width: 100px;
            height: 100px;
            background-color: red;
            border: solid purple 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="box1">盒模型大小計算:寬+padding*2+border*2</div>
<div class="box2">盒子2</div>
</body>
</html>

<!-- 盒子模型例子 -- 三角形 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 0;
            height: 0;
            border-color: red transparent transparent transparent; /* trandparent:透明 */
            border-width: 50px;
            border-style: solid;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

11.2.10 浮動

float：	表示浮動的意思
float：none	表示不浮動，默認
float：left	表示左浮動
float：right	表示右浮動

浮動的元素會脫離標準文檔流,本來塊級元素就再也不獨佔整行了,而且在原頁面中也不佔位置了,以後的元素會擠到頁面上影響頁面的排版

浮動的四大特性：

浮動的元素會脫離標準文檔流
浮動的元素互相貼靠
浮動的元素有"子圍"效果
收縮的效果:：一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.main{
            height: 100px;
            background-color: darkgray;
        }
        div.box{
            width: 100px;
            height: 100px;
            border: solid red;
            background-color: yellow;
            float: right;
        }
        div.father{
            background-color: forestgreen;
            /*overflow: hidden;*/    /*清除浮動二 BFC*/
        }
        /* .clear{ */           /* 清除浮動一 */
        /*    clear: both;  */
        /*  }  */ 
        /* 僞元素清除浮動 */
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
<div class="father clearfix">
    <div class="box"></div>
    <div class="box"></div>
<!--    <div class="clear"></div>-->
</div>
<div class="main">
    主頁的內容
</div>
</body>
</html>

11.2.11 定位

定位	功能
position: relative	相對定位
position: absolute	絕對定位
position: fixed	固定定位

相對定位:相對本身原來的位置移動,移動以後還佔據原來的位置

絕對定位 :絕對定位是相對於整個html頁面,不會佔據原來的位置,層級會提高.若是設置了絕對定位的子元素的父元素沒有設置position,那麼子元素的全部設置都是基於整個頁面.若是設置了position,子元素的絕對定位會根據父元素的位置定位.父相子絕:子元素設置的絕對位置會對應着祖級元素的相對位置

固定定位 :固定是相對於整個窗口的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .d{
            width: 400px;
            height: 1000px;
            background-color: lavender;
            position: relative;
            left: 200px;
        }
        .d1{
            background-color: red;
        }
        .d2{
            background-color: yellow;
            position: absolute;
            left: 100px;
        }
        .d3{
            background-color: green;
        }
        img{
            position: fixed;
            right: 10px;
            bottom: 10px
        }
    </style>
</head>
<body>
<div class="d">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>
<img src="xjs.jpg" alt="xiaojiangshi">
</body>
</html>

11.2.12 z-index

用法說明:

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            z-index: 10;
        }
        .d2{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            z-index: 5;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>

11.2.13 opacity

調整整個標籤的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div>
    我只是一個小殭屍
    <img src="xjs.jpg" alt="小殭屍">
</div>

</body>
</html>

11.2.14 overflow

overflow	解釋
overflow: visible	可見(默認)
overflow: hidden	超出部分隱藏
overflow: scroll	超出顯示滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <p>23期的學生都餓了想吃飯 很是想</p>
        <p>23期的學生都餓了想吃飯 很是想</p>
        <p>23期的學生都餓了想吃飯 很是想</p>
        <p>23期的學生都餓了想吃飯 很是想</p>
    </div>
</body>
</html>

分方向的設置

位置	上	右	下	左
邊框	border-top	border-right	border-bottom	border-left
內邊距	padding-top	padding-right	padding-bottom	padding-left
盒子	margin-top	margin-right	margin-bottom	margin-left

在css中去掉列表的樣式
ul,li{
   list-style: none;
}

1. 前端之CSS
2. Web前端-CSS
3. 前端css position
4. 前端 CSS
5. 前端篇---------CSS
6. python--前端CSS
7. 前端之css
8. python前端CSS
9. 前端-html、css
10. 前端——CSS
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

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