01CSS

時間 2019-12-13

標籤 01css css 欄目 CSS 简体版

原文原文鏈接

1.簡介

從事網頁製做或者相關工做,就要學習HTML,CSS。其中HTML是網頁製做的主要語言網頁的基礎,CSS層疊樣式表,主要用來修飾頁面的元素javascript

CSS 是 Cascading Style Sheet 的縮寫。譯做「層疊樣式表單」。是用於加強控制網頁樣式並容許將樣式信息與網頁內容分離的一種標記性語言。css

簡單來講:html

HTML稱之爲頁面的結構,CSS稱之爲頁面的表現java

2.css的使用方式

2.1行內樣式

注意：學習

1）使用標籤的style屬性進行css控制，css寫在style屬性值中網站

2）弊端：只能控制一個標籤的樣式url

<a href="xxxx" style="font-size:24px;color: orangered">超連接</a>

2.2內部樣式

注意：spa

1）使用style的標籤進行css控制，css內容寫在style標籤體內3d

2）一次控制多個標籤的樣式code

3）和html標籤混雜在一塊兒，很差維護。css內容沒法在多個html頁面中重用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css入門</title>
    <style type="text/css">
        a{ 
            font-size:24px;
            color:#0F0;
        }
    </style>
</head>
<body>
<a href="xxxx">超連接</a>
</body>
</html>

2.3外部樣式（推薦使用）

注意：

1）創建獨立後綴爲css的文件，css內容寫在該文件中

2）在使用css的html頁面中，導入外部css文件

a {
    font-size: 24px;
    color: #0F0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css入門</title>


    <link href="01.css" rel="stylesheet"/>
</head>
<body>
<a href="xxxx">超連接</a>
</body>
</html>

3.選擇器

3.1標籤選擇器

做用：選擇同名的標籤

<style type="text/css">
        /*標籤選擇器*/
        div {
            font-size: 24px;
            color: #F00;
        }
    </style>

<body>
<div>div1css選擇器</div>
<div>div2css選擇器</div>
<div>div3css選擇器</div>
</body>

3.2類選擇器

做用：選擇同類的標籤

注意：

1）選擇的標籤必須有class的屬性。同類的標籤使用同名

2）當一個標籤同時被標籤選擇器和類選擇器選擇，那麼類選擇器優先！！！

<style type="text/css">
        /*類選擇器*/
    .c1{
        font-size:36px;
        color:#00F;
    }
    </style>

<body>
<div class="c1">div1css選擇器</div>
<div>div2css選擇器</div>
<div class="c1">div3css選擇器</div>
</body>

3.3id選擇器

做用：選擇一個標籤

注意：

1）選擇的標籤必須有id屬性。

2）在同一個html頁面中，建議不要出現兩個同名的id屬性的標籤，後面使用javascript代碼選擇標籤的時候，getElementById("id屬性值")

3）id選擇器的優先級最高！

 <style type="text/css">
        /*id選擇器*/
        #d1 {
            font-size: 28px;
            color: #0F0;
        }
    </style>

<body>
<div class="c1">div1css選擇器</div>
<div>div2css選擇器</div>
<div class="c1">div3css選擇器</div>
<div id="d1">div4css選擇器</div>
</body>

3.4並集選擇器

做用：當多個選擇器的css內容相同，那麼可使用並集選擇器來合併css內容。

 <style type="text/css">
        /*並集選擇器*/
        .c1, #d1 {
            font-size: 24px;
            color: #0F0;
        }
    </style>

<body>
<div class="c1">div1css選擇器</div>
<div>div2css選擇器</div>
<div class="c1">div3css選擇器</div>
<div id="d1">div4css選擇器</div>
<!-- 注意：在同一個html頁面中，建議不要出現兩個同名的id屬性的標籤，
後面使用javascript代碼選擇標籤的時候，getElementById("id屬性值") -->

</body>

3.5交集選擇器

做用：選擇某個選擇器中的子標籤。

  <style type="text/css">
        /*交集選擇器
        div裏面的span標籤
        */
        div span {
            font-size: 30px;
            color: orange;
        }
    </style>

<div class="c1">div1css選擇器<span>span內部的內容</span></div>
<div>div2css選擇器</div>
<div class="c1">div3css選擇器</div>
<div id="d1">div4css選擇器</div>
<!-- 注意：在同一個html頁面中，建議不要出現兩個同名的id屬性的標籤，
後面使用javascript代碼選擇標籤的時候，getElementById("id屬性值") -->
<span>span的外部內容</span>

3.6通用選擇器

做用：選擇全部的標籤

  <style type="text/css">
        /*通用選擇器*/
    *{
        font-size:24px;
        color: olive;
    }
    </style>

<body>
<div class="c1">div1css選擇器<span>span內部的內容</span></div>
<div>div2css選擇器</div>
<div class="c1">div3css選擇器</div>
<div id="d1">div4css選擇器</div>
<!-- 注意：在同一個html頁面中，建議不要出現兩個同名的id屬性的標籤，
後面使用javascript代碼選擇標籤的時候，getElementById("id屬性值") -->
<span>span的外部內容</span>
</body>

4.經常使用屬性

4.1列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css列表</title>
    <style type="text/css">
    ul{
        /*列表符號類型*/
        /*list-style-type:none;*/
        /*設置列表符號的圖片*/
        list-style-image:url(../picture/start.jpg);
    }
</style>
</head>
<body>
<ul>
    <li>學生管理</li>
    <li>教師管理</li>
    <li>課程管理</li>
</ul>
</body>
</html>

4.2表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse ;
            border-color: red;
            border-width: 2px;
        }
        td{
            border-width: 3px;
        }
    </style>
</head>
<body>
<h3 align="center">學生信息列表</h3>
<table border="1" align="center" width="500px" height="300px">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>班級</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
    <tr>
        <td>陳六</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
</table>
</body>
</html>

5.盒子模型

5.1基本概念

能夠把html頁面上每一個標籤看作是一個盒子。

盒子相關的屬性：

寬度和高度（width和height）：決定這個盒子的容量

內邊距（padding）：盒子邊框與內容的距離

邊框（border）：盒子的厚度

外邊距（margin）：盒子與盒子之間的距離

5.2模擬QQ登陸頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模擬QQ登陸頁面</title>
    <style type="text/css">
        /*修飾主div*/
        #main {
            /*寬度和高度*/
            width: 450px;
            height: 300px;
            /*邊框*/
            border: 1px solid #000;
            /*設置外邊距*/
            /*簡寫屬性*/
            margin: 150px 0 0 420px;

            /*設置背景圖片*/
            background-image: url(../picture/qq.jpg);
            background-repeat: no-repeat;
            background-position: top center;
        }

        /*用戶名div*/
        #userName {
            /*設置外邊距*/
            margin: 60px 0 0 100px;
        }

        /*密碼div*/
        #userPwd {
            /*設置外邊距*/
            margin: 20px 0 0 100px;
        }

        /*按鈕div*/
        #btn {
            /*設置外邊距*/
            margin: 20px 0 0 150px;
        }

        /*註冊按鈕*/
        #regBtn {
            margin-left: 30px;
        }

        /*設置用戶輸入框的背景*/
        #nameInput {
            background-image: url(../picture/head.png);
            background-repeat: no-repeat;
            /*設置左內邊距*/
            padding-left: 30px;
        }

        /*設置密碼輸入框的背景*/
        #pwdInput {
            background-image: url(../picture/key.jpg);
            background-repeat: no-repeat;
            /*設置左內邊距*/
            padding-left: 30px;
        }
    </style>
</head>
<body>
<div id = "main">
    <form>
        <div id="userName">
            用戶名：<input id="nameInput" type="text" name="userName">
        </div>
        <div id="userPwd">
            密&nbsp;&nbsp;&nbsp;碼：<input id="pwdInput" type="password" name="userPwd">
        </div>
        <div id="btn">
            <input type="submit" value="登陸"/><input type="button" value="當即註冊" id="regBtn"/>
        </div>
    </form>
</div>
</body>
</html>

6.css定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css定位</title>
    <style type="text/css">
    div{
        width:100px;
        height:100px;
        border:3px solid #000;
    }

    #div1{
        background-color:#F00;
    }

    #div2{
        background-color:#00F;
    }

    #div3{
        background-color:#0F0;
        /*相對定位*/
        /*
        position:relative;
        left:10px;
        top:10px;
        */

        /*絕對定位*/
        position:absolute;
        left:20px;
        top:20px;
    }

    #adv1{
        width:300px;
        height:300px;
        border:3px solid #00F;
        background-color:#09F;
        /*絕對定位*/
        /*position:absolute;*/
        /*固定定位--不會隨着滾動條的滾動而發生改變*/
        position:fixed;
        left:450px;
        top:200px;
    }
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內
網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內
網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內容網站內
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="adv1">馬上諮詢馬上諮詢馬上諮詢馬上諮詢馬上諮詢馬上諮詢馬上諮詢</div>
</body>
</html>

相關標籤/搜索

01css

CSS

每日一句

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