W3C3劍客—CSS
萬維網(wǎng)聯(lián)盟（外語縮寫：W3C）標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。
CSS3 作為變現(xiàn)層，其威力堪比整容。
未加樣式和加了樣式做對比，淘寶：
加上樣式后
1.CSS該如何學(xué)習(xí)？
css的3種引入方式
CSS的選擇器
CSS的基本樣式
CSS幾種布局方式
CSS響應(yīng)式
網(wǎng)頁動畫（專業(yè)的必修，非專業(yè)的了解）
1.1什么是CSS？
Cascading Style Sheets （層疊樣式表）
CSS2 W3C組織于1998年推出的技術(shù)規(guī)范
CSS3 早在2001年W3C就完成了CSS3的草案規(guī)范。CSS3規(guī)范的一個(gè)新特點(diǎn)是被分為若干個(gè)相互獨(dú)立的模塊
1.2CSS如何使用
行內(nèi)式引入，通過Style屬性(不推薦使用，結(jié)構(gòu)與表現(xiàn)高度耦合難以維護(hù))
<h1 style="color: red">CSS行內(nèi)式演示</h1>
1
通過內(nèi)部式Style引入
<style>
? ? /*這是在css中的注釋? */
? ? h1{
? ? ? ? font-size: 100px;?
? ? }? ? ? ?
</style>
123456
外部樣式表引入（推薦使用，結(jié)構(gòu)與表現(xiàn)低耦合，方便維護(hù)）
<link rel="stylesheet" href="../CSS/index.css">
1
在html中的位置一覽
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? /*這是在css中的注釋? 內(nèi)部樣式*/
? ? ? ? h1{
? ? ? ? ? font-size: 100px;?
? ? ? ? }? ? ? ?
? ? </style>
? ? <link rel="stylesheet" href="../CSS/index.css">? <!-- 外部引入樣式-->
</head>
<body>
? ? <!-- 行內(nèi)樣式 -->
<h1 style="color:rgb(182, 17, 17)">CSS行內(nèi)式演示</h1>
</body>
</html>
1234567891011121314151617181920
樣式優(yōu)先級，html從上往下加載，后邊的樣式會覆蓋先前的樣式，樣式變現(xiàn)為就近原則。
除此之外還可以在Style內(nèi)通過import導(dǎo)入，CSS2.1特有，使用較少，可以和link進(jìn)行 替換
2.CSS選擇器
標(biāo)簽選擇器
層次選擇器
id選擇器（重點(diǎn)）
類選擇器（重點(diǎn)）
偽類選擇器（愛恨原則）
屬性選擇器（重點(diǎn)）
2.1標(biāo)簽選擇器
標(biāo)簽選擇器可以快速定位到html中的某一類標(biāo)簽。
<style>
? ? ? ? /*直接以標(biāo)簽名字作為選擇器
? ? 標(biāo)簽名{
? ? 聲明1;
? ? 聲明2;
? ? 聲明3;
? ? ...
? ? }
? ? */
? ? ? ? h1{
? ? ? ? ? font-size: 100px;?
? ? ? ? }? ? ? ?
</style>
123456789101112131415
2.2 id選擇器(重點(diǎn))
id 選擇器，通過標(biāo)簽的id屬性快速定位，一般id就是元素的標(biāo)識，是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? /*
? ? ? ? id 選擇器，通過標(biāo)簽的id屬性快速定位，一般id就是元素的標(biāo)識，是唯一的
? ? ? ? id 選擇器：
? ? ? ? #id名{
? ? ? ? 聲明1;
? ? ? ? ? ? 聲明2;
? ? ? ? ? ? 聲明3;
? ? ? ? ? ? ...
? ? ? ? }
? ? ? ? */
? ? ? ? #txt{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p id="txt">這是一行文字</p>
</body>
</html>
1234567891011121314151617181920212223242526
2.3 類選擇器（重點(diǎn)）
類選擇器，通過標(biāo)簽的class屬性進(jìn)行定位，一般class屬性可以付給多個(gè)元素，同一個(gè)元素也可以有多個(gè)class值
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? /*
? ? ? ? 當(dāng)一個(gè)元素有多個(gè)class值時(shí)用空格隔開，并且后邊的樣式會覆蓋前邊的樣式
? ? ? ? 如下，class1中有font-size屬性,class2中也有font-size屬性,這時(shí)同時(shí)把
? ? ? ? .class1 和 .class1都付給了p ，則class2 會覆蓋class1的font-size
? ? ? ? .類名{
? ? ? ? 聲明1;
? ? ? ? ? ? 聲明2;
? ? ? ? ? ? 聲明3;
? ? ? ? ? ? ...
? ? ? ? }
? ? ? ? */
? ? ? ? .class1{
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 14px;
? ? ? ? }
? ? ? ? .class2{
? ? ? ? ? ? font-size: 36px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p class="class1">我是p1</p>
? ? <p class="class1 class2">我是p2</p>
</body>
</html>
1234567891011121314151617181920212223242526272829303132
2.4 層次選擇器
層次選擇器，通過父元素來定位子元素
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? /* 給ul一個(gè)樣式，它的子元素都會繼承它的樣式 */
? ? ? ? ul{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? /* 同樣的如果想通過父元素來定位子元素，可以通過
? ? ? ? ? ? 父元素 子元素{
? ? ? ? ? ? ? ? 聲明1;
? ? ? ? ? ? ? ? 聲明2;
? ? ? ? ? ? ? ? 聲明3;
? ? ? ? ? ? ? ? 聲明4;
? ? ? ? ? ? ? ? ...
? ? ? ? ? ? }
? ? ? ? ? ? 的方式進(jìn)行定位
? ? ? ? ? ? 同時(shí)如果子元素有樣式跟父元素一樣則會覆蓋
? ? ? ? 除此之外還有下一個(gè)相鄰兄弟選擇器
? ? ? ? #p1+p 則為#p1的像一個(gè)相鄰并且為p的元素(了解，一般不用)
? ? ? ? 下邊全部兄弟元素
? ? ? ? #p1~p 下方所有為p的兄弟元素（了解，一般不用）
? ? ? ? ? */
? ? ? ? p{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? p span{
? ? ? ? ? ? font-size: 36px;
? ? ? ? ? ? color: aqua;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <ul>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? ? ? <li>5</li>
? ? </ul>
? ? <span>這是外邊的span</span>
? ? <p><span>這是p的子元素span</span></p>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
2.5 偽類選擇器
偽類選擇器，并不是真正的選擇器，而是在原來選擇器的基礎(chǔ)上進(jìn)行更精準(zhǔn)，狀態(tài)不同時(shí)的元素變化的定位，常用于超鏈接，表單等。（愛恨原則）
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? /* 偽類選擇器的使用
? ? ? ? ? ? 選擇器:偽類名{
? ? ? ? ? ? ? ? 聲明1;
? ? ? ? ? ? ? ? 聲明2;
? ? ? ? ? ? ? ? 聲明3;
? ? ? ? ? ? ? ? 聲明4;
? ? ? ? ? ? ? ? ...
? ? ? ? ? ? }
? ? ? ? */
? ? ? ? #u li:first-child{
? ? ? ? ? ? /* first-child 選擇器下邊的第一個(gè)子元素 */
? ? ? ? ? ? color: rgb(226, 15, 15);
? ? ? ? }
? ? ? ? #u li:last-child{
? ? ? ? ? ? /* last-child 選擇器下邊最后一個(gè)子元素 */
? ? ? ? ? ? color: aqua;
? ? ? ? }
? ? ? ? ul li:nth-child(2){
? ? ? ? ? ? /* nth-child() 選擇器下指定子元素 */
? ? ? ? ? ? color: rgb(13, 238, 99);
? ? ? ? }
? ? ? ? /* 超鏈接常用的四個(gè)偽類（愛恨原則）:link :visited :hover :active */
? ? ? ? #u li a:link{/*鏈接狀態(tài)*/
? ? ? ? ? ? color: black;
? ? ? ? ? ? text-decoration: none;
? ? ? ? }
? ? ? ? #u li a:visited{/*訪問過后*/
? ? ? ? ? ? color: blue;
? ? ? ? ? ? text-decoration: none;
? ? ? ? }? ?
? ? ? ? #u li a:hover{/*當(dāng)鼠標(biāo)放上去時(shí)*/
? ? ? ? ? ? color: red;
? ? ? ? ? ? text-decoration: none;
? ? ? ? }
? ? ? ? #u li a:active{/*當(dāng)鼠標(biāo)點(diǎn)下去還未松開時(shí)*/
? ? ? ? ? ? color: green;
? ? ? ? ? ? text-decoration: none;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <ul id="u">
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? ? ? <li><a href="###">這是超鏈接</a></li>
? ? ? ? <li>6</li>
? ? ? ? <li>7</li>
? ? ? ? <li>8</li>
? ? ? ? <li>9</li>
? ? ? ? <li>10</li>
? ? </ul>? ?
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
2.6屬性選擇器（重點(diǎn)）
通過屬性或?qū)傩灾祦矶ㄎ?/p>
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? ul{
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? }
? ? ? ? /* 屬性選擇器通過元素的屬性或?qū)傩灾刀ㄎ?/p>
? ? ? ? ? ? 例：我要定位所有具有id這個(gè)屬性的li標(biāo)簽
? ? ? ? ? ? li[id]{
? ? ? ? ? ? ? ? 聲明1;
? ? ? ? ? ? ? ? 聲明2;
? ? ? ? ? ? ? ? 聲明3;
? ? ? ? ? ? ? ? 聲明4;
? ? ? ? ? ? ? ? ...
? ? ? ? ? ? }
? ? ? ? ? ? 例：我要定位所有class為class1的元素
? ? ? ? ? ? li[class=class1]{
? ? ? ? ? ? ? ? 聲明1;
? ? ? ? ? ? ? ? 聲明2;
? ? ? ? ? ? ? ? 聲明3;
? ? ? ? ? ? ? ? 聲明4;
? ? ? ? ? ? ? ? ...
? ? ? ? ? ? }
? ? ? ? */
? ? ? ? li[id]{
? ? ? ? ? ? font-size: 36px;
? ? ? ? }
? ? ? ? li[id=b]{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? li[class]{
? ? ? ? ? ? color: aquamarine;
? ? ? ? }
? ? ? ? li[class=class1]{
? ? ? ? ? ? background-color: brown;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <ul>
? ? <li id="a">1</li>
? ? <li id="b">2</li>
? ? <li text="自定義">3</li>
? ? <li>4</li>
? ? <li>5</li>
? ? <li>6</li>
? ? <li class="class1">7</li>
? ? <li class="class2">8</li>
? ? <li>9</li>
? ? <li>10</li></ul>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
3.文本常用樣式
顏色
背景顏色
字體
字號
行距
字間距
縮進(jìn)
行寬度，高度
水平對齊
陰影等
更多其他
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? body{
? ? ? ? ? ? font-size: 18px; /*改變字體大小*/
? ? ? ? ? ? font-family: 宋體; /*改變字體*/
? ? ? ? }
? ? ? ? #p1{
? ? ? ? ? ? color: green; /*調(diào)節(jié)字體顏色*/
? ? ? ? ? ? background-color: bisque;? /*調(diào)節(jié)背景顏色*/
? ? ? ? }
? ? ? ? #p2{
? ? ? ? ? ? height: 100px; /*調(diào)節(jié)高度*/
? ? ? ? ? ? line-height: 50px; /*調(diào)節(jié)行高*/
? ? ? ? ? ? background-color: aqua;
? ? ? ? }
? ? ? ? #p3{
? ? ? ? ? ? text-align: center; /*調(diào)節(jié)水平居中*/
? ? ? ? ? ? text-shadow: aquamarine 5px 15px 1px; /*文字陰影，第一個(gè)是水平偏移，第二個(gè)是垂直偏移，第三個(gè)是模糊*/
? ? ? ? }
? ? ? ? #p4{
? ? ? ? ? ? letter-spacing: 1px; /*調(diào)節(jié)字母距，中文字距*/
? ? ? ? ? ? text-indent: 2rem; /*縮進(jìn)2字*/
? ? ? ? ? ? word-spacing: 1rem; /*詞距離*/
? ? ? ? }
? ? ? ? #p5{
? ? ? ? ? ? width: 50rem; /*限制寬度可放字?jǐn)?shù)*/
? ? ? ? ? ? background-color: rgb(184, 115, 12);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p id="p1">超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠(yuǎn)的某臺計(jì)算機(jī)上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接，為人們查找，檢索信息提供方便。</p>
? ? <p id="p2">HTML的英文全稱是 Hyper Text Markup Language，即超文本標(biāo)記語言。HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言，它是標(biāo)準(zhǔn)通用化標(biāo)記語言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。使用HTML語言，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現(xiàn)在所見到的網(wǎng)頁。</p>
? ? <p id="p3">自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網(wǎng)頁文件的語言，通過標(biāo)記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內(nèi)容顯示出來。事實(shí)上，每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，只是一種排版網(wǎng)頁中資料顯示位置的標(biāo)記結(jié)構(gòu)語言，易學(xué)易懂，非常簡單。HTML的普遍應(yīng)用就是帶來了超文本的技術(shù)―通過單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，與世界各地主機(jī)的文件鏈接超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)</p>
? ? <p id="p4">超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。</p>
? ? <p id="p5">HTML是用來標(biāo)記Web信息如何展示以及其他特性的一種語法規(guī)則，它最初于1989年由GERN的Tim Berners-Lee發(fā)明。HTML基于更古老一些的語言SGML定義，并簡化了其中的語言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數(shù)據(jù)，所以很早就得到各個(gè)Web瀏覽器廠商的支持。</p>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243
4.列表與鏈接常用樣式
愛恨原則
取消下劃線
列表取消默認(rèn)樣式
父元素li加樣式
更多
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #u li {
? ? ? ? ? ? margin-top: 10px;/*頂部間距*/
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? ? ? width: 6rem;
? ? ? ? ? ? height:35px;
? ? ? ? ? ? line-height: 35px;?
? ? ? ? ? ? border-radius: 15px; /*設(shè)置圓角*/
? ? ? ? ? ? border-bottom: 1.5px solid; /*底部邊框*/
? ? ? ? ? ? list-style: none; /*列表取消默認(rèn)樣式*/
? ? ? ? ? ? text-align: center; /* 設(shè)置文本居中 */
? ? ? ? }
? ? ? ? #u li a{
? ? ? ? ? ? color: black;
? ? ? ? ? ? text-decoration: none; /*取消下劃線*/
? ? ? ? }
? ? ? ? #u li a:link{/*未訪問時(shí)的普通鏈接*/
? ? ? ? ? ? color: black;
? ? ? ? }
? ? ? ? #u li a:visited{/*訪問過后*/
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #u li:hover{/*鼠標(biāo)放上去時(shí)*/
? ? ? ? ? ? background-color: yellowgreen;
? ? ? ? }
? ? ? ? #u li a:active{/*點(diǎn)擊時(shí)*/
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <ul id="u">
? ? ? ? <li><a href="#1">超鏈接1</a></li>
? ? ? ? <li><a href="#2">超鏈接2</a></li>
? ? ? ? <li><a href="#3">超鏈接3</a></li>
? ? ? ? <li><a href="#4">超鏈接4</a></li>
? ? ? ? <li><a href="#5">超鏈接5</a></li>
? ? ? ? <li><a href="#6">超鏈接6</a></li>
? ? ? ? <li><a href="#7">超鏈接7</a></li>
? ? ? ? <li><a href="#8">超鏈接8</a></li>
? ? </ul>?
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
5.背景圖像應(yīng)用與漸變
背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 800px;
? ? ? ? ? ? background-image: url("https://tse2-mm.cn.bing.net/th/id/OIP.Y_REHAvabXSUWA_m0yEpKQHaEo?pid=Api&rs=1");
? ? ? ? ? ? border: 1px solid;
? ? ? ? }/* 默認(rèn)是鋪滿容器*/
? ? ? ? #box1{
? ? ? ? ? ? background-repeat: repeat-x;
? ? ? ? }/* 橫向重復(fù)*/
? ? ? ? #box2{
? ? ? ? ? ? background-repeat: repeat-y;
? ? ? ? }/* 縱向重復(fù)*/
? ? ? ? #box3{
? ? ? ? ? ? background-repeat: no-repeat;
? ? ? ? }/* 不重復(fù)*/
? ? ? ? #box4{
? ? ? ? ? ? background-repeat: no-repeat;
? ? ? ? ? ? background-size: 100%; /*不重復(fù)橫向鋪滿*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box1"></div>
? ? <div id="box2"></div>
? ? <div id="box3"></div>
? ? <div id="box4"></div>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435
顏色漸變
專業(yè)詳細(xì)
調(diào)色漸變網(wǎng)站效率copy
調(diào)色漸變網(wǎng)站效率copy2
6.盒子模型
margin：外邊距（往外擠）
boder：邊框(內(nèi)外邊界)
padding：內(nèi)邊距（往里邊擠）
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{ /*初始化,去掉默認(rèn)盒子模型樣式*/
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? #box{
? ? ? ? ? ? border: 1px solid black; /* 邊框1px 實(shí)線 黑色*/
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? font:24px 楷體;
? ? ? ? ? ? margin: auto; /*快速居中*/
? ? ? ? }
? ? ? ? #box div{
? ? ? ? ? ? margin: 20px 75px; /*上下邊距20px 左右邊距75px*/
? ? ? ? }
? ? ? ? #box div:last-child{
? ? ? ? ? ? text-align: center; /*最后一個(gè)盒子(按鈕)設(shè)置文本居中*/
? ? ? ? }
? ? ? ? #box div input:nth-child(2){
? ? ? ? ? ? height: 22px; /*輸入框高度22px*/
? ? ? ? }
? ? ? ? input[type="submit"]{
? ? ? ? ? ? height: 30px; /*按鈕高度30px*/
? ? ? ? ? ? width: 80px; /* 寬度80px*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box">
? ? ? ? <div>
? ? ? ? ? ? <span>賬號</span>
? ? ? ? ? ? <input type="text">
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? <span>密碼</span>
? ? ? ? ? ? <input type="password">
? ? ? ? </div>
? ? ? ? <div><span><input type="submit" value="登錄">
? ? ? ? </span>
? ? </div>?
? ? </div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
元素占用寬度 = margin+border+padding+內(nèi)容寬度
6.2.圓角邊框
border-radius: 0 0 0 0 ; (分別對應(yīng)四個(gè)角)
border-radius: 100 ; (如果只設(shè)置一個(gè)直接作用于四個(gè)角)
border-radius: 100 50 ;（如果只設(shè)置兩個(gè)則分別對應(yīng) 左上右下 右上左下）
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .app{
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? margin-left: 20px;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .app2{
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? margin-left: 20px;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .app3{
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? margin-left: 20px;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .class1{ /*直接變成一個(gè)圓*/
? ? ? ? ? ? border-radius: 100px;
? ? ? ? }
? ? ? ? .class2{ /*直接變成一個(gè)橢圓*/
? ? ? ? ? ? border-radius: 100px 0;
? ? ? ? }
? ? ? ? .class3{ /*直接變成一個(gè)門型*/
? ? ? ? ? ? border-radius: 100px 100px 0 0;
? ? ? ? }
? ? ? ? .class4{/*圓角矩形*/
? ? ? ? ? ? border-radius: 10px 10px 10px 10px;
? ? ? ? }
? ? ? ? .class5{/*半圓*/
? ? ? ? ? ? border-radius: 50px 50px 0 0;
? ? ? ? }
? ? ? ? .class6{/*側(cè)邊半圓*/
? ? ? ? ? ? border-radius: 50px? 0 0 50px;
? ? ? ? }
? ? ? ? .class7{/*1/4 圓扇形*/
? ? ? ? ? ? border-radius: 100px? 0 0 0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class=" app class1 "></div>
? ? <div class=" app class2"></div>
? ? <div class=" app class3 "></div>
? ? <div class=" app class4 "></div>
? ? <div class=" app2 class5 "></div>
? ? <div class=" app3 class6 "></div>
? ? <div class=" app class7 "></div>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
實(shí)際應(yīng)用案例
圓形頭像
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? img{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border-radius:100px ;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <img src="https://i2.hdslb.com/bfs/face/00413d88b0fb54c1681cceb72d11c9ef0ca6a031.jpg_64x64.jpg" alt="">
</body>
</html>
123456789101112131415161718
6.3 盒子陰影
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #box{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border-radius: 100px;
? ? ? ? ? ? border: 3px solid rosybrown;
? ? ? ? ? ? box-shadow:5px 1px 5px rgb(185, 113, 125);? /*盒子陰影 右偏移量 下偏移量 模糊度 顏色*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box"></div>
</body>
</html>
1234567891011121314151617181920
7.浮動
行內(nèi)元素 (寬度由內(nèi)容撐開,不會獨(dú)占一行)
塊元素 (寬高由內(nèi)容撐開，可以設(shè)置寬高，獨(dú)占一行)
行內(nèi)塊級元素(不會獨(dú)占一行的塊級元素)
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? width: 800px;
? ? ? ? }
? ? ? ? li{
? ? ? ? ? ? padding: 0 30px;
? ? ? ? ? ? display: inline-block; /*設(shè)置為行內(nèi)塊級元素*/
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? }
? ? ? ? li:hover{
? ? ? ? ? ? background-color: rgb(238, 12, 12);
? ? ? ? }
? ? ? ? li a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? color: black;
? ? ? ? ? ? font-size: 20px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <ul>
? ? ? ? <li><a href="#">首頁</a></li>
? ? ? ? <li><a href="#">新品</a></li>
? ? ? ? <li><a href="#">熱賣</a></li>
? ? ? ? <li><a href="#">折扣</a></li>
? ? ? ? <li><a href="#">粉絲精選</a></li>
? ? ? ? <li><a href="#">關(guān)于</a></li>
? ? ? ? <li><a href="#">退出</a></li>
? ? </ul>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243
左、右浮動與清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #box{
? ? ? ? ? ? background-color: rgb(211, 165, 165);
? ? ? ? }
? ? ? ? #box div:first-child{
? ? ? ? ? ? float: left; /*左浮動*/
? ? ? ? }
? ? ? ? #box div:nth-child(2){
? ? ? ? ? ? float: left; /*左浮動*/
? ? ? ? }
? ? ? ? #box div:last-child{
? ? ? ? ? ? float: right;
? ? ? ? }
? ? ? ? img{
? ? ? ? ? ? width: 300px;
? ? ? ? }
? ? ? ? #box div:last-child{
? ? ? ? ? ? clear: both; 清除兩邊浮動
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box">
? ? <span>我是box盒子，我是非浮動的</span>
? ? <div><img src="https://tse1-mm.cn.bing.net/th/id/OIP.MASmSGUEiRwOc86zsRb1OwHaEK?pid=Api&rs=1" alt=""></div>
? ? <div><p>
? ? ? ? 1、南方的八月間，驕陽似火。中午時(shí)分，太陽把樹葉都曬得卷縮起來。知了扯著長聲聒個(gè)不停，給悶熱的天氣更添上一層煩燥。
? ? </p></div>
? ? <div><img src="http://www.08lr.cn/uploads/allimg/170607/1-1F60GA955.jpg" alt=""></div>
? ? </div>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738
父級元素塌陷問題
解決方法：
給腹肌元素增加一個(gè)height
再套一個(gè)空的div，并清除該盒子的浮動或者加一個(gè)偽類元素after，before
如果出現(xiàn)內(nèi)容超出邊界的問題，可以使用樣式 overflow: scroll; 設(shè)置為滾動條
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? p{
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? padding: 0 20px;
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? }
? ? ? ? p:nth-child(4),p:nth-child(7),p:nth-child(10){
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? #box{
? ? ? ? ? ? border: 1px solid;
? ? ? ? }?
? ? ? ? #clear{
? ? ? ? ? ? clear: both; /* 通過空盒子清除浮動來保證父盒子不會塌陷*/
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }? ?
? ? ? ? #box2 p{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? overflow: scroll; /*如果超出邊界用增加一個(gè)滾動條*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box">
? ? ? ? <p>1</p>
? ? ? ? <p>2</p>
? ? ? ? <p>3</p>
? ? ? ? <p>4</p>
? ? ? ? <p>5</p>
? ? ? ? <p>6</p>
? ? ? ? <p>7</p>
? ? ? ? <p>8</p>
? ? ? ? <p>9</p>
? ? ? ? <p>10</p>
? ? ? ? <p>11</p>
? ? ? ? <p>12</p>
? ? ? ? <div id="clear"></div>
? ? </div>
? ? <div id="box2">
? ? ? ? <p>1、南方的八月間，驕陽似火。中午時(shí)分，太陽把樹葉都曬得卷縮起來。知了扯著長聲聒個(gè)不停，給悶熱的天氣更添上一層煩燥。
? ? ? ? </p>
? ? </div>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
8.定位
8.1相對定位
position: relative; 基于原來的位置進(jìn)行定位
top: -20px; left: 10px;right: 20px;bottom: -50px;
相對定位不會脫離標(biāo)準(zhǔn)文檔流，原來位置保留
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 250px;
? ? ? ? ? ? margin: auto;
? ? ? ? ? ? border: 1px solid;
? ? ? ? }
? ? ? ? .a1{
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? border: 1px solid;
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? top: -20px;
? ? ? ? ? ? left: 10px;
? ? ? ? }
? ? ? ? .a2{
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? border: 1px solid;
? ? ? ? ? ? background-color: rgb(207, 157, 91);
? ? ? ? }
? ? ? ? .a3{
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? border: 1px solid;
? ? ? ? ? ? background-color: rgb(168, 99, 9);
? ? ? ? ? ? position: relative;
? ? ? ? ? ? right: 20px;
? ? ? ? ? ? bottom: -50px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>
? ? ? ? <p class="a1"></p>
? ? ? ? <p class="a2"></p>
? ? ? ? <p class="a3"></p>
? ? </div>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
8.2絕對定位
基于xxx進(jìn)行定位
position: absolute; 不在標(biāo)準(zhǔn)文檔流中，原來位置會丟失
如果父元素沒有定位則會相對于瀏覽器進(jìn)行定位，所以一般我們把父元素設(shè)置為相對定位（子絕父相）
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #app{
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? p{
? ? ? ? ? ? width: 110px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? }
? ? ? ? #app p:first-child{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? background-color: aqua;
? ? ? ? ? ? left: 400px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app">
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? </div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536
8.3固定定位
固定定位會一直定在瀏覽器的某一個(gè)地方
position: fixed; /固定定位/
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? body{
? ? ? ? ? ? height: 2000px;
? ? ? ? }
? ? ? ? #app1{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: aqua;
? ? ? ? ? ? position: absolute;/*絕對定位*/
? ? ? ? ? ? right: 0;
? ? ? ? ? ? bottom: 0;
? ? ? ? }
? ? ? ? #app2{
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? background-color: rgb(32, 223, 7);
? ? ? ? ? ? position: fixed;/*固定定位*/
? ? ? ? ? ? right: 0;
? ? ? ? ? ? bottom: 0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app1"></div>
? ? <div id="app2"></div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233
?
9.Z-index與透明
z-index類似于PS中的圖層
越是底層數(shù)字越小，層級向上層數(shù)字逐次增加
透明度設(shè)置(opacity)屬性
還可以通過rgb的第四個(gè)參數(shù)來實(shí)現(xiàn)透明度
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? #app{
? ? ? ? ? ? width: 325px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? border: 1px solid;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? #app div p{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? bottom: 80px;
? ? ? ? ? ? font-size: 48px;
? ? ? ? ? ? padding: 0 113px;
? ? ? ? ? ? color: white;
? ? ? ? ? ? background-color: rgba(0, 0, 0, 0.418); /*設(shè)置透明度*/
? ? ? ? ? ? /* opacity: 0.5; 設(shè)置透明度 */
? ? ? ? ? ? z-index: 0; /*設(shè)置為最底層*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app">
? ? ? ? <div><img src="https://tse4-mm.cn.bing.net/th/id/OIP.qrW9tphUIlHLMj4xDop9QAHaEK?w=294&h=180&c=7&o=5&dpr=1.1&pid=1.7" alt=""></div>
? ? ? ? <div><p>Java</p></div>
? ? </div>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738
10.CSS動畫
插好眼了可以傳送
CSS原生動畫雖然可以實(shí)現(xiàn)，但是實(shí)現(xiàn)起來比較復(fù)雜，我們完全可以用JavaScript代替，但是CSS的效率會更高。
甚至一些3D動畫，用JavaScript難以實(shí)現(xiàn)。
