Day02 - CSS
Day02 - CSS
HTML的布局方式大致分為兩種：
1) 表格標簽 - table2) div + css塊級標簽
典型的就是<div>< /div>,塊級標簽獨占一行，同理，<h>標簽，<li>標簽也是塊級標簽；div標簽獨自不能夠?qū)崿F(xiàn)復(fù)雜的效果，必須結(jié)合css樣式進行渲染。如果把div標簽用id或者class來標記<div>,那么該標簽的作用會顯得更加有效。
<div>< /div>標簽屬性：
align：表示div中內(nèi)容的對齊方式
行級標簽
<span>< /span>，不獨占一行；
* css：層疊樣式表、
CSS：Cascading Style Sheets
定義：
CSS通常稱為CSS樣式或者層疊樣式表，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片外形（寬高和邊距等）、以及版面布局等其它樣式。
名詞解釋 ：
* 樣式表：給HTML標簽添加需要顯示的效果
* 層疊：使用不同的添加方式，給同一個HTML標簽添加樣式，最后所有樣式都疊加在一起，共同作用于該標簽。
作用：
1）設(shè)置html樣式
2）復(fù)用已經(jīng)寫過的樣式代碼，當兩個css修飾同一個標簽的時候，發(fā)生沖突的屬性，以最后一個修飾該標簽的css為準，后加載為準；
css的三種引用方式：
行內(nèi)樣式
內(nèi)部樣式
外部樣式
**行內(nèi)樣式：
css內(nèi)嵌在html的標簽里面
書寫規(guī)范： style=”屬性名 : 屬性值 ; 屬性名 : 屬性值；”
優(yōu)點：
優(yōu)先級最高
可讀性強
缺點：
毫無復(fù)用性；
**內(nèi)部樣式 也叫內(nèi)嵌樣式
在該html文件的head標簽里添加style標簽來改變樣式。只對其當前所在的html頁面有效，可以對多處設(shè)置圖同一樣式；
style當中注釋要寫成/**/
書寫規(guī)范：
內(nèi)部樣式寫在哪里都可以，但是建議寫在<head></head>標簽中，寫在<title>下方
語法：
優(yōu)點：
有一定的復(fù)用性，復(fù)用性較高，在該html文件內(nèi)可以復(fù)用；
缺點：
可讀性不強，書寫不方便；
外部樣式：也叫鏈入式
在外部定義一個css文件，以.css結(jié)尾。 然后再需要用到該樣式的html中引入css
同一個css樣式表可以被不同的html頁面鏈接使用，同時，一個html頁面也可以通過多個<link />標記鏈接多個css樣式表使用。
步驟1）新建css文件，在css文件中：
選擇器{屬性名 : 屬性值;color: red;font-size: 40px;}步驟2）使用link標簽將css文件引入進來
<link rel="stylesheet" href="../css/demo1.css" type="test/css" /> rel表示關(guān)系，stylesheet表示樣式表，**不能夠缺少**，缺少則設(shè)置不成功href表示連接的css樣式文件type=“test/css” 固定值，表示css類型rel=“stylesheet” 固定值，表示樣式表；優(yōu)缺點
* 優(yōu)點：可讀性較好，可復(fù)用性非常強
* 缺點：效率略低。客戶端在訪問html頁面的時候，要從服務(wù)器請求對應(yīng)的css文件。 用戶加載的時候速度稍慢
<link>標簽
link標簽的屬性：
* href : 引入的css文件的路徑
* rel : relation的縮寫，表示引入的文件和該HTML的關(guān)系。 必須要寫
* type : 引入的文件類型
css三種引用方式的優(yōu)先級：
行內(nèi)樣式 > 內(nèi)部樣式和外部樣式
內(nèi)部樣式和外部樣式的優(yōu)先級誰后加載，誰的優(yōu)先級就高。
CSS的選擇器
“選擇器”用于指定css樣式的html對象（如果html的標簽名字，這里是直接使用標簽名字而不需要加上任何的尖括號，例如直接使用div），花括號內(nèi)是對對象設(shè)置具體的格式，屬性和屬性值以鍵值對的方式進行出現(xiàn)的，使用英文冒號：分隔，多個屬性之間使用英文分號進行分隔；
注意幾點：
1）CSS樣式選擇器嚴格區(qū)分大小寫，但是屬性和屬性值不區(qū)分大小寫；
2）多個屬性之間必須用英文狀態(tài)下的分號進行分隔，但是最后一個屬性后面的分號可以省略；為了增加新樣式，最好將最后一個屬性后面的分號也保留。
3）如果屬性的值由多個單詞組成且中間包含空格，就必須為這個屬性值加上英文狀態(tài)下的引號。
p{ font-family ： “Times New Roman”}
關(guān)于css中的空格：
1）在css代碼中，空格是不被解析的，花括號以及分號前后的空格可有可無，因此可以使用空格鍵，Tab鍵，回車鍵對樣式代碼進行排版，即所謂的格式化css代碼，這樣可以提高代碼的可讀性。
2）需要注意的是，在屬性的值和單位之間是不允許出現(xiàn)空格的，否則瀏覽器解析的時候會出現(xiàn)錯誤。例如下方所示就是不正確的。
CSS的基本選擇器 - 三種
1）元素選擇器/標簽選擇器
標簽例如div
* 語法：
2）ID選擇器
id,給獨特的某個標簽設(shè)置樣式，一般不用這種方式，因為id原則上是唯一的。不是給css使用的，而是給js使用的。id在命名的時候不能夠以數(shù)字開頭，否則會無效
元素的id值是唯一的，這種方法只能夠?qū)?yīng)文檔中某一個具體的元素；
使用#號進行引用。
* 語法：
3）類選擇器
給具有相同類名class的一類標簽設(shè)置樣式，用的最多
* 語法：
例：
<style>.test{color: royalblue;}</style><div class="test">這是一個塊</div>CSS的其他選擇器
1）層級選擇器
* 語法：
- 應(yīng)用場景：一層層往下找到某一個或者一類標簽。
2）屬性選擇器
用于設(shè)置同一個屬性值type的一組標簽
注意：標簽后面跟中括號 [ ],type后面的值跟單引號 ‘ ’；
* 語法：
3）偽元素選擇器
<a href="">< /a>標簽的狀態(tài)選擇器
* link 對象在未被訪問前的樣式。
* hover 用于當用戶把鼠標移動到元素上面時的效果；
* active 用于用戶點擊元素那一下的效果
* visited 用于用戶點擊過后的效果
注意： 標簽名 a 后面跟 冒號：
* 語法：
CSS的屬性
1）文字和文本屬性
* color：文本顏色
* font-size：字體大小
* font-family：字體系列 ，類似HTML的<font>< /font>中的face屬性，但是可以指定多個字體樣式
font-family表示使用的字體系列，多個字體用逗號分隔，例如“字體1，字體2，字體3”此時優(yōu)先使用的是字體1，如果字體1系統(tǒng)不存在，再使用字體2，以此類推。
* font-weight：bold，字體加粗
*text-align:文字水平對齊方式。
* text-decoration：下劃線等
*text-decoration： underline 下劃線
* text-decoration： none 沒有線 ，要寫在偽類選擇器中才有用
- text-decoration： line-through表示一條線從中間滑過
- text-decoration： overline-文字上方的線
2）背景屬性
* background-color：背景色
* background-image：背景圖片 background-image：url（）；（引用有三種，src，href，url，其中url只用于css中 ）需要設(shè)置在body中
* background-repeat：平鋪方式 ；重復(fù)背景圖顯示。也就是背景圖片的 平鋪方式。默認狀態(tài)就是橫向縱向都平鋪；取值還有repeat-x,repeat-y，no-repeat橫向、縱向、不平鋪
* repeat:橫向縱向都平鋪
* repeat-x:橫向平鋪
* repeat-y:縱向平鋪
* no-repeat:不平鋪
* background : 顏色 圖片 平鋪方式（順序隨便） ；開發(fā)中的綜合寫法
3）列表屬性
* list-style-type : 列表前面使用默認的圖標
* list-style-image : url() ; 列表前面使用自定義的小圖片 icon
4）邊框和尺寸屬性
尺寸的屬性
- width
- height
5）顯示屬性
* display ：display,取值有三種 ，none，inline，block，none為不顯示，block（塊級標簽顯示）為每個div獨占一行，inline行級標簽顯示；
* block:顯示為塊級元素
* inline：顯示為行級元素
* none：不顯示
6） 浮動屬性
脫離該HTML頁面。
float：left
如果div中有內(nèi)容就會環(huán)繞，而不會蓋住。
清除浮動：clear：both；清除浮動帶來的影響。
* float:浮動
* left
* right
* none
- clear：清除浮動
- left
- right
- both
CSS的盒子模型 也叫css框模型
一般為兩個盒子
* padding
* 內(nèi)邊距：盒子邊框距離盒子內(nèi)部的元素的距離
margin
- 外邊距：就是盒子的邊框距離外部框架的邊框或者外部盒子邊框的距離。
- 外邊距：就是盒子的邊框距離外部框架的邊框或者外部盒子邊框的距離。
border
- 盒子邊框
- border-width
- border-style
- border-color
- 實際開發(fā)中的簡寫border:width style color
例子：
總結(jié)
以上是生活随笔為你收集整理的Day02 - CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： npm模块之opn使用教程（译）
- 下一篇： CSS峰会亮点直击，大咖共议产业上云的安