css筆記

@author:杜勇帥

CSS是層疊樣式標的簡稱，版本有：CSS1、CSS2和CSS3，其中CSS3是最新版本 CSS的核心作用： ? 1)實現對網頁的美化操作 ? 2)實現內容和表現樣式相分離

選擇器 { 樣式名1 : 樣式值1; 樣式名2 : 樣式值2; 樣式名3 : 樣式值3; } 選擇器，選中文檔中的某些標籤！樣式：由「樣式名」和「樣式值」組成，中間以「:」連接每條樣式有分號「;」結尾。

1引入樣式方式

? 行內樣式，幾乎不使用，無法實現內容和表現樣式相分離。 ? 1)給需要添加樣式的標籤新增一個style屬性 ? 2)給style設置屬性值。屬性值格式和選擇器中的格式一模一樣寫！ ? 示例：

我是一個段落標籤

? 內部樣式 ? 在style標籤中，使用選擇器選中某些標籤，然後再選擇器的大括弧中寫想要樣式 ? 外部樣式 ? 1)新建一個.css文件，在css文件中選中標籤並設置好樣式 ? css文件中代碼的格式和style標籤中的代碼格式一樣！ ? 2)使用link標籤，把css文件引入到HTML文檔中。 ? css和html文件向關聯了 ? 注意事項： ? 1)「行內樣式」無法實現內容和表現樣式相分離,開發中幾乎不用！ ? 2)「內部樣式」和「外部樣式」實現了內容和表現樣式相分離，所以開發中經常使用！ ? 思考：實際開發中，如何正確的選擇使用「內部樣式」或「外部樣式」呢？ ? 內部樣式 ? 優點：css樣式代碼和html文件一起從伺服器下載，減輕了對伺服器請求的次數，降低了伺服器壓力 ? 缺點：無法實現css代碼的復用 ? 外部樣式 ? 優點：可以實現css代碼的復用 ? 缺點: css文件需要單獨進行網路下載，增加了伺服器的壓力！

<style> /*內部樣式*/ h1 { /*設置背景顏色 --> bgcolor屬性*/ background-color: yellow; /*設置文本居中對齊 --> align屬性*/ text-align: center; } </style>  <link rel="stylesheet" href="css/index.css"> </head> <body>  <p stylex="font-size: 40px; color: red">我是一個段落標籤</p> <h1>我是一個標題標籤</h1> <div>我是一個帥氣的div</div> </body>

引入樣式的優先順序 ? 1)行內樣式的優先順序最高！ ? 2)誰離得近，誰的優先順序就越高！

<head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="css/index.css"> <style> h1 { background-color: red; } </style> </head> <body>  <h1>我是一個標題標籤</h1> </body>

2 長度單位： ? 絕對長度單位，cm，m，km，mm ? 相對長度單位，px，%，em ? %，參照父元素的寬度和高度 ? em，一個1em指的就是一個文字的寬度或高度 ? 常用於設置字體大小。 ? web前端開發中，都是使用的相對長度單位。

p { background-color: red; width: 4em; font-size: 1.5em; } .parent { /*設置寬度*/ width: 400px; /*設置高度*/ height: 200px; /*設置背景顏色*/ background-color: red; }

.child {
width: 50%;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<p>四個文字</p>
<hr>

3 顏色單位 ? 1)使用英文單詞來表示顏色，例如：red,blue,green,yellow,pink,black ? transparent, 代表透明顏色 ? 2)使用rgb來表示顏色，例如：rgb(red的取值, green的取值, blue的取值) ? r--red紅色； g--green綠色； b--blue藍色 ? 注意：rgb的取值範圍：[0, 255]之間 ? rgb(255, 0, 0)紅色；rgb(0, 255, 0)綠色 ? rgb(0, 0, 0)黑色;rgb(255, 255, 255)白色 ? 3)使用rgba來表示顏色,例如：rgba(132, 145, 255, 0.3) ? a--透明度，取值範圍：[0.0, 1.0] ? 4)使用16進位表示顏色。例如：#2e3f4a,等效於：rgb(46, 63, 74)

? 2e 3f 4a

? red green blue ? 46 63 74 ? #333333可以簡寫為：#333 ? #aabbcc可以簡寫為：#abc

? a b c

? aa bb cc ? #fff代表白色, #000代表黑色 ? #f00代表紅色 ? 記住：十六進位FF對應的十進位取值就是255

.box { width: 200px; height: 200px; /*background-color: transparent;*/ /*background-color: rgb(255, 255, 255);*/ /*background-color: rgba(0, 0, 0, 0.00);*/ background-color: #f00; }

2css選擇器

選擇器：用來選中html文檔中的符合條件的標籤 ? 基礎選擇器： ? 標籤選擇器，可以選中的個數是任意多個！ ? 使用「標籤名」來選中。 ? class選擇器，可以選中的個數是任意多個！ ? 1)給標籤添加class屬性 ? 2)使用「.class屬性值」來選擇符合條件的標籤 ? 注意點： ? 1)一個標籤只能添加一個class屬性，但是class屬性值可以有多個，每個class屬性值以空格分割！ ? 原因：方便復用css代碼 ? 2)class屬性值如果由多個單片語成，那麼每個單詞以「_」或「-」聯接！ ? id選擇器，唯一的，在W3C的規範中最多隻能選中一個！ ? 1)給標籤添加id屬性 ? 2)使用「#id屬性值」來選擇符合條件的標籤 ? 注意點： ? 1)在一個文檔中，id屬性值不能相同！ ? 通配符選擇器 ? 使用「*」來選中,會選中文檔中所有的標籤。

*/ * { font-size: 30px; }

/*#box {
background-color: yellow;
}*/

/*需求：文檔中class="box"的需要添加字體顏色和字體大小樣式
<p>我是一個段落標籤1</p>還需要添加字體顏色、字體大小樣式和背景顏色樣式
*/
/*.block {
background-color: red;
}
.box {
font-size: 40px;
color: blue;
}*/

/*span {
background-color: yellow;
}*/
</style>
</head>
<body>
<p class="box block">我是一個段落標籤1</p>
<div class="box">我是一個div標籤</div>
<p id="box">我是一個段落標籤2</p>
<h1 class="box">我是一個標題標籤</h1>
<p>我是一個段落標籤3</p>

關係選擇器 ? 交集選擇器 ? 語法：選擇器1選擇器2 ? 作用：當兩個選擇器條件都滿足的時候，才會被選中 ? 並集選擇器 ? 語法：選擇器1, 選擇器2 ? 作用：只要符合任意一個選擇器的條件，那麼就選中 ? 後代選擇器 ? 語法：選擇器1 選擇器2 ? 作用：在「選擇器1」中去找符合「選擇器2」條件的子孫後代 ? 親子選擇器 ? 語法：選擇器1>選擇器2 ? 作用：在「選擇器1」中去找符合「選擇器2」條件的親兒子

#main > .box { background-color: red; }

/*#main .box {
background-color: red;
}*/

/*#block, .box {
background-color: red;
}*/

/*h1.box {
background-color: red;
}*/
</style>
</head>
<body>
<p class="box">我是一個段落標籤2</p>
<div id="main">
<span>我是一個span標籤</span>
<h1 class="box">我是一個h1標籤1</h1>
<div>
<strong class="box">我是一個strong標籤</strong>
<p id="block">我是一個段落標籤1</p>
<h1>我是一個h1標籤2</h1>
</div>
<p class="box">我是一個段落標籤2</p>
</div>

屬性選擇器 ? 需求一：選中擁有type屬性的標籤 ? 語法：[atrr] ? 需求二：選中type="password"的標籤 ? 語法：[attr="value"]

屬性選擇器和別的選擇器一起配合使用： ? 需求：只用title屬性名來選中上盒子 ? div[title]

/*[type="password"] { border: 1px solid red; }*/

/*[type] {
!*設置邊框樣式*!
border: 1px solid red;
}*/
div, p {
width: 200px;
height: 200px;
background-color: red;
}
div[title] {
background-color: yellow;
}
</style>
</head>
<body>
<input type="password">
<input type="text">
<br><br>
<div class="box" title="上盒子"></div>
<p id="block" title="下盒子"></p>

4偽類選擇器

:hover, 滑鼠懸浮在標籤上的狀態

:active, 元素在滑鼠按下時的狀態

.block:hover { color: red; } [href]:hover { color:red; }

.block:active {
color: yellow;
}
[href]:active {
color:yellow;
}

</style>
</head>
<body>
<div class="block">我是一個div標籤</div>
<br>
<a href="#">百度一下</a>
</body>

單個選擇器的優先順序 ? 默認 < 繼承 < 通配符 < 標籤選擇器 < class選擇器 < id選擇器 < !important

示例：background-color: blue !important;

單個優先順序相同的時候，優先順序會怎麼樣？？ ? 遵守：誰離的近，誰的優先順序就越高！

#box { background-color: pink; } .box { background-color: yellow; } p { background-color: blue !important; } * { font-size: 20px; !*background-color: red;*! }

body {
font-size: 30px;
}*/
p {
background-color: red;
}
p {
background-color: yellow;
}

</style>
</head>
<body>
<p class="box" id="box">我是一個段落標籤</p>
</body>

多個選擇器的優先順序 ? 先比較id的個數，誰的id多那麼誰的優先順序就越高；如果id個數相同，則開始比較class的個數 ? 誰的class多那麼誰的優先順序就越高；如果class個數相同，則開始比較標籤的個數； ? 誰的標籤多那麼誰的優先順序就越高

? 多個優先順序相同的時候，優先順序會怎麼樣？？ ? 遵守：誰離的近，誰的優先順序就越高！

id：0 class：1 標籤：2 */ .box-first-class > div > div { background-color: yellow; } /*id：0 class：1 標籤：2 */ .box-first-class > div > div { background-color: red; }

? ? ? ?

? ? ? 我是一個div標籤 ?

? ?

3css常用屬性

完成漂亮網頁步驟 ? 步驟一：實現對每一個標籤做美化操作 ? a)選擇器，選中需要美化的標籤 ? b)給標籤添加樣式，執行美化的操作 ? 步驟二：實現度網頁的佈局操作

背景屬性 ? background-color,設置背景顏色，簡寫：bgc ? background-image,設置背景圖片，簡寫：bgi ? background-repeat, 設置背景圖片平鋪方式,簡寫：bgr ? background-size, 設置背景圖片大小,屬於CSS3新屬性 ? background-position,設置圖片位置

如何設置body的寬高和瀏覽器窗口一致？？？寬度默認和瀏覽器窗口一樣寬，我們只需要解決高度即可。高度：設置html和body的高度都是100%

{ margin: 0; padding: 0; } body { background-color: red; /*設置背景圖片*/ /*background-image: url(../CSS基礎語法/img/download.jpg);*/ background-image: url("../CSS基礎語法/img/download.jpg"); /*設置背景圖片平鋪方式 repeat-x,只允許橫向平鋪 repeat-y,只允許縱向平鋪 no-repeat,橫向和縱向都不允許平鋪 */ background-repeat: no-repeat; /*設置背景圖片大小使用長度單位來設置第一個參數：設置的是寬度第二個參數：設置的是高度使用關鍵字來設置 contain和cover,都是等比例拉伸，不會造成圖片失真 contain：保證背景圖片能夠全部展示在標籤內部中 cover: 保證圖片鋪滿整個標籤內部。作為瀏覽器窗口屏保！ */ /*-webkit-background-size: 300px 400px;*/ /*background-size:cover;*/

/*設置圖片位置
設置長度單位來設置
第一個參數：設置背景圖片與盒子左側的距離
第二個參數：設置背景圖片與盒子頂部的距離
使用關鍵字來設置,橫向+縱向
top、bottom、left、right、center
一般使用兩個關鍵字來確定位置
也可以使用一個關鍵字來設置位置，省略的關鍵字就是center
*/
background-position: 100px 200px;
/*background-position: center;*/

}
{
margin: 0;
padding: 0;
}
/*body, html {
height: 100%;
}*/
body {
height: 2000px;
}
body {
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
/*設置背景圖片固定定位
參照瀏覽器窗口
*/
background-attachment: fixed;
}

h1 {
text-align: center;
}

1.什麼是精靈圖？？？ ? 就是把很多小圖標集合到一張大的圖片上面 ? 2.為什麼需要精靈圖？？ ? 避免每個小圖標使用的時候都需要下載，打開網頁只需要下載一次即可 ? 減輕了對伺服器的壓力 ? 3.精靈圖如何使用？？？ ? a)使用【無語義話】的【行內元素】作為小圖標的載體 ? 因為行內元素無法設置寬高，所以此處我們暫時先用塊級元素替代！ ? b)給小圖標的載體添加背景相關的樣式 ? width: 和展示小圖標一樣寬 ? height: 和展示小圖標一樣高 ? background-image: 設置精靈圖的地址 ? background-position: 設置背景圖片的展示位置 ? background-repeat: 設置背景圖片不允許平鋪 ? 4.現在的精靈圖，已經別淘汰了！ ? 圖片太大，使用字體圖標更合適。 ? 推薦：https://www.iconfont.cn/home/index

.box { width: 14px; height: 17px; background-image: url(img/icons_5859e57.png); background-repeat: no-repeat; background-position: -623px -96px; }

.block {
height: 16px;
width: 24px;
/*background-color: red;*/
background-image: url(img/camera_new_5606e8f.png);
background-repeat:no-repeat;
}

.block:hover {
background-position: 0 -20px;
}
</style>
</head>
<body>
<div class="box"></div>
<br><br>
<div class="block"></div>
</body>

文本屬性

/設置字體顏色/ ? color: red; ? /設置字體大小/ ? font-size: 40px; ? /設置字體名稱 ? 字體可以用中文，也可以用英文 ? 字體名字可以用雙引號包裹，也可以不用雙引號包裹 ? / ? font-family: "微軟雅黑", "宋體",tahoma,arial,Hiragino Sans GB; ? /字體風格 ? italic,設置字體為斜體展示 ? / ? /font-style: italic;/ ? /設置字體粗細 ? 使用關鍵字來設置 ? bolder、bold 粗體 ? normal 正常字體 ? 使用數值來設置 ? 100,200,300,400,500 正常字體 ? 600,700,800,900 粗體 ? / ? font-weight: 200; ? /設置標籤透明度 ? 取值範圍：[0.0, 1.0] ? / ? /background-color: yellow;/ ? /opacity: 0.5;/ ? /文本對齊方式 ? left:左對齊，right：右對齊 ? center:居中對齊，justify：兩端對齊 ? / ? text-align: center; ? /字體裝飾 ? underline,底部添加一根橫線，類似於u標籤 ? overline,頂部添加一根橫線 ? line-through，中間添加一根橫線，展示效果類似於del標籤 ? none: 取消文本裝飾, 該屬性最重要！ ? / ? text-decoration: none;

/*設置字與字之間的間距。*/ letter-spacing: -5px; <style> .first { /*height: 80px;*/ background-color: yellow; /*需求：要求文本居於盒子上下左右居中*/ text-align: center; /*設置行高*/ line-height: 80px; /* 特點：盒子高度和行高一樣高，那麼就能設置內容上下居中注意：如果只設置了行高，沒有設置標籤高度，那麼該標籤的高度由行高來撐開！ */ } .second { width: 200px; height: 200px; background-color: yellow; /*overflow 屬性 hidden【重要】,當文本超出盒子時，隱藏超出部分的內容 scroll，無論文本有沒有溢出，都會底部和右側添加滾動條 auto【重要】, 當文本超出盒子時，對應在超出的方向添加滾動條 visible, 默認值。 */ overflow: auto; } p { background-color: yellow; width: 7em; /*實現溢出文本eclipsis的解決，讓溢出的文字以省略號顯示。需求：只允許展示一行文本，如果一行展示不下，那麼這一行的最後一個文字設置為... */ /*設置文本不能換行*/ white-space:nowrap; /*設置文本超出文本框時隱藏文本*/ overflow:hidden; /*用略符號來代表被修剪的文本*/ text-overflow:ellipsis; } </style> </head> <body> <p>好好學習，天天向上！</p> <br> <div class="first">我是一段文本</div> <br> <div class="second"> 2018年是極不平凡的一年。在實現「兩個一百年」奮鬥目標的道路上，我們滿懷信心、堅定前行，很辛苦、也很充實，有付出、更有收穫。中共中央團結帶領全黨全國各族人民，堅持穩中求進工作總基調，我國經濟增長保持在合理區間，社會大局保持穩定，人民羣眾獲得感、幸福感、安全感持續增強，實現了貫徹落實中共十九大精神開門紅。我們隆重慶祝改革開放40週年，這是一個偉大的歷史時期，在中國幾千年的歷史上，改革開放40年、中華人民共和國成立70年，這都是偉大的。總結改革開放偉大成就、寶貴經驗，堅定不移全面深化改革開放，全黨全國各族人民推進改革開放的決心信心更加堅定。這些成績來之不易，是中共中央堅強領導的結果，是全國各族人民團結奮鬥的結果，也凝結著包括在座各位同志在內的廣大政協委員的心血和智慧。 </div>

列表屬性

<style> ul { /*取消默認樣式 list-style-type作用於ul標籤上面 */ list-style-type: none; } </style> </head> <body> <ul> <li>武漢尚學堂</li> <li>北京尚學堂</li> <li>上海尚學堂</li> <li>深圳尚學堂</li> <li>廣州尚學堂</li> </ul>

css元素分類

補充：標籤我們也稱之為元素 ? 元素分類： ? 塊級元素 ? 例如：p,h1-h6,div,ul+li,ol+li,pre，body,html,hr ? 特點： ? 1)總在新的一行開啟，獨佔一行。 ? 一行有多寬？？？與盒子的實際寬度跟父盒子一樣寬！ ? 2)寬度(width)和高度(height)可以控制, 內邊距和外邊距全部可控制 ? 3)它可以容納內聯元素和其他塊元素。 ? 總結： ? a)獨佔一行 ? b)可設置寬高屬性 ? 行內元素 ? 例如：span,b,a,em,i,u,strong,sub,sup,del ? 特點： ? 1)可以和別的元素(排除塊級元素)共享一行 ? 2)寬度(width)只與內容有關,高度(height)不可設置, 內邊距和外邊距部分可控制 ? 3)行內元素只能容納文本或者其他行內元素。 ? 總結： ? a)共享一行 ? b)不能設置寬高屬性 ? 行內塊級元素 ? 例如：img、input ? 特點： ? 1)可以設置寬度和高度屬性 ? 2)可以和別的元素(排除塊級元素)共享一行

.box { width: 200px; height: 200px; background-color: yellow; } span { width: 200px; height: 200px; background-color: yellow; } img { width: 300px; } input { width: 200px; height: 45px; } </style> </head> <body> <img src="img/timg.jpg" alt=""> <input type="text">

display屬性 ? block, 把別的元素轉換為塊級元素 ? inline，把別的元素轉化為行內元素 ? inline-block，把別的元素轉化能為行內塊級元素

span { /*把行內元素轉化能為塊級元素*/ /*display: block;*/ display: inline-block; width: 200px; height: 100px; background-color: red; } div { /*把別的元素轉化為行內元素*/ /*display: inline;*/ display:inline-block; width: 200px; height: 100px; background-color: red; } </style> </head> <body> <span>我是一個span標籤</span> <a href="#">百度一下，你就曉得</a> <div>我是一個div標籤</div> <style> /*取消默認樣式*/ ul { list-style-type: none; } a { text-decoration: none; }

/*設置所有的li標籤並排顯示*/
ul > li {
/*把塊級元素轉化為行內塊級元素*/
display: inline-block;
/*建議：檢查一個元素的寬高，最好就是設置背景顏色*/
background-color: yellow;
}
ul > li > a {
display: inline-block;
/*設置元素寬度和高度*/
width: 120px;
height: 40px;
/*設置內容上下左右居中*/
text-align: center;
line-height: 40px;
/*設置字體顏色*/
color: black;
}

ul > li > a:hover {
color: red;
}

/*
問題：每個li標籤之間的空格哪來的？
解答：兩個行內元素中間有換行和空格，然後再瀏覽器上面就顯示出來了一個空格
問題：如何取消兩個行內塊級元素之間的空格？？
解決：看以下代碼！
*/
ul {
font-size: 0;
}
ul > li {
font-size: 15px;
}

/*
補充：實際開發中，幾乎不用inline-block來設置導航欄
原因：1)會出現空格
2)存在兼容性問題
建議：導航欄後期使用浮動來實現！
*/
</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>
</ul>

css定位屬性

文檔流：自窗體自上而下分成一行一行，並在每行中按從左到右的順序排放元素。 ? 每個元素在瀏覽口中都有自己的物理空間(位置)。 ? 定位技術 ? 生活中的定位： ? 參照物：哪個教室 ? 位置：top、bottom、left和right。橫向+縱向 ? 相對定位(relative) ? 參照物: 參照元素本身所在的位置 ? 位置:top、bottom、left和right。橫向+縱向 ? 有沒有脫離文檔流？？？沒有 ? 絕對定位(absolute) ? 參照物: 如果父類元素中沒有被定位過，那麼參照的就是body元素【很少用】 ? 如果父類元素中有被定位過，那麼參照的就是最近的那個被定位的父類元素【常用】 ? 口訣：子絕父相。子絕：子元素設置為絕對定位，父元素設置為相對定位 ? 位置:top、bottom、left和right。橫向+縱向 ? 有沒有脫離文檔流？？？有

? 相對定位

<style> div { display: inline-block; width: 200px; height: 200px; background-color: yellow; } .box { background-color: red; /*相對定位*/ position: relative; bottom: 100px; right: 100px; } </style> </head> <body> <div></div> <div class="box"></div> <div></div> </body>

絕對定位

<body>

<body>
<div class="parent">
<p>我是一個段落標籤</p>
<span>span+span</span>
<div class="child"></div>
<span>span</span>
</div>
</body>

固定定位

<style> body { height: 1000px; } div { width: 100px; height: 100px; background-color: yellow; position: fixed; right: 10px; bottom: 10px; } </style> <body> <div></div> <span>sjajsljalkjs</span> </body>

z-index屬性 ? 提前：只能作用於被定位過的元素身上。 ? 作用：用於改變元素的層疊方式。 ? 取值：一般在個位數區間，可以是正數也可以是負數，數值越大則標籤離眼睛就越近

.first {
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="box"></div>
<div></div>
</body>

浮動：就是把一系列元素並排顯示，並且可以設置元素的朝著左對齊還是右對齊 ? left，左對齊; right，右對齊 ? 使用場合：導航欄！ ? 注意點： ? 如果被浮動的元素後面接的是文本內容，那麼文本內容會包裹被浮動的元素。【很少使用】 ? 如果被浮動的元素後面接的不是文本內容，那麼浮動的元素會展示在後續元素的上面。 ? 元素浮動之後，有沒有脫離文檔流？？？有 ? 元素浮動之後，一定要記得清除浮動！ ? 使用clear屬性來實現清除浮動 ? 實現步驟： ? 1)先建一堵牆，需要在浮動元素後面添加一個塊級元素 ? 2)選中這個牆，然後添加clear屬性來清除 ? left: 清除左浮動; right: 清除右浮動; both: 清除左右浮動 ? 3)做浮動之後的優化操作 ? font-size: 0; ? line-height: 0; ? height: 0; ? opacity: 0; ? 以上實現清除浮動的方式，就是：隔牆法

<style> .box { width: 100px; height: 50px; background-color: yellow; font-size: 30px; text-align: center; line-height: 50px; /*設置浮動*/ float: right; } .clearfix { clear: both; /*浮動之後的優化操作*/ font-size: 0; line-height: 0; height: 0; opacity: 0; }

#block {
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box" stylex="background-color:blue;">2</div>
<div class="box">3</div>
<div class="box" stylex="background-color:blue;">4</div>
<div class="box">5</div>

<div class="clearfix">111</div>

<div id="block"></div>

</body>

定位和浮動結合

<style> /*清除默認樣式*/ ul { list-style-type: none; } a { text-decoration: none; } /*設置li標籤並排顯示*/ .list > li { float: left; } /*設置a標籤的樣式*/ .list > li > a { display: inline-block; width: 100px; height: 35px; text-align: center; line-height: 35px; }

/*設置背景圖片*/
.list-tips > i {
display: inline-block;
width: 27px;
height: 19px;
background-image: url(hot/hot1.gif);
background-repeat: no-repeat;
/*設置絕對定位*/
position: absolute;
top: -9px;
right: 7px;
}
.list-tips {
position: relative;
}
</style>
</head>
<body>
<ul class="list">
<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 class="list-tips"> 
<a href="#">開班計劃</a>
<i></i> 
</li>
<li><a href="#">報名流程</a></li>
</ul>
</body>

隱藏元素的方式 ? 方式一：設置opacity=0 ? 只隱藏了元素，但是元素的物理空間還在 ? 方式二：設置visibility=hidden ? 只隱藏了元素，但是元素的物理空間還在 ? 方式三：設置display=none ? 不但隱藏了元素，並且元素的物理空間也不在了

現實開發中，使用方式三非常常見。 ? 顯示：設置display值為block或inline-block ? 隱藏：設置display值為none

<style> div { width: 200px; height: 200px; background-color: yellow; } .block { background-color: orange; } .box { /*opacity: 0;*/ /*visibility: hidden;*/ display: none; } </style> </head> <body> <div class="box"></div> <div class="block"></div> </body>

<span>sas</span> <a href="#">百度一下，你就知道</a>
<br>
<div class="box"></div>
</body>
display屬性
block, 把別的元素轉換為塊級元素
inline，把別的元素轉化為行內元素
inline-block，把別的元素轉化能為行內塊級元素
*/
span {
/*把行內元素轉化能為塊級元素*/
/*display: block;*/
display: inline-block;
width: 200px;
height: 100px;
background-color: red;
}
div {
/*把別的元素轉化為行內元素*/
/*display: inline;*/
display:inline-block;
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<span>我是一個span標籤</span>
<a href="#">百度一下，你就曉得</a>
<div>我是一個div標籤</div>

用元素轉換製作導航欄

<style> /*取消默認樣式*/ ul { list-style-type: none; } a { text-decoration: none; }

ul > li > a:hover {
color: red;
}

4盒子模型

/ ? 內容區(content)：展示內容用的 ? width屬性和height屬性，設置的是內容區的寬高 ? 背景顏色能夠顯示在內容區上面的。 ? / ? width: 200px; ? height: 200px; ? / ? 內邊距(padding) ? 設置內邊距的方式： ? a)使用padding屬性來合寫 ? b)上下左右分別設置內邊距 ? 使用場合： ? 詳情請查看代碼 ? 背景顏色能夠顯示在內邊距上面的。 ? / ? /設置內邊距合寫/ ? /左上右下順時針/ ? / padding: 20px 30px 40px 50px;/ ? /上左右下/ ? /padding: 20px 40px 50px;/ ? /上下左右 / ? /padding: 20px 50px;/ ? /上下左右 / ? padding: 20px;

/*上下左右分別設置內邊距*/ /*padding-left: 20px; padding-top: 30px; padding-right: 40px; padding-bottom: 50px;*/

/*邊框(border)
邊框三要素：
寬度、樣式、顏色
設置邊框的方式：
按照三要素來設置
border-width、border-style、border-color
按照四個方向分別設置
border-left、border-right、border-top、border-bottom
四個方向同時設置
border: 20px solid blue;
使用場合：
詳情請查看代碼
背景顏色能夠顯示在邊框上面的。
*/
/*四個方向同時設置*/
border: 20px dashed blue;

/*按照四個方向分別設置*/
/*border-left: 20px solid yellow;
border-right: 20px solid blue;
border-top: 20px solid orange;
border-bottom: 20px solid green;*/

/*按照三要素來設置*/
/*border-width: 10px;*/
/*solid：實線, dashed：虛線， double:雙線*/
/*border-style: double;*/
/*border-color: blue;*/

/*外邊距(margin)
設置外邊框的方式：
分別對四個方向的外邊距進行設置
設置外邊距合寫
使用場合：
詳情請查看代碼
背景顏色不能展示在外邊距上面!!!!
*/
/*設置外邊距合寫*/
/*左上右下順時針*/
/*margin: 20px 30px 40px 50px;*/
/*上左右下*/
/*margin: 20px 40px 50px;*/
/*上下左右 */
/*margin: 20px 50px;*/
/*上下左右*/
margin: 20px;

/*分別對四個方向的外邊距進行設置*/
/*margin-left: 20px;
margin-top: 30px;
margin-right: 40px;
margin-bottom: 50px;*/

{ margin: 0; padding: 0; } ? / ? 切記：寫demo之前，一定要清除默認樣式。 ? 如果寫的是項目，那麼需要使用reset.css文件。 ? /

<head> <meta charset="UTF-8"> <title>Title</title> <style> .parent { width: 600px; height: 400px; background-color: yellow; position: relative; } .child { width: 200px; height: 200px; background-color: blue; } /*設置子盒子居於父盒子上下左右居中*/ .child { /*第一步：設置子盒子的左上角點為父盒子的中心點*/ position: absolute; top: 50%; left: 50%; /*第二步：設置子盒子的中心點就是父盒子的中心點*/ margin-left: -100px; margin-top: -100px; /*注意：margin的取值可以是正數，也可以是負數*/ } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body>

行內元素的盒子模型 ? 1.內容區 ? 無法設置寬(width)高(height) ? 2.內邊距 ? 左右可控，上下不可控 ? 3.邊框 ? 上下左右皆可控制 ? 4.外邊距 ? 左右可控，上下不可設置行內塊級元素的盒子模型 ? 與塊級元素一樣，皆可控制！

元素的實際寬高：寬度 = 內容區寬度 + 左右padding區寬度 + 左右border區寬度 + 左右margin區寬度高度 = 內容區高度 + 上下padding區高度 + 上下border區高度 + 上下margin區高度 -->

<head> <meta charset="UTF-8"> <title>Title</title> <style> span { display: inline-block; background-color: yellow; padding: 40px; border: 10px solid red; margin: 30px; } </style> </head> <body>  <span>我是一個span標籤</span>

5css3教程

<style> .box { width: 400px; height: 200px; background-color: red; /*設置圓角設置的長度單位可以是px和% %，一般用於設置橢圓 */ /*border-radius: 100px;*/ /*左上右上右下左下*/ /*border-radius: 20px 40px 60px 80px;*/ /*左上右上和左下右下*/ /*border-radius: 20px 50px 80px;*/ /*左上右下右上左下*/ /*border-radius: 20px 80px;*/

border-radius: 50%;
}

.first {
width: 200px;
height: 100px;
background-color: blue;
border-radius: 100px 100px 0 0;
}

.second {
width: 200px;
height: 200px;
background-color: green;
border-radius: 200px 0 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<div class="first"></div>
<br>
<div class="second"></div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
margin: 40px;
/*設置盒子陰影*/
/*橫向縱向模糊距離陰影的尺寸陰影顏色*/
/*box-shadow: 30px 30px 30px 30px blue;*/
box-shadow: 0 0 10px #3c3c3c;
}

p {
font-size: 40px;
text-align: center;
letter-spacing: 8px;
/*設置文字陰影*/
/*text-shadow: 0 0 10px #3c3c3c;*/
text-shadow: 8px 5px 3px blue;
}
</style>
</head>
<body>
<div class="box"></div>
<p>我是一個帥哥！</p>
</body>

盒子模型 ? 標準盒子模型 ? 設置的width屬性就是內容區的寬度 ? 設置的hieght屬性就是內容區的高度 ? 怪異盒子模型(IE) ? 設置的width屬性就是內容區寬度+左右padding區寬度+左右border區寬度 ? 設置的height屬性就是內容區高度+上下padding區高度+上下border區高度

<head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; background-color: yellow; border: 30px solid blue; padding: 30px; /*設置觸發何種盒子模型 border-box：設置為怪異盒子模型 content-box：設置標準盒子模型 */ box-sizing: border-box; } </style> </head> <body> <div class="box"></div> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent { width: 400px; height: 400px; background-color: yellow; box-sizing: border-box; padding-left: 100px; } .child { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body>

css3過渡 ? 過渡：就是從一種狀態過渡到另外一種狀態，過渡的同時有動畫效果。 ? 注意：想要盒子移動，那麼必須要涉及到定位技術！

過渡 ? 當檢測的屬性值發生了變化的時候，就會觸發過渡效果 ? property：設置需要檢測的屬性 ? duration：設置動畫時間 ? timing-function：設置動畫的曲線 ? linear 規定以相同速度開始至結束的過渡效果 ? ease 規定慢速開始，然後變快，然後慢速結束的過渡效果 ? ease-in 規定以慢速開始的過渡效果 ? ease-out 規定以慢速結束的過渡效果 ? ease-in-out 規定以慢速開始和結束的過渡效果，中間勻速 ? delay：設置延遲執行的時間

<head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 100px; height: 100px; background-color: yellow; position: absolute; top: 10px; left: 10px; /*transition: left 3s ease-out 3s;*/ transition: left 3s ease-out, background-color 3s, width 3s; }

.box:active {
left: 600px;
background-color: blue;
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

css筆記

css筆記

1引入樣式方式

2css選擇器

3css常用屬性

4盒子模型

5css3教程

熱門新聞

週熱門

css筆記

css筆記

1引入樣式方式

2css選擇器

3css常用屬性

4盒子模型

5css3教程

CSS的浮動佈局方式 怎樣才能更好使用和掌握?

想自學web前端開發，有好方法推薦嗎？

寫手機端自適應的前端，一般用啥實現？

有什麼辦法可以用純 CSS 在現代瀏覽器下實現單屏內容時 footer 貼底，多屏內容時 footer 隨內容向下？

求助！！vscode 安裝了css peek插件，為什麼點擊F12會提示找不到定義呢？

怎麼製作網頁css？

找一個好的前端工作，需要學習那些前端知識？

寫一個網頁有什麼經驗呢？

最近在自學前端的基礎，看別人學很簡單，但是實際操作起來要考慮很多邏輯問題，有什麼好的學習前端的方法嗎?

前端工程師複製粘貼代碼正常麼？

我該怎麼自學前端?

Web前端工程師培訓哪家好？

前端小白，面對這麼多前端資料感覺到很迷茫，先問一下大家學習前端開發有哪些途徑？

web前端找工作是項目重要還是基礎重要？

html li 裡面可以放p div 這些塊級元素嗎?如果可以,是為什麼呢?

熱門新聞

週熱門

CSS的浮動佈局方式怎樣才能更好使用和掌握?