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

HTML

三十六、前端基础 CSS

發布時間：2024/1/8 HTML 33 豆豆

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

CSS相關

一 CSS簡介
二 CSS選擇器
- 2.1 基本選擇器
- 2.2 組合選擇器
- 2.3 屬性選擇器
- 2.4 分組與嵌套
- 2.5 偽類選擇器
- 2.6 偽元素選擇器
- 2.7 選擇器優先級
三字體樣式
- 3.1 寬和高
- 3.2 文字字體
- 3.3 文本顏色
- 3.4 文字屬性
四背景屬性
五邊框屬性
六 display屬性
七盒子模型
八浮動
九溢出屬性
十定位
十一 z-index

一 CSS簡介

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素

語法結構：

選擇器 {

? 屬性名:屬性值;

}

注釋語法

/**/

三種編寫CSS的方式

head內的link標簽引用外部CSS文件(推薦)

head內的style標簽直接編寫CSS代碼

直接在標簽內部編寫style屬性

二 CSS選擇器

2.1 基本選擇器

標簽選擇器

id選擇器

類選擇器

通用選擇器

2.2 組合選擇器

后代選擇器

兩個選擇器之間空格隔開，前面的選擇器取到的標簽內部所有符合空格后面的選擇器要求的標簽

<head><meta charset="UTF-8"><title>Title</title><style>div span {color: red;}</style> </head> <body><p id="3">p</p><div>div<p id="5">div里的p<span id="d1">div里的p里的span</span></p><span id="2">div里的span</span></div><p id="4">p</p> </body>

兒子選擇器

兩個選擇器之間用 > 隔開，前面的選擇器獲取到的標簽內部第一層符合 > 后邊的選擇器要求的標簽

毗鄰選擇器

兩個選擇器之間用+號隔開，前面選擇器獲取的標簽下面緊挨著的 + 號后的標簽

弟弟選擇器

查找前面標簽同級別下的符合后面的所有標簽

2.3 屬性選擇器

所有的標簽不僅有默認屬性(id和class)，還可以自定義屬性(x,y)。

<head><meta charset="UTF-8"><title>Title</title><style>/*查找有name屬性的并修改*/[name] {background-color: red;}/*查找有name屬性并且屬性值為p1的修改*/[name="p1"] {background-color: red;}/*查找span標簽里由屬性name的標簽并且屬性值為span1的標簽修改*/span[name="span1"] {background-color: red;}</style> </head> <body><div>div<p name="p1">div>p<span name="span1">div>p>span</span></p><span name="span2">div>span</span></div><p>p</p><span name="123">span</span> </body>

2.4 分組與嵌套

當多個選擇器查找的標簽需要調整為相同的樣式，那么就可以合并

合并的選擇器彼此之間不干擾也沒有類型的限制，還可以在選擇器基礎上添加額外的選擇使得查找更精確。

2.5 偽類選擇器

a標簽默認的顏色有兩種，紫色和藍色，當瀏覽器從來沒有訪問過該地址就是藍色，被訪問過就是紫色。

<head><meta charset="UTF-8"><title>Title</title><style>a:hover {color: red;}</style> </head> <body> <a href="https://www.4399.com">點我進4399</a> </body>

當鼠標懸停到a標簽上時，會產生變化。

2.6 偽元素選擇器

<head><meta charset="UTF-8"><title>Title</title><style>/*給首字母設置特殊的樣式*/p:first-letter {font-size: 50px;color: red;}/*后面插入內容*/p:after {content: "命運如同手中的掌紋，無論多曲折，終掌握在自己手中。";color: blueviolet;}/*前面插入內容*/p:before {content: "沒有什么不可能，只看你去不去做。";color: chartreuse;}</style> </head> <body><p> 穿透石頭的水滴，它的力量來源于日積月累。</p> </body>

2.7 選擇器優先級

選擇器相同，引入位置不同

就近原則

選擇器不同

行內 > id選擇器 > 類選擇器 > 標簽選擇器 (精確度越高的優先級越高)

三字體樣式

3.1 寬和高

width屬性可以為元素調整寬度。

height屬性可以為元素調整高度。

塊級標簽才可以調整寬度，行內標簽的高度由自身內容決定。

3.2 文字字體

font-family

body {font-family: "微軟雅黑", sans-serif;}

font-size 字體大小

p {font-size: 50px;}

font-weight 設置字體粗細

值描述

normal	正常值
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細
inherit	繼承父類字體的粗細

p {font-size: 50px;font-weight: bolder;}

3.3 文本顏色

顏色屬性被用來設置文字的顏色。

設置顏色的三種方式：

十六進制(#FF0000)

rgb值(rgb(255,0,0))

顏色的名稱(red)

rgba第四個值為alpha，指定色彩的透明度，范圍在0.0~1.0之間

3.4 文字屬性

文字對齊

text-align 規定元素中文本對齊方式

值描述

left	左對齊，默認
right	右對齊
center	居中
justify	兩端對齊

文字裝飾

text-decorration 屬性用來給文字添加特殊效果

值描述

none	默認，沒有任何裝飾
underline	定義文本下的一條線
overline	定義文本上的一條線
line-through	定義穿過文本下的一條線
inherit	繼承父類的屬性

常用：為a標簽去除下劃線

首行縮進

p {text-indent: 32px;}

四背景屬性

五邊框屬性

邊框樣式

值描述

none	無邊框
dotted	點狀虛線邊框
dashed	矩形虛線邊框
solid	實線邊框

還可以單獨為每個邊框設置樣式

i {border-top: 2px solid yellow;border-right: 2px solid red;border-bottom: 2px solid blue;border-left: 2px solid salmon;}

border-radius

div {width: 500px;height: 500px;background: red;border-radius: 250px;}

六 display屬性

用于控制HTML元素的顯示效果

display:“none”

HTML文檔中元素存在，但是在瀏覽器中不顯示，一般用于配合JavaScript使用。

<body><p><input type="text" style="display: none"></p><p>password:<input type="password"></p><p><input type="date" style="display: none"></p> </body>

display:"none"與visibility:hidden的區別：

visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

七盒子模型

margin：用于控制元素與元素之間的距離
border(邊框)：圍繞在內邊距和內容外的邊框
padding：用于控制內容與邊框之間的距離
content：盒子的內容，顯示文本和圖像

掌握操作:

margin-top: 20px; margin-right: 20px margin-bottom: 20px margin-left: 20px

body標簽自帶8px外邊距

body {margin: 0; /*作用與上下左右*/margin: 10px 10px; /*上下左右*/margin: 10px 10px 10px; /*上左右下*/margin: 10px 10px 10px 10px; /*上右下左*/ }

margin還可以讓內部標簽居中展示

margin:100px auto; /*僅限水平居中*/

八浮動

在css中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動會造成父標簽塌陷，解決方法是偽元素清楚法。

.clearfix:after {content: '';display: block;clear: both; } /*提前寫好上述代碼約到塌陷的標簽直接給標簽加上屬性名即可*/

瀏覽器針對文本是優先顯示的。

九溢出屬性

值描述

visible	默認值，內容不會被修剪，會呈現在元素框外
hidden	內容會被修剪，并且其余的內容不可見。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容
auto	被修剪后以滾動條展示
inherit	規定應該從父元素繼承overfull屬性

圓形頭像

div {height: 50px;width: 50px;border: 5px solid red;border-redius: 50%;overfull: hidden; }img {max-width: 100%; }

十定位

static(靜態)：所有的標簽都不能通過定位來修改位置。

relative(相對定位)：相對于標簽原來的位置做定位。

absolute(絕對定位)：基于已經定位過的父標簽做定位。

fixed(固定定位)：相對于瀏覽器的窗口做定位。

十一 z-index

瀏覽器其實是一個三維的坐標系，z軸指向用戶。

總結

以上是生活随笔為你收集整理的三十六、前端基础 CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

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