DAY45-前端入門

時間  2019-11-21
標籤 day45 day 前端 入門 简体版
原文   原文鏈接

今日內容：css

　　一、css的三種引用方式html

　　二、樣式與長度及顏色編程

　　三、經常使用樣式編程語言

　　四、css選擇器佈局

1、css的三種引用方式

行間式：

1.在標籤頭部的style
2.屬性值是css語法
3.屬性值用Key：value形式賦值，value具備單位
4.屬性值之間用;隔開字體

<div  style='width:100px;height=100px;backgroud-color:red;'>

</div>

內聯式：

1.在style標籤內部(style標籤通常做爲(head的子標籤))
2.屬性值是css語法
3.屬性值用Key：value形式賦值，value具備單位
4.屬性值之間用;隔開（通常獨立分開賦值）
5.格式：選擇器{樣式塊}url

<style type='text/css'>
    div{
        width:100px;
        height:100px;
        backgroud-color:red;
    }
</style>

外聯式：

1.在外部CSS文件中
2.屬性值是css語法
3.屬性值用Key：value形式賦值，value具備單位
4.屬性值之間用;隔開（通常獨立分開賦值）
5.格式：選擇器{樣式塊}
6.將html和css文件創建鏈接：經過link標籤連接外部CSSspa

<link rel='stylesheet' type='text/css' href='css/01.css'>
01.css
div{
        width:100px;
        height:100px;
        backgroud-color:red;
}

三種引入的優先級

注:三種方式之間沒有優先級之分
1.三種方式協同佈局,從上往下解析
2.不重複的屬性必定爲惟一位置
3.重複的屬性採用覆蓋賦值，保留最後位置的屬性值
4.行間式必定是邏輯上最後被解析的位置(js正常操做的就是行間式)
5.!important會影響優先級設計

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style  type='text/css'>
        div{
            width:100px;
            height: 100px; 
            background-color: yellow;
        }       
    </style>
    <link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
    <div style='background-color: yellowgreen'></div>
</body>
</html>
02.css
div{
    width:100px;
    height: 100px; 
    background-color: red;
}

2、樣式與長度及顏色

1.基本樣式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

2.長度

  • px：像素(pixel)，屏幕上顯示的最小單位，用於網頁設計，直觀方便code

  • mm：毫米

  • cm：釐米

  • in：英寸

  • pt：點(point)，一個標準的長度單位，1pt＝1/72in，用於印刷業，很是簡單易用；

  • em：至關長度，一般1em=16px，應用於流式佈局

​ 720pt = 10 in

​ 100mm = 10cm

​ 160px = 10em = 10rem

​ 50vw = 50% view width

3.顏色

  • rgb()：三個值可爲[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue）

  • rgba()：前三個值可爲像素或是百分比，最後一個爲[0, 1]數值，以,相隔（r:Red g:Green b:Blue a:Alpha）

  • hsl()：第一個值爲[0,360]數值，後二個值可爲百分比，以,相隔（h:Hue s:Saturation l:Lightness）

  • hsla()：第一個值爲[0,360]數值，中間二個值可爲百分比，最後一個爲[0, 1]數值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）

  • #AABBCC：六個十六進制位，每兩位一總體，分別表明Red、Green、Blue，能夠簡寫#abc

顏色單位有：rgb rgba() #六個十六進制位 hsl()

​ rgb:直接輸入顏色的英文名稱就行

​ rgba():括號內輸入三個0-255的數再輸一個0-1之間的數（用於表示透明度） 如（101，120，123，0.8）

​ #六個十六進制位：#後面跟六個十六進制位 如#FFFFFF

​ hsl: H表示色相，S表示飽和度，L表示明度
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>長度及顏色單位</title>
    <style type="text/css">
        body{
            background-color: yellowgreen;
        }
        div{
            /*長度單位*/
            /*px in pt mm cm em rem vw vh */
            /*width:100px;*/
            /*width:720 pt; 10in*/
            /*width:100mm;10cm*/
            /*width:160px;10em 10rem*/
            /*width:50vw; 50% view width*/
            width:100px;
            height: 100px;
            /*顏色單位*/
            /*單詞 reg() rgba() #六個十六進制位 hsl()*/
            /*background-color: red;*/
            /*background-color: rgb(0,0,255);*/
            /*background-color: rgba(0,0,255,50);*/
            /*知足AABBCC能夠簡寫爲abc*/
            /*background-color: #a0c;*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3、經常使用樣式

1.經常使用字體樣式

​ font-size: 30mm;(字體大小)

​ font-weight:900;(自重：bold、normal、light、100-900 )

​ line-height:50mm;(行高：行高設置大於等於字體大小，字體在行高中垂直居中顯示)

​ font-style:normal;(字體樣式：通常不關心)

​ font-family:"楷體"，「微軟雅黑」（字族：能夠自定義字族，當這個「楷體」字體不存在，再選取「微軟雅黑」#備用字體）

​ font:lighter 50mm/80mm "微軟雅黑"（CSS語法：空格隔開多個賦值的值，逗號隔開爲一個值多值賦值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體樣式</title>
    <style>
        span{
            font-size: 30mm;
            font-weight: 900;
            line-height: 50mm;
            font-style: normal;
            font-family:"楷體","微軟雅黑";
            font:lighter 50mm/80mm "微軟雅黑";
        }
    </style>
</head>
<body>
    <span>hello world!</span>
</body>
</html>

2.經常使用文本樣式

color:red;(顏色)

​ text-align:center;(水平居中方式：left、center、right)

​ text-decoration:none;(字劃線：underlin、line-through、overline、none)

​ letter-spacing:3xp;(字間距)

​ word-spacing:10px;(詞間距)

​ vertical-align:baseline;(垂直排列方式：top、baseline、bottom)

​ text-indent:2em;(縮進)

​ word-break:break-all;(按標籤設定的寬度強行換行，能夠在單詞（總體）內部換行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本樣式</title>
    <style type ="text/css">
        span{
            color: red;
            text-align: center;
            text-decoration: none;
            letter-spacing: 3px;
            word-spacing: 10px;
        }
        div{
            width: 300px;
            display: inline-block;
        }
        div{
            font-size:12px;
            vertical-align: baseline;
            text-indent: 2em;
        }
        .div{
            word-break: break-all;
        }
        a{
            /*應用場景*/
            text-decoration: none;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>標題</h1>
    <span>123 abc 哈哈</span>
    <!-- <a href="">123</a> -->
    <div>嘻嘻 哈哈 嘿嘿嘿 嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿</div>
    <div>red yellow green red yellow greenred yellow greenred  greenred yellow green</div>
    <div class="div">abcdefasdasdqwdaskjhdksaaaaaaaaaaaaaaaaaaaaaaaaaaaahkjhqwiukdhaksihdiusahdiuhzxciuhzixzhciuxzhiuchzxiuhciuxzhciuzhiuziuxhciuxzhicuhxziuchxziuhciuxzhcixzuhciuxzhcizhx</div>
</body>
</html>

3.經常使用背景樣式

 background-image:url("");(背景圖片)

​ background-repeat:no-repeat;（平鋪：no-repeat、repeat-x、repeat-y）

​ background-position:right center;(定位：top、bottom、center、left、right#第一個值控制水平位置，第二個值控制垂直位置，能夠用別的單位來填寫如：10px 10px)

​ background-attachment:fixed(定位相關的涉及到滾動時的效果：scroll、fixed)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景樣式</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div{
            background-image: url("data/bg_repeat.gif");
            background-repeat: no-repeat;
            background-position: right center;
            background-attachment: fixed;
        }
        div{
            /*總體設置*/
            background: url("data/bg_repeat.png") 10px 10px no-repeat red;
        }
    </style>
</head>
<body>
    <div></div>
    br*100
</body>
</html>

4、css選擇器

1.通配選擇器

匹配html,body,以及body中的全部子標籤，就是具備顯示效果的全部標籤。通常用於總體reset操做（清除系統自定義樣式）

*{
    margin: 0;
}

2.標籤選擇器

匹配製定標籤名的對應全部標籤，運用場景並很少

div{
    width: 100px;
    height: 100px;
    background-color: red;
}

3.類選擇器

匹配指令類名對應的全部標籤。類選擇器爲佈局首選，建議基本都用類選擇器進行佈局

.dd{
    font-size: 50px
    }

4.id選擇器

匹配製定ID名對應的惟一標籤。html,css都是標記語言，全部對id能夠進行多匹配，但JS是編程語言，只匹配到一個。通常不提倡用id選擇器進行佈局

#ele{
    color: blue;
}

基礎選擇器優先級

  • 基礎選擇器優先級大體與選擇器匹配範圍成反比，匹配範圍越小，優先級越高
  • 基礎選擇器優先級大體與選擇器匹配精度成正比，匹配精度越高，優先級越高
  • 基礎選擇器優先級：id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程