當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

Day02 - CSS

發布時間：2023/12/8 CSS 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day02 - CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Day02 - CSS

HTML的布局方式大致分為兩種：

1) 表格標簽 - table2) div + css

塊級標簽
典型的就是<div>< /div>,塊級標簽獨占一行，同理，<h>標簽，<li>標簽也是塊級標簽；div標簽獨自不能夠實現復雜的效果，必須結合css樣式進行渲染。如果把div標簽用id或者class來標記<div>,那么該標簽的作用會顯得更加有效。

<div>< /div>標簽屬性：
align：表示div中內容的對齊方式

行級標簽
<span>< /span>，不獨占一行；

<body><div>這是一個塊</div><div>這是一個塊</div><span>這是一個行級</span><span>這是一個行級</span></body>

* css：層疊樣式表、

CSS：Cascading Style Sheets

定義：
CSS通常稱為CSS樣式或者層疊樣式表，主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片外形（寬高和邊距等）、以及版面布局等其它樣式。

名詞解釋：
* 樣式表：給HTML標簽添加需要顯示的效果
* 層疊：使用不同的添加方式，給同一個HTML標簽添加樣式，最后所有樣式都疊加在一起，共同作用于該標簽。

作用：
1）設置html樣式
2）復用已經寫過的樣式代碼，當兩個css修飾同一個標簽的時候，發生沖突的屬性，以最后一個修飾該標簽的css為準，后加載為準；

css的三種引用方式：
行內樣式
內部樣式
外部樣式

**行內樣式：
css內嵌在html的標簽里面
書寫規范： style=”屬性名 : 屬性值 ; 屬性名 : 屬性值；”

<div style="font-size: 12px; color: deepskyblue ;">這是一個塊 </div> <span style="color: red; font-family: 'arial black'; font-size: 20px;">這是一個行級 </span> style其實是html中標簽div的屬性，而雙引號中的color，font-size才是css里面的屬性。在雙引號中，用分號；分隔不同的屬性。字體大小font-size的px不能夠省略，css中，像素單位是不能夠省略的，只有在html中的單位才能夠省略。

優點：
優先級最高
可讀性強

缺點：
毫無復用性；

**內部樣式也叫內嵌樣式
在該html文件的head標簽里添加style標簽來改變樣式。只對其當前所在的html頁面有效，可以對多處設置圖同一樣式；
style當中注釋要寫成/**/
書寫規范：

內部樣式寫在哪里都可以，但是建議寫在<head></head>標簽中，寫在<title>下方
語法：

優點：
有一定的復用性，復用性較高，在該html文件內可以復用；

缺點：
可讀性不強，書寫不方便；

外部樣式：也叫鏈入式

在外部定義一個css文件，以.css結尾。然后再需要用到該樣式的html中引入css
同一個css樣式表可以被不同的html頁面鏈接使用，同時，一個html頁面也可以通過多個<link />標記鏈接多個css樣式表使用。

步驟1）新建css文件，在css文件中：

選擇器{屬性名 : 屬性值;color: red;font-size: 40px;}

步驟2）使用link標簽將css文件引入進來

優缺點
* 優點：可讀性較好，可復用性非常強
* 缺點：效率略低。客戶端在訪問html頁面的時候，要從服務器請求對應的css文件。用戶加載的時候速度稍慢

css三種引用方式的優先級：
行內樣式 > 內部樣式和外部樣式
內部樣式和外部樣式的優先級誰后加載，誰的優先級就高。

CSS的選擇器

“選擇器”用于指定css樣式的html對象（如果html的標簽名字，這里是直接使用標簽名字而不需要加上任何的尖括號，例如直接使用div），花括號內是對對象設置具體的格式，屬性和屬性值以鍵值對的方式進行出現的，使用英文冒號：分隔，多個屬性之間使用英文分號進行分隔；

注意幾點：
1）CSS樣式選擇器嚴格區分大小寫，但是屬性和屬性值不區分大小寫；
2）多個屬性之間必須用英文狀態下的分號進行分隔，但是最后一個屬性后面的分號可以省略；為了增加新樣式，最好將最后一個屬性后面的分號也保留。
3）如果屬性的值由多個單詞組成且中間包含空格，就必須為這個屬性值加上英文狀態下的引號。
p{ font-family ： “Times New Roman”}

關于css中的空格：
1）在css代碼中，空格是不被解析的，花括號以及分號前后的空格可有可無，因此可以使用空格鍵，Tab鍵，回車鍵對樣式代碼進行排版，即所謂的格式化css代碼，這樣可以提高代碼的可讀性。
2）需要注意的是，在屬性的值和單位之間是不允許出現空格的，否則瀏覽器解析的時候會出現錯誤。例如下方所示就是不正確的。

CSS的基本選擇器 - 三種

1）元素選擇器/標簽選擇器
標簽例如div
* 語法：

標簽名{屬性名：屬性值；} 最大的優點就是能夠快速地為頁面中同類型的標記統一樣式；但是這也是他的缺點，不能夠設計差異化的樣式。

2）ID選擇器
id,給獨特的某個標簽設置樣式，一般不用這種方式，因為id原則上是唯一的。不是給css使用的，而是給js使用的。id在命名的時候不能夠以數字開頭，否則會無效
元素的id值是唯一的，這種方法只能夠對應文檔中某一個具體的元素；
使用#號進行引用。
* 語法：

#id{屬性名：屬性值；}

3）類選擇器
給具有相同類名class的一類標簽設置樣式，用的最多
* 語法：

.類名{屬性名：屬性值；}

例：

CSS的其他選擇器

1）層級選擇器
* 語法：

父選擇器子選擇器孫子選擇器{屬性名：屬性值；}.div2 div .sp1{}

應用場景：一層層往下找到某一個或者一類標簽。

2）屬性選擇器

用于設置同一個屬性值type的一組標簽
注意：標簽后面跟中括號 [ ],type后面的值跟單引號 ‘ ’；
* 語法：

標簽選擇器[屬性名='屬性值']{css的樣式}input[ type = 'text']{background-color:green;}

3）偽元素選擇器
<a href="">< /a>標簽的狀態選擇器

a標簽設置點擊前顏色，點擊后的顏色，a標簽的四種狀態，link默認狀態，hover鼠標移上去，active點擊狀態，visited點擊過后的狀態

* link 對象在未被訪問前的樣式。
* hover 用于當用戶把鼠標移動到元素上面時的效果；
* active 用于用戶點擊元素那一下的效果
* visited 用于用戶點擊過后的效果

注意：標簽名 a 后面跟冒號：
* 語法：

a:link{css樣式}a : link {color:bule ;}a : hover{color:green;}a : active{color:red;}a: visited{color: yellow;}

CSS的屬性

1）文字和文本屬性
* color：文本顏色
* font-size：字體大小
* font-family：字體系列，類似HTML的<font>< /font>中的face屬性，但是可以指定多個字體樣式
font-family表示使用的字體系列，多個字體用逗號分隔，例如“字體1，字體2，字體3”此時優先使用的是字體1，如果字體1系統不存在，再使用字體2，以此類推。
* font-weight：bold，字體加粗
*text-align:文字水平對齊方式。
* text-decoration：下劃線等
*text-decoration： underline 下劃線
* text-decoration： none 沒有線，要寫在偽類選擇器中才有用

a:link{color: deepskyblue;text-decoration:none; }

text-decoration： line-through表示一條線從中間滑過
text-decoration： overline-文字上方的線

2）背景屬性
* background-color：背景色
* background-image：背景圖片 background-image：url（）；（引用有三種，src，href，url，其中url只用于css中 ）需要設置在body中
* background-repeat：平鋪方式；重復背景圖顯示。也就是背景圖片的平鋪方式。默認狀態就是橫向縱向都平鋪；取值還有repeat-x,repeat-y，no-repeat橫向、縱向、不平鋪
* repeat:橫向縱向都平鋪
* repeat-x:橫向平鋪
* repeat-y:縱向平鋪
* no-repeat:不平鋪
* background : 顏色圖片平鋪方式（順序隨便）；開發中的綜合寫法

background: red url() no-repeat;

3）列表屬性
* list-style-type : 列表前面使用默認的圖標
* list-style-image : url() ; 列表前面使用自定義的小圖片 icon

4）邊框和尺寸屬性

邊框屬性

border-width:邊框的寬度
border-style:邊框的類型
border-color:邊框的顏色
border-width:10px;
border-color: red ;
border-style: solid; 實線
**border: 寬度顏色樣式（順序隨便）開發中的綜合寫法
邊框變圓角：**

尺寸的屬性

width
height

5）顯示屬性
* display ：display,取值有三種，none，inline，block，none為不顯示，block（塊級標簽顯示）為每個div獨占一行，inline行級標簽顯示；
* block:顯示為塊級元素
* inline：顯示為行級元素
* none：不顯示

選擇器{display：inline； }

6）浮動屬性
脫離該HTML頁面。
float：left
如果div中有內容就會環繞，而不會蓋住。
清除浮動：clear：both；清除浮動帶來的影響。
* float:浮動
* left
* right
* none

clear：清除浮動
- left
- right
- both

CSS的盒子模型也叫css框模型

一般為兩個盒子
* padding
* 內邊距：盒子邊框距離盒子內部的元素的距離

margin
- 外邊距：就是盒子的邊框距離外部框架的邊框或者外部盒子邊框的距離。
border
- 盒子邊框
- border-width
- border-style
- border-color
- 實際開發中的簡寫border:width style color

例子：

總結

以上是生活随笔為你收集整理的Day02 - CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： npm模块之opn使用教程（译）
下一篇： CSS峰会亮点直击，大咖共议产业上云的安

CSS

Day02 - CSS

Day02 - CSS

* css：層疊樣式表、

CSS的選擇器

CSS的基本選擇器 - 三種

CSS的其他選擇器

CSS的屬性

邊框屬性

尺寸的屬性

CSS的盒子模型 也叫css框模型

總結

CSS的盒子模型也叫css框模型