Web前端學習——CSS

Rangle發表於2017-12-04
Web前端CSS

一、CSS簡介
CSS全稱cascading style sheeding，層疊樣式列表。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
二、CSS組成
1、選擇器
（1）標籤選擇器

<head>
    <style>
        p{
            background-color: green;
            height: 48px;
            }
    </style>
</head>
<body>
    <p>中國人</p>
</body>

（2）ID選擇器

<head>
    <style>
        #i1{
            background-color: blue;
            height: 48px;
            }
    </style>
</head>
<body>
    <div id="i1">
        中國人
    </div>
</body>

（3）class選擇器

<head>
    <style>
        .c1{
            background-color: yellow;
            height: 48px;
            }
    </style>
</head>
<body>
    <div class="c1">
        中國人
    </div>
</body>

（4）關聯選擇器（層級選擇器，空格）
類似span標籤裡的p標籤的樣式，也可以是id,class,標籤等組合

<head>
    <style>
        span p{
            background-color: darkorchid;
            height: 48px;
            }
    </style>
</head>
<body>
    <p>中國人</p>
    <span>
        <p>中國人</p>
    </span>
    <p>中國人</p>
</body>

（5）組合選擇器(逗號)

<head>
    <style>
        .c1,.c2,.c3{
            background-color: yellow;
            height: 48px;
            }
    </style>
</head>
<body>
    <div class="c1">
        中國人
    </div>
    <div class="c2">
        中國人
    </div>
        <div class="c3">
        中國人
    </div>
</body>

（6）屬性選擇器
對選擇的標籤過濾後再通過屬性進行過濾

<head>
    <style>
        .cc[n="tom"]{
            background-color: yellow;
            height: 48px;
            }
    </style>
</head>
<body>
    <div class="cc">
        中國人
    </div>
    <div class="cc" n="tom">
        中國人
    </div>
</body>

（7）行選擇器

<body>
    <div style=" height: 28px;">
        中國人
    </div>
</body>

2、link引入外部css
通過建立專屬的css檔案，在其他html匯入css檔案，從而使用css檔案的樣式
001.css內容如下：

#i1{
            background-color: blue;
            height: 48px;
            }
.c1{
            background-color: yellow;
            height: 48px;
            }
p{
            background-color: green;
            height: 48px;
            }
span p{
            background-color: darkorchid;
            height: 48px;
            }
.cc[n="tom"]{
            background-color: yellow;
            height: 48px;
            }

001.html內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="001.css">
</head>
<body>
    <p>中國人</p>
</body>
</html>

3、優先順序
row style——>head style (按照編寫順序，自上而下優先)——> external style
4、css註釋
/* 註釋內容 */
5、背景、邊框
樣式、寬度、顏色、上下左右

<div style="border: 2px solid red ;width: 100px ;height: 20px">
    中國人
</div>

##下面為邊框屬性
    border-top-color: red;
    border-top-style: solid;
    border-top-width: 2px;
    border-right-color: red;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-left-color: red;
    border-left-style: solid;
    border-left-width: 2px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;

background可以定義如下屬性：
    background-color 規定要使用的背景顏色；
    background-image 規定要使用的背景影象；
    background-repeat 規定如何重複背景影象；
    background-attachment 規定背景影象是否固定或者隨著頁面的其餘部分滾動；
    background-position 指定背景影象的位置；

<div style="background-image: url(001.jpg);border: 3px;height: 800px;"> 
    chinese
</div>

6、float
漂移，挨著站齊

<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left">
    中國人
</div>
<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left;">
    中國人
</div>

7、display
塊、行標籤轉換,inline、block、inline-block、none
行內標籤：無法設定高度、寬度、padding、margin
塊級標籤：設定高度、寬度、padding、margin

<body>
    <span style="display: block">123</span>
    <div style="display: inline">456</div>
</body>

8、padding margin

 

9、position

固定位置,做層疊,其中主要有
fixed:固定在頁面某個位置
relative+absolute:
top/bottom/left/right/
opacity:0-1透明度
z-index:層疊優先順序，值越大越靠上

<body>
    <div  style="height: 30px;width: 100%;;background-color: blueviolet;position: fixed;top: 0">
        選單欄
    </div>
    <div onclick="gotop()" style="height: 30px;width: 80px;background-color: blueviolet;position: fixed;right: 0;bottom: 0">
        返回頂部
    </div>
    <div style="height:5000px;background-color: blanchedalmond ;margin-top: 30px">

    </div>
    <script>
        function gotop() {
            document.body.scrollTop=0;
        }
    </script>
</body>

11、overflow
auto:超出，出現滾動條
hidden:超出部分隱藏
<body>
<div style="background-color: red ;width: 220px;height: 220px ;overflow: hidden">
    <img src="001.jpg">

</div>
<div style="background-color: blue ;width: 220px;height: 220px ;overflow: auto">
    <img src="001.jpg">
</div>
</body>

10、overflow

auto:超出，出現滾動條
hidden:超出部分隱藏

<body>
<div style="background-color: red ;width: 220px;height: 220px ;overflow: hidden">
    <img src="001.jpg">

</div>
<div style="background-color: blue ;width: 220px;height: 220px ;overflow: auto">
    <img src="001.jpg">
</div>
</body>

11、hover

滑鼠移動到相應位置，顯示其stype
12、其他常用style屬性
width: 100px ;                         ##可以使用89%,邊框寬度
height: 20px ;                         ##可以使用89%,邊框高度
font-size:19px;                     ##字型大小
font-weight:bold ;                    ##加粗,80px,normal
font-family:'Microsoft YaHei';        ##字型樣式,
color:red;                            ##字型顏色
text-align:center;                     ##水平方向字型對齊方式，center/left/right
line-height:48px;                    ##根據div,垂直方向字型居中
background-color:red                ##背景色
text-decoration                        ##字型裝飾

 

<a href="http://www.baidu.com" style="text-decoration: none">百度</a>

 

相關文章