html學習-css

最後更新：2017-02-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：寬度 border 分組 css 指定 range sel images text

1.css初識

css 中文解釋：層疊樣式表，把html比作木偶的話，css就是木偶的衣服，他的外在都能通過css來修飾，js則能是html動起來。產生使用者互動。。。

1.1css樣式表類型css樣式類型：　　行內樣式：　　內部樣式：　　外部樣式（推薦使用）：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--外部樣式：直接將css寫入到css檔案中，載入使用-->    <link rel="stylesheet" href="css/top.css">    <style>        /*內部樣式：將樣式寫到head中的style中*/        #pg-index{            background-color: #00AA88;        }    </style></head><body>    <!--行內樣式：直接將css樣式寫入到標籤內部-->    <div id="pg-index" style="color: red"></div></body></html>

1.2css選取器類型　　標籤選取器:（html標籤）　　類別選取器:（class選取器）　　ID選取器:　　層級選取器:　　分組選取器:　　通用選取器：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--外部樣式：直接將css寫入到css檔案中，載入使用-->    <link rel="stylesheet" href="css/top.css">    <style>        /*內部樣式：將樣式寫到head中的style中*/        *{            /*通用選取器*/            font-family: "Microsoft YaHei", "Hiragino Sans GB";        }        body{            /*標籤選取器*/            margin: 0;        }        #pg-index{            /*id選取器*/            background-color: #00AA88;        }        .pg-index2{            /*類別選取器(class選取器)*/            float: right;        }        #pg-index p{            /*層級選取器*/            font-size: 20px;        }        #pg-index,.pg-index2{            /*分組選取器*/            margin-left: 10px;        }        #pg-index p:hover{            /*偽類別選取器*/            background-color: #00CC00;        }    </style></head><body>    <!--行內樣式：直接將css樣式寫入到標籤內部-->    <div id="pg-index" class="pg-index2" style="color: red">        <p>主體內容</p>    </div></body></html>

　　偽類別選取器:

:link      定義超連結預設樣式:visited    定義訪問過的樣式:hover     定義滑鼠經過的樣式:active     定義滑鼠按下的樣式a:link { color:#ff0000; }  /*預設樣式，超連結顯示文字為紅色*/a:visited { color:#00ff00; }  /*訪問過後，超連結顯示文字為綠色*/a:hover { color:#0000ff; }  /*滑鼠經過，超連結顯示文字為藍色*/a:active { color:#ffff00; }  /*滑鼠按下時，超連結顯示文字為黃色*/

1.3css文法結構每個CSS樣式由兩個組成部分：選取器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束

在css的三個組成部分中，“對象”是很重要的，它指定了對哪些網頁元素進行設定，因此，它有一個專門的名稱——選取器（selector） 1.4css選取器優先順序

 <style type="text/css">            #show1{color:gold;}            .show {color:pink;}            h1 {color:red;}            * {color:green;} </style> </head> <body>     <h1 id="show1" class="show" style="color:gray;">這是選取器優先順序測試</h1> </body>

1.5css文本段落屬性及邊框邊框設定：border
寬度，樣式，顏色 (border: 1px solid red;)文本行高：line-height
文法： line-height：行高值(像素)水平對齊： text-align
　　　　　 left：靠左對齊；
　　　　　 right：靠右對齊
　　　　 center：置中對齊

body{    /*標籤選取器*/    border: 1px solid red;    width: 100%;    text-align: center;    height: 50px;    line-height: 50px;    margin: 0;    }

1.6css文字屬性字型大小：font-size
文法：font-size：大小的取值(像素值)文字顏色：color
文法：Color：顏色取值方式
　　   color:#292378; //6個十六進位數獲得顏色
　　   color:#A64; //#AA6644的縮寫
　　　color:red;//顏色關鍵字定義顏色
　　　color:rgb(100,159,170); //rgb定義顏色1.7css背景屬性背景顏色：background-color
關鍵字：red pink orange 背景映像：background-image
使用background-image屬性可以設定元素的背景映像。
文法：background-image：url（映像地址）背景重複：background-repeat
文法：background-repeat：取值
　　　Repeat(預設) 背景映像平鋪排滿整個網頁
　　   repeat-x 背景映像只在水平方向上平鋪；
　　   repeat-y 背景映像只在垂直方向上平鋪。
　　　no-repeat 背景映像不平鋪背景位置：background-position
　　　　   background-position-x:200px ;
　　　　   background-position-y:100px;

1.8css背景圖片執行個體

<style>        #myimg{                border:1px solid red;                height:18px;                width:18px;                background-image: url(‘2.png‘);        background-position-y:138px;    }</style><body>        <div id="myimg">    </div></body>

1.9css位置屬性margin外邊距填充屬性

邊距屬性
margin是對外元素的距離，用來控制元素本身的浮動位置
　　四邊距margin
　　上邊距margin-top
　　下邊距margin-bottom
　　左邊距margin-left
　　右邊距margin-right

margin 10px 20px 30px 40px;
　　提供一個，用於的四邊；
　　提供兩個，第一個用於上－下，第二個用於左－右；
　　如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；
　　提供四個參數值，將按上－右－下－左的順序作用於四邊；
　　置中顯示

padding內邊距填充屬性

padding是對內元素，用來控制元素內部元素的位置
　　四邊填充 padding
　　上填充 padding-top
　　下填充 padding-bottom
　　左填充 padding-left
　　右填充 padding-right

padding 10px 20px 30px 40px;
　　提供一個，用於的四邊；
　　提供兩個，第一個用於上－下，第二個用於左－右；
　　如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；
　　提供四個參數值，將按上－右－下－左的順序作用於四邊；

2.css浮動屬性

2.1css顯示內容

Display顯示內容：block：將元素變成塊級標籤，可以設定高度和寬度Inline：將元素變成行內標籤，不能設定高度和寬度Inline-block：同時具有兩種none：標籤消失<span style="background-color: gray;height:70px;width:20px;">行內標籤</span>

2.2css溢出處理

2.3css位置屬性

2.4css層級優先順序

參考連結：

http://www.w3school.com.cn/

http://css.doyoe.com/

http://www.runoob.com/cssref/css-reference.html

html學習-css

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

html學習-css

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support