當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

三十六、前端基础 CSS

發(fā)布時(shí)間：2024/1/8 HTML 36 豆豆

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

CSS相關(guān)

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

一 CSS簡介

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

語法結(jié)構(gòu)：

選擇器 {

? 屬性名:屬性值;

}

注釋語法

/**/

三種編寫CSS的方式

head內(nèi)的link標(biāo)簽引用外部CSS文件(推薦)

head內(nèi)的style標(biāo)簽直接編寫CSS代碼

直接在標(biāo)簽內(nèi)部編寫style屬性

二 CSS選擇器

2.1 基本選擇器

標(biāo)簽選擇器

id選擇器

類選擇器

通用選擇器

2.2 組合選擇器

后代選擇器

兩個(gè)選擇器之間空格隔開，前面的選擇器取到的標(biāo)簽內(nèi)部所有符合空格后面的選擇器要求的標(biāo)簽

<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>

兒子選擇器

兩個(gè)選擇器之間用 > 隔開，前面的選擇器獲取到的標(biāo)簽內(nèi)部第一層符合 > 后邊的選擇器要求的標(biāo)簽

毗鄰選擇器

兩個(gè)選擇器之間用+號隔開，前面選擇器獲取的標(biāo)簽下面緊挨著的 + 號后的標(biāo)簽

弟弟選擇器

查找前面標(biāo)簽同級別下的符合后面的所有標(biāo)簽

2.3 屬性選擇器

所有的標(biāo)簽不僅有默認(rèn)屬性(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標(biāo)簽里由屬性name的標(biāo)簽并且屬性值為span1的標(biāo)簽修改*/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 分組與嵌套

當(dāng)多個(gè)選擇器查找的標(biāo)簽需要調(diào)整為相同的樣式，那么就可以合并

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

2.5 偽類選擇器

a標(biāo)簽?zāi)J(rèn)的顏色有兩種，紫色和藍(lán)色，當(dāng)瀏覽器從來沒有訪問過該地址就是藍(lán)色，被訪問過就是紫色。

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

當(dāng)鼠標(biāo)懸停到a標(biāo)簽上時(shí)，會(huì)產(chǎn)生變化。

2.6 偽元素選擇器

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

2.7 選擇器優(yōu)先級

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

就近原則

選擇器不同

行內(nèi) > id選擇器 > 類選擇器 > 標(biāo)簽選擇器 (精確度越高的優(yōu)先級越高)

三字體樣式

3.1 寬和高

width屬性可以為元素調(diào)整寬度。

height屬性可以為元素調(diào)整高度。

塊級標(biāo)簽才可以調(diào)整寬度，行內(nèi)標(biāo)簽的高度由自身內(nèi)容決定。

3.2 文字字體

font-family

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

font-size 字體大小

p {font-size: 50px;}

font-weight 設(shè)置字體粗細(xì)

值描述

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

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

3.3 文本顏色

顏色屬性被用來設(shè)置文字的顏色。

設(shè)置顏色的三種方式：

十六進(jìn)制(#FF0000)

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

顏色的名稱(red)

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

3.4 文字屬性

文字對齊

text-align 規(guī)定元素中文本對齊方式

值描述

left	左對齊，默認(rèn)
right	右對齊
center	居中
justify	兩端對齊

文字裝飾

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

值描述

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

常用：為a標(biāo)簽去除下劃線

首行縮進(jìn)

p {text-indent: 32px;}

四背景屬性

五邊框?qū)傩?/h1> <style>/i {//* border-width: 2px;// border-style: solid;// border-color: red;//}*//簡寫/i {border: 2px solid red;} </style>
邊框樣式
值描述
none 無邊框
dotted 點(diǎn)狀虛線邊框
dashed 矩形虛線邊框
solid 實(shí)線邊框

還可以單獨(dú)為每個(gè)邊框設(shè)置樣式
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的區(qū)別：

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

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

七盒子模型

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

掌握操作:

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

body標(biāo)簽自帶8px外邊距

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

margin還可以讓內(nèi)部標(biāo)簽居中展示

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

八浮動(dòng)

在css中，任何元素都可以浮動(dòng)。
浮動(dòng)元素會(huì)生成一個(gè)塊級框，而不論它本身是何種元素。
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br /> 浮動(dòng)會(huì)造成父標(biāo)簽塌陷，解決方法是偽元素清楚法。

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

瀏覽器針對文本是優(yōu)先顯示的。

九溢出屬性

值描述

visible	默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框外
hidden	內(nèi)容會(huì)被修剪，并且其余的內(nèi)容不可見。
scroll	內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容
auto	被修剪后以滾動(dòng)條展示
inherit	規(guī)定應(yīng)該從父元素繼承overfull屬性

圓形頭像

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

十定位

static(靜態(tài))：所有的標(biāo)簽都不能通過定位來修改位置。

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

absolute(絕對定位)：基于已經(jīng)定位過的父標(biāo)簽做定位。

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

十一 z-index

瀏覽器其實(shí)是一個(gè)三維的坐標(biāo)系，z軸指向用戶。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。