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

CSS

CSS 选择器及常用属性介绍

發布時間：2024/3/12 CSS 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS 选择器及常用属性介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

一、CSS語法
- 1.1 注釋
- 1.2 CSS 引入方式
二、CSS 選擇器-查找標簽
- 2.1 基本選擇器
- - 標簽選擇器
  - ID選擇器
  - 類選擇器
  - 通用選擇器
- 2.2 組合選擇器
- - 后代選擇器
  - 兒子選擇器
  - 毗鄰選擇器
  - 弟弟選擇器
- 2.3 屬性選擇器
- 2.4 分組和嵌套
- - 分組
  - 嵌套
- 2.5 偽類選擇器
- 2.6 偽元素選擇器
- - first-letter
  - before
  - after
- 選擇器優先級
三、CSS屬性相關
- 3.1 寬和高
- 3.2 字體屬性
- - 文字字體
  - 字體大小
  - 字重（粗細）
  - 文本顏色
- 3.3 文字屬性
- - 文字對齊
  - 文字裝飾
  - 首行縮進
- 3.4 背景屬性
- 3.5 標簽的邊框
- - - `border-radius`--圓角邊框
- 3.6 `display`屬性
- - **`display:"none"`與`visibility:hidden`的區別：**
- 3.7 `overflow`屬性--溢出
- - 圓形頭像實例
- 3.8 `position`屬性--定位
- 3.9 `opacity`屬性--透明度
四、`z-index`模態框

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

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）

一、CSS語法

每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束

1.1 注釋

/*單行注釋*//* 多行注釋多行注釋多行注釋 */

1.2 CSS 引入方式

內部樣式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽內的<style></style>標簽對中。格式如下：

<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;}</style> </head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。

行內樣式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。

<p style="color: red">Hello world. </p>

二、CSS 選擇器-查找標簽

2.1 基本選擇器

注意：

樣式類名不要用數字開頭（有的瀏覽器不認）

標簽中的class屬性如果有多個，要用空格分隔

標簽選擇器

標簽名 { 樣式 }

p {color: "red";}

ID選擇器

# id 值 { 樣式 }

#i1 {background-color: red; }

類選擇器

. class 值 { 樣式 }

.c1 {font-size: 14px; } p.c1 {color: red; }

通用選擇器

全部的標簽選中

* {color: white; }

2.2 組合選擇器

后代選擇器

/*li內部的a標簽設置字體顏色*/ li a {color: green; }

兒子選擇器

/*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p {font-family: "Arial Black", arial-black, cursive; }

毗鄰選擇器

同級別，緊挨著的，下面的第一個標簽

/*選擇所有緊接著<div>元素之后的<p>元素*/ div+p {margin: 5px; }

弟弟選擇器

同級別，并且在下面的標簽

/*i1后面所有的兄弟p標簽*/ #i1~p {border: 2px solid royalblue; }

2.3 屬性選擇器

/*用于選取帶有指定屬性的元素。*/ p[title] {color: red; }/*用于選取帶有指定屬性和值的元素。*/ p[title="213"] {color: green; }

2.4 分組和嵌套

分組

當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。

例如：

div, p {color: red; }

上面的代碼為div標簽和p標簽統一設置字體為紅色。

通常，我們會分兩行來寫，更清晰:

div, p {color: red; }

嵌套

多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設置字體顏色為紅色。

.c1 p {color: red; }

2.5 偽類選擇器

以鏈接標簽<a>標簽為例

/* 未訪問的鏈接 */ a:link {color: #FF0000 }/* 鼠標移動到鏈接上 */ a:hover {color: #FF00FF } /* 選定的鏈接 */ a:active {color: #0000FF }/* 已訪問的鏈接 */ a:visited {color: #00FF00 } /*input輸入框獲取焦點時樣式*/ input:focus {outline: none;background-color: #eee; }

2.6 偽元素選擇器

first-letter

常用的給首字母設置特殊樣式：

p:first-letter {font-size: 48px;color: red; }

before

/*在每個<p>元素之前插入內容*/ p:before {content:"*";color:red; }

after

/*在每個<p>元素之后插入內容*/ p:after {content:"[?]";color:blue; }

before和after多用于清除浮動的影響—父標簽塌陷問題

選擇器優先級

簡而言之：對同一標簽，采用相同的選擇器時，離得越近影響越大，內聯（行內）樣式影響最大；不同的選擇器，則：id 選擇器 > 類選擇器 > 元素選擇器

三、CSS屬性相關

3.1 寬和高

width屬性可以為元素設置寬度。

height屬性可以為元素設置高度。

塊級標簽才能設置寬度，行內標簽的寬度由內容來決定。

3.2 字體屬性

文字字體

font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

簡單實例：

body {font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }

字體大小

p {font-size: 14px; }

如果設置成inherit表示繼承父元素的字體大小值。

字重（粗細）

font-weight用來設置字體的字重（粗細）

值描述

normal	默認值，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細，400等同于normal，而700等同于bold
inherit	繼承父元素字體的粗細值

文本顏色

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

顏色是通過CSS最經常的指定：

十六進制值 - 如: **＃**FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。

3.3 文字屬性

文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。

值描述

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

文字裝飾

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

值描述

none	默認。定義標準的文本。
underline	下劃線
overline	文本上的一條線
line-through	穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

常用的為去掉a標簽默認的自劃線：

a {text-decoration: none; }

首行縮進

將段落的第一行縮進 32像素：

p {text-indent: 32px; }

3.4 背景屬性

/*背景顏色*/ background-color: red; /*背景圖片*/ background-image: url('1.jpg'); /*背景重復repeat(默認):背景圖片平鋪排滿整個網頁repeat-x：背景圖片只在水平方向上平鋪repeat-y：背景圖片只在垂直方向上平鋪no-repeat：背景圖片不平鋪 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/

支持簡寫：

background:#336699 url('1.png') no-repeat left top;

使用背景圖片的一個常見案例就是很多網站會把很多小圖標放在一張圖片上，然后根據位置去顯示圖片。減少頻繁的圖片請求。

參考鏈接點我

一個有趣的例子：

中間的圖片不動

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滾動背景圖示例</title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center;background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}</style> </head> <body><div class="d1"></div><div class="box"></div><div class="d2"></div><div class="d3"></div> </body> </html>

3.5 標簽的邊框

邊框屬性

border-width
border-style
border-color

#i1 {border-width: 2px;border-style: solid;border-color: red; }

通常使用簡寫方式：

#i1 {border: 2px solid red; }

邊框樣式

值描述

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

除了可以統一設置邊框外還可以單獨為某一個邊框設置樣式，如下所示：

#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none; }

border-radius–圓角邊框

用這個屬性能實現圓角邊框的效果。

將border-radius設置為長或高的一半即可得到一個圓形

3.6 display屬性

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

值意義

display:“none”	HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用于配合JavaScript代碼使用。
display:“block”	默認占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分。
display:“inline”	按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什么影響。
display:“inline-block”	使元素同時具有行內元素和塊級元素的特點。

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

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

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

3.7 overflow屬性–溢出

值描述

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

overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

示例

圓形頭像實例

<!DOCTYPE HTML> <html> <head><meta charset="UTF-8"><title>圓形的頭像示例</title><style>* {margin: 0;padding: 0;background-color: #eeeeee;}.header-img {width: 150px;height: 150px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.header-img>img {width: 100%;}</style> </head> <body><div class="header-img"><img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt=""> </div></body> </html>圓形頭像示例

3.8 position屬性–定位

是否脫離文檔流：標簽改變之后原來的位置是否還存在

static – 靜態

無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。

relative – 相對定位

相對于標簽原來的位置做移動

即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
absolute – 絕對定位

設置為絕對定位的元素框從文檔流完全刪除，即脫離文檔流，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框

注意：

如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位

fixed – 固定定位

以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動，對象脫離正常文檔流

回到頂部示例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>返回頂部示例</title><style>* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}</style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回頂部</div> </body> </html>

**注意：**一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

3.9 opacity屬性–透明度

用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。

四、z-index模態框

以百度登錄頁面為例：

該界面分為三層：

1、最底部為內容–Z 軸的距離為 0；

2、中間一層半透明的區域–Z 軸的距離為 99；

3、最上層的白色登錄區域–Z 軸的距離為 100；

只有定位了的標簽才能用 z-index，浮動是不可以使用的

模態框示例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定義模態框</title><style>.cover {background-color: gray;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;opacity: 0.9;}.modal {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;}</style> </head> <body> zzzzzzzzzzzzzzz zzzzzzzzzzzzzzz <div class="cover"></div> <div class="modal"></div> </body> </html>

總結

以上是生活随笔為你收集整理的CSS 选择器及常用属性介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

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