前端-CSS (樣式引入、選擇器）

文章目錄

    • 大綱
    • 前端三大件
    • 常用樣式
    • 顏色
    • px:像素
    • 1.CSS三種引入方式
      • 1.1 行內樣式
      • 1.2 頁內樣式
      • 1.3 引入外部樣式表文件（常見）
    • 基礎選擇器
      • 1. 標記選擇器
      • 2. id選擇器
      • 3. 類選擇器 最常用
      • 4 * 選擇器 使用頻率較低
    • 復合選擇器
    • 偽類選擇器
      • 1.超鏈接偽類：
      • 2.子元素偽類：使用`:`
      • 3.偽元素選擇器 使用`：：`

大綱

前端三大件：無競品，極簡。
html：框架結構。
css：負責樣式修飾。
js：行為交互，動畫效果。

CSS：層疊樣式表 Cascade Style Sheet
1.css的3種引入方式。
1.1 行內樣式。寫在標記之中。使用style屬性。 color: red; 樣式名:樣式值; 樣式之間無順序。 缺點：僅能修飾當前所在標記。

1.2 頁內樣式。 選擇器。用來選擇修飾的目標元素。 缺點：僅能修飾當前頁。

1.3 引入外部樣式表文件 引入外部樣式表文件。

基礎選擇器：
1.標記選擇器。
2.id選擇器。
3.類選擇器。頻率最高。
4.星號選擇器。頻率較底。

復合選擇器：高級選擇器。將基礎選擇器組合使用。
1.子代選擇器：a>b
2.后代選擇器：a b
3.兄弟選擇器：a+b 緊鄰弟 a~b 所有弟
4.交集選擇器：ab，注意不要產生歧義
5.并集選擇器：a,b

偽類選擇器：
1.超鏈接偽類：愛恨準則。love hate :hover 對一切標記生效。

2.子元素偽類： :first-child，:last-child，:nth-child

3.偽元素選擇器 ::before ::after

常用樣式：
1.color：前景色
2.font-weight：字重
3.font-size：字號
4.background-color：背景色
5.width和height
6.font-family
7.text-decoration:
8.text-align: center
9.border-radius：邊框圓角
10.list-style
11.border

px：像素
物理像素：25601440
邏輯像素：800600

顏色
1.英文單詞。
2.rgb表示法。Red Green Blue三原色。255^3。
3.rgb表示法的16進制寫法。#ab00c3
4.簡寫的16進制表示法。如果每兩位相同，則可簡寫成一位。

前端三大件

無競品，極簡

html:框架結構

css:負責樣式修飾

js:行為交互，動畫效果

常用樣式

中橫線命名法

1.color：前景色
font-weight:字重
3.font-size:字號，比如10px(最小是10px,px指的是邏輯像素，是相對單位，不同電腦的1px像素不一定一樣大)
background-color:背景色
width 寬度
height 高度
font-family 指定文本的字體
text-decoration 控制文本的裝飾效果，如下劃線、刪除線、上劃線等
text-align:center 用來控制文本的水平對齊
border-radius 用來設置元素的圓角效果
list-style：控制列表項的符號類型和位置等樣式
border：控制元素的邊框樣式、寬度和顏色

顏色

1、英文單詞

background-color: red;

2、RGB表示法：分別是紅綠藍三原色（顯示屏），255^3
在這里插入圖片描述

background-color: rgb(255, 255, 255);

3、rgb表示法的16進制寫法。#ab00c3

#ab00c3 是一種 十六進制顏色值，它表示一種特定的顏色。

#ab00c3 中的每一對字符代表顏色的 紅色、綠色 和 藍色 分量（RGB）。
ab：紅色（Red）通道的值，十六進制 ab 轉換為十進制是 171。
00：綠色（Green）通道的值，十六進制 00 轉換為十進制是 0。
c3：藍色（Blue）通道的值，十六進制 c3 轉換為十進制是 195。
結果：
紅色通道：171（較高的紅色強度）
綠色通道：0（沒有綠色）
藍色通道：195（較高的藍色強度）
這意味著 #ab00c3 是一種 紫色偏藍 的顏色，帶有較強的藍色和紅色成分。可視化：
這種顏色大致是 紫色，帶有較深的藍紫色調。

background-color: #ab00c3;

4.簡寫的16進制表示法。如果每兩位相同，則可簡寫成一位。

比如紅色：

background-color: #f00;

px:像素

物理像素：真實的發光點一共多少個。
邏輯像素：類似縮放，把幾個物理像素合在一起。

1.CSS三種引入方式

1.1 行內樣式

行內樣式，寫在標記之中。使用style屬性。

color:red 樣式名：樣式值 樣式之間無順序。

行內樣式缺點：僅能修飾當前所在標記。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行內樣式</title>
</head>
<body><h1 style="color:red;font-size:26px;font-weight: normal">大家早上好</h1>
</body>
</html>

1.2 頁內樣式

頁內樣式缺點：僅能修飾當前頁

寫在當前頁面的<head></head>標簽最下面：<style> </style>標記里面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>頁內樣式</title><style>h1{font-style: italic;}#h1 {background-color: blue;}#a2{background-color:pink;}.f32{font-size: 32px;}*{background-color: pink;}</style>
</head>
<body><h1>大家早上好</h1><h1 class="f32">你</h1><h1 id="h1">好</h1><h2>他</h2><a id="a2" href="#">我是超鏈接</a><p class="f32">這是一個段落</p>
</body>
</html>

1.3 引入外部樣式表文件（常見）

使用link屬性引入外部樣式表文件。

<link rel="stylesheet" href="路徑">

在外部的css文件里面單獨修飾

在這里插入圖片描述

樣式表.css:

@charset "utf-8";#mydiv {width: 100px;background-color: pink;text-align: center;
}.outer {height: 100px;text-decoration: line-through;font-family: "宋體";
}#mydiv>.inner{background-color: gold;width: 100px;height: 100px;border-radius: 10px;
}.inner li{text-decoration: none;font-family: "微軟雅黑";list-style: circle;
}

引入外部樣式表.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入外部樣式表</title><!-- 引入外部樣式表   企業開發最常用 --><link rel="stylesheet" href="css/樣式表.css">
</head>
<body><div id="mydiv" class="outer">你好今天天氣好<div class="inner"><ul><li>111111</li><li class="ctr">222222222222</li><li>33333333</li></ul></div></div>
</body>
</html>

基礎選擇器

選擇器。用來選擇修飾的目標元素

1. 標記選擇器

h1{
}

選擇頁面中所有h1標記

2. id選擇器

<h1 id="ni">你</h1> 賦予一個id，在style里：

即設置id值，使用的時候：#id值

  #ni{background-color: blue;}

得到id為ni的標記被設置背景色為藍色

3. 類選擇器 最常用

設置class值，使用的時候：.class值

  <h1 class="f32">你</h1>

  <p class="f32">這是段落</p>

class表示同一類,所有的標簽都有class屬性在style里寫：

 .f32{font-size: 32px;}

4 * 選擇器 使用頻率較低

*：全選，當前頁面的全部標簽全被選中，包括<boday></boday>

在style里面：

 *{background-color: pink;}

上述全部的整體應用代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>頁內樣式</title><style>h1{/* 斜體 */font-style: italic;}#h1 {background-color: blue;}#a2{background-color:pink;}.f32{font-size: 32px;}*{background-color: pink;}</style>
</head>
<body><h1>大家早上好</h1><h1 class="f32">你</h1><h1 id="h1">好</h1><h2>他</h2><a id="a2" href="#">我是超鏈接</a><p class="f32">這是一個段落</p>
</body>
</html>

復合選擇器

復合選擇器：高級選擇器。將基礎選擇器組合使用

1.子代選擇器：a>b選中a下面的b元素，兩個選擇器的組合,其中a是一個選擇器,b是一個選擇器

在這里插入圖片描述

上述中是父子關系，選用子代選擇器，id選擇器的使用是#id值，class選擇器的使用是.class值

#mydiv>.inner{background-color: gold;width: 100px;height: 100px;border-radius: 10px;
}

2.后代選擇器a b 即a空格b

在這里插入圖片描述

想選中的這個部分是inner的后代，不是子代（中間還有ul)

.inner li{text-decoration: none;font-family: "微軟雅黑";list-style: circle;
}

3.兄弟選擇器a+b緊鄰弟（只能選緊鄰的弟），選中的是弟 a~b選中的是所有弟

平級的才有兄弟

/* 兄弟選擇器 */
.td4+td{font-size: 40px;
}

4.交集選擇器ab 注意不要讓瀏覽器產生歧義

比如想選中class是ctr的td

在這里插入圖片描述

/* 交集選擇器，不能讓瀏覽器產生歧義 */
td.ctr{color: blue;background-color: rgb(255, 255, 255);
}

5.并集（或）選擇器a,b

在這里插入圖片描述

/* 并集選擇器 */
.ctr,div{background-color: greenyellow;}

意思是選中所有的.ctr和div都設置成指定顏色。同時選中多個

偽類選擇器

（知道點就行）

1.超鏈接偽類：

愛恨準則。love hate

:hover

對一切標記生效。

記住:hover即可，只有：hover對一切標記生效，其他的只對超鏈接標記生效。

代碼例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>偽類選擇器</title><style>/* 下面四個偽類從（交集選擇器）上往下優先級越來越高 *//* 默認狀態 */#a1:link{color:red;}/* 訪問過后 */#a1:visited{background-color: aqua;}/* 鼠標滑過,用的多 */#a1:hover{color: blue;/* text-decoration: line-through;border: 1px dotted black;font-size: 30px; */}/* 激活態(不同瀏覽器認為的激活不一樣，比如按下就是激活) */#a1:active{background-color: pink;}</style>
</head>
<body><a id="a1"  href="#">去百度</a>
</body>
</html>

2.子元素偽類：使用:

:first-child
:last-child
:nth-child

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子元素偽類</title><style>/* 選擇ul下的li且為第一個,字體設置成紅色： */ul>li:first-child{color: red;}/* 選擇ul下的li且為最后一個,字體設置成藍色 */ul>li:last-child{color:blue;}/* 選中指定的某一個：從1開始的,比如選中第三個的3 ，設置成綠色字體*/ul>li:nth-child(3){color: green;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

效果圖：

在這里插入圖片描述

3.偽元素選擇器 使用：：

::before

::after

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>偽元素選擇器</title><style>/* 在第一個兒子前面加一個元素，比如加A ,在頁面中可以呈現，但是鼠標放上去無法選中*/ul::before{content: "A";}/* 在最后一個兒子的后面加一個元素，比如加B ,在頁面中可以呈現，但是鼠標放上去無法選中*/ul::after{content: "B";}/* 如果想在每一個li前加一個元素，比如在每個li前面加個*： */ul>li::before{content: "*";}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

演示結果：

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/89595.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/89595.shtml
英文地址，請注明出處：http://en.pswp.cn/web/89595.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

7月19日 臺風“韋帕“強勢逼近：一場與時間賽跑的防御戰

7月19日 臺風“韋帕“強勢逼近：一場與時間賽跑的防御戰

中央氣象臺7月19日10時繼續發布臺風黃色預警，今年第6號臺風"韋帕"正以每小時20-25公里的速度向西偏北方向移動，強度逐漸加強。這個來自海洋的"不速之客"中心附近最大風力已達10級（25米/秒），預計將于20日下午至夜間在廣東深圳到海南文昌一帶沿海登陸，…
閱讀更多...
學習 Python 爬蟲需要哪些基礎知識？

學習 Python 爬蟲需要哪些基礎知識？

學習 Python 爬蟲需要掌握一些基礎技術和概念。 1. Python 基礎語法 這是最根本的前提&#xff0c;需要熟悉&#xff1a; - 變量、數據類型&#xff08;字符串、列表、字典等&#xff09; - 條件判斷、循環語句 - 函數、類與對象 - 模塊和包的使用&#xff08;如 import 語…
閱讀更多...
IELTS 閱讀C15-Test 2-Passage 2

IELTS 閱讀C15-Test 2-Passage 2

繼續雅思上分實驗。這次正確率是10/13&#xff0c;還是挺讓我吃驚的&#xff0c;因為我又沒有完全讀懂&#xff01; 題型1-填空題這道題目很簡單&#xff0c;同樣地去原文段落里找就好&#xff0c;最后一個空填錯了是因為我不知道mitigate就是decrease同義詞。 題型2-人物匹配題…
閱讀更多...
7.18 Java基礎 |

7.18 Java基礎 |

以下內容&#xff0c;參考Java 教程 | 菜鳥教程&#xff0c;下邊是我邊看邊記的內容&#xff0c;以便后續復習使用。 多態&#xff1a; 繼承&#xff0c;接口就是多態的具體體現方式。生物學上&#xff0c;生物體或物質可以具有許多不同的形式或者階段。 多態分為運行時多態&…
閱讀更多...
網絡安全知識學習總結 Section 11

網絡安全知識學習總結 Section 11

一、實驗知識總結&#xff08;模擬&#xff09;等價路由配置實驗并抓包分析按流分析實驗拓撲圖&#xff1a;AR1配置&#xff1a;<Huawei>sys [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip address 192.168.1.1 30 [Huawei-GigabitEthernet0/0/0]int g0/0/1 [Huaw…
閱讀更多...
VBA 運用LISTBOX插件，選擇多個選項，并將選中的選項回車錄入當前選中的單元格

VBA 運用LISTBOX插件，選擇多個選項，并將選中的選項回車錄入當前選中的單元格

維護好數據&#xff0c;并新增一個activeX列表框插件Private Sub Worksheet_SelectionChange(ByVal Target As Range)If Target.Count > 1 Then Exit SubIf Target.Row > 2 And Target.Row < 10 And Target.Column 2 Then 選擇操作范圍With ListBox1.MultiSelect 1 …
閱讀更多...
ASP .NET Core 8實現實時Web功能

ASP .NET Core 8實現實時Web功能

ASP.NET Core SignalR 是一個開放源代碼庫&#xff0c;可用于簡化向應用添加實時 Web 功能。 實時 Web 功能使服務器端代碼能夠將內容推送到客戶端。以下是 ASP.NET Core SignalR 的一些主要功能&#xff1a;自動處理連接管理同時向所有連接的客戶端發送消息。 例如聊天室向特定…
閱讀更多...
最新版谷歌瀏覽器 內網安裝 pdf無法預覽

最新版谷歌瀏覽器 內網安裝 pdf無法預覽

最新版谷歌瀏覽器 內網安裝 pdf無法預覽 谷歌下載地址 谷歌下載地址 不同的瀏覽器版本&#xff0c;兼容的js標準不一樣 js標準也在不斷升級&#xff0c;增加新的方法。
閱讀更多...
NX二次開發常用函數坐標轉化UF_MTX4_csys_to_csys和UF_MTX4_vec3_multipl

NX二次開發常用函數坐標轉化UF_MTX4_csys_to_csys和UF_MTX4_vec3_multipl

一、UF_MTX4_csys_to_csys 1.1 函數名稱 UF_MTX4_csys_to_csys1.2 函數中各參數解釋&#xff1a;函數參數解釋&#xff1a; 第1個參數為輸入&#xff1a; 輸入const double 雙精度類型的參數&#xff0c;參數的變量格式為from_origin [ 3 ]&#xff0c;坐標系&#xff…
閱讀更多...
JAVA中的Collections 類

JAVA中的Collections 類

文章目錄前言一、 排序方法 sort() 和 reverseOrder()1. sort(List<T> list)2.sort(List<T> list, Comparator<? super T> c)二、查找方法 max(), min()1.max(Collection<? extends T> coll)2.min(Collection<? extends T> coll)3.max(Collec…
閱讀更多...
統計學習方法

統計學習方法

一、統計學習方法步驟 得到一個有限的訓練數據集合確定學習模型的集合-假設空間確定模型選擇的準則-策略實現求解最優模型的算法-算法通過學習方法選擇最優模型利用學習的最優模型對新數據進行預測或分析 二、統計學習方法分類 三、統計學習的基本分類&#xff08;監督學習&a…
閱讀更多...
windows docker-01-desktop install windows10 + wls2 啟用

windows docker-01-desktop install windows10 + wls2 啟用

windows10 安裝 docker 版本信息確認 需要區分 windows 是 amd64 還是 arm64 powershell 中執行&#xff1a; > echo $env:PROCESSOR_ARCHITECTURE AMD64下載 官方 https://www.docker.com/products/docker-desktop/ 下載 windows amd64 下載好了直接安裝。 如何驗證…
閱讀更多...
Elasticsearch集群出現腦裂（Split-Brain）如何排查原因和處理？

Elasticsearch集群出現腦裂（Split-Brain）如何排查原因和處理？

Elasticsearch集群出現腦裂（Split-Brain）如何排查原因和處理？ 1. 腦裂（Split-Brain）背景 定義：腦裂是指 Elasticsearch 集群由于網絡分區（network partition）或其他原因分裂成多個獨立的子集群，每個子集群認為自己是主集群，導致不同的子集群可能獨立處理請求，造成數…
閱讀更多...
Apache Ignite 的 Pages Writes Throttling（頁面寫入節流）

Apache Ignite 的 Pages Writes Throttling（頁面寫入節流）

&#x1f31f; 一、什么是 Checkpointing&#xff08;檢查點機制&#xff09;&#xff1f; 在 Apache Ignite 中&#xff1a; 數據是先保存在內存中&#xff08;RAM&#xff09;&#xff0c;然后異步寫入磁盤。當數據被修改時&#xff0c;它首先被更新在內存中的“頁”上&#…
閱讀更多...
uni-app 學習筆記：使用深度選擇器修改第三方庫組件的樣式

uni-app 學習筆記：使用深度選擇器修改第三方庫組件的樣式

在uni-app中&#xff0c;深度選擇器&#xff08;Deep Selector&#xff09;是一個非常重要的概念&#xff0c;它允許父組件穿透樣式隔離&#xff0c;從而修改子組件的內部樣式。1.什么是uni-app深度選擇器深度選擇器是一種CSS選擇器&#xff0c;用于穿透組件的樣式隔離機制&…
閱讀更多...
物聯網IOT平臺到底是啥

物聯網IOT平臺到底是啥

物聯網IOT平臺&#xff1a;萬物互聯的智慧中樞清晨&#xff0c;智能鬧鐘輕柔喚醒你&#xff0c;咖啡機自動開始沖泡&#xff1b;離家時&#xff0c;空調自動關閉&#xff0c;安防攝像頭啟動&#xff1b;辦公室內&#xff0c;生產線傳感器實時回傳設備狀態&#xff0c;倉庫管理系…
閱讀更多...
MySQL詳解二

MySQL詳解二

MySQL詳解二索引主鍵索引唯一索引普通索引組合索引全文索引主鍵選擇約束索引實現B樹聚集索引輔助索引索引存儲innodb 體系結構最左匹配原則覆蓋索引索引下推索引失效索引原則索引 數據庫中的數據是以記錄為單位的&#xff0c;如果一條一條進行查找&#xff0c;幾十萬數據就已經…
閱讀更多...
深度學習中的模型剪枝工具Torch-Pruning的使用

深度學習中的模型剪枝工具Torch-Pruning的使用

Torch-Pruning(TP)是一個結構化剪枝框架&#xff0c;源碼地址&#xff1a;https://github.com/VainF/Torch-Pruning&#xff0c;最新發布版本v1.6.0&#xff0c;License為MIT。 TP支持對各種深度神經網絡進行結構化剪枝。與通過掩碼將參數設置為零的torch.nn.utils.prune不同&a…
閱讀更多...
力扣-121.買賣股票的最佳時機

力扣-121.買賣股票的最佳時機

121.買賣股票的最佳時機 class Solution {public int maxProfit(int[] prices) {int min prices[0];int max 0;for (int i 1; i < prices.length; i) {max Math.max(prices[i] - min, max);if (prices[i] < min) {min prices[i];}}return max;} }小結&#xff1a;貪…
閱讀更多...
lvs原理及實戰部署

lvs原理及實戰部署

一、集群與分布式系統 1 集群 1-1概念 集群式架構是將多個相同或相似的節點組合在一起&#xff0c;形成一個邏輯上的 “整體”&#xff0c;對外提供統一的服務或資源。節點之間通常具有較高的同構性&#xff08;硬件、軟件配置相似&#xff09;&#xff0c;且緊密協作。 1-2 三…
閱讀更多...
最新文章

Copyright @ 2022~2023