前端-CSS-day1

目錄

1、初識CSS

2、CSS引入方式

3、標簽選擇器

4、類選擇器

5、id選擇器

6、通配符選擇器

7、畫盒子

8、字體大小

9、字體粗細

10、字體傾斜

11、行高

12、行高-垂直居中

13、字體族

14、font屬性

15、文本縮進

16、文本對齊方式

17、圖片對齊方式

18、文本修飾線

19、文字顏色

20、調試工具

21、綜合案例1-新聞詳情

22、綜合案例2-CSS簡介

1、初識CSS

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初識 CSS</title><style>/* CSS 代碼 *//* 選擇器 { CSS屬性 } */p {color: red;font-size: 30px;}</style>
</head>
<body><p>體驗 CSS</p>
</body>
</html>

2、CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 引入方式</title><!-- link 引入外部樣式表： rel:關系，樣式表  herf:CSS文件地址 --><link rel="stylesheet" href="./my.css">
</head>
<body><p>這是 p 標簽</p><!-- 引入行內樣式表，style=" CSS 屬性 " --><div style="color: green; font-size: 30px;">這是 div 標簽</div>
</body>
</html>
/* 這是CSS文件，放CSS代碼 */
/* 選擇器 { CSS 屬性 } */
p {color: red;
}

3、標簽選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>標簽選擇器</title><style>/* 特點：選中同名標簽，設置相同的樣式，無法差異化同名標簽的樣式 */p {color: red;}</style>
</head>
<body><p>這是 p 標簽</p><p>1111</p><p>2222</p>
</body>
</html>

4、類選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>類選擇器</title><style>/* 定義類選擇器 */.red {color: red;}.size {font-size: 30px;}</style>
</head>
<body><!-- 使用類選擇器 --><!-- 一個類選擇器可以給多個標簽使用 --><p class="red">111111</p><p>222222</p><!-- 一個標簽可以使用多個類選擇器，class屬性值寫多個類名，類名用空格隔開 --><div class="red size">div 標簽</div>
</body>
</html>

5、id選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id選擇器</title><style>/* 定義id選擇器 */#red {color: red;}</style>
</head>
<body><!-- 使用id選擇器 --><div id="red">div 標簽</div>
</body>
</html>

6、通配符選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符選擇器</title><style>* {color: red;}</style>
</head>
<body><p>p 標簽</p><div>div 標簽</div><h1>h1 標簽</h1><ul><li>li</li><li>li</li><li>li</li></ul><strong>strong</strong>
</body>
</html>

7、畫盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>畫盒子</title><style>.red {/* 寬度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

8、字體大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體大小</title><style>/* 谷歌瀏覽器文字有默認大小 16px */p {/* font-size 屬性必須有單位，否則屬性不生效 */font-size: 30px;}</style>
</head>
<body><p>測試字體大小</p><div>測試默認字體大小</div>
</body>
</html>

9、字體粗細

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體粗細</title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>h3 標簽</h3><div>div 標簽</div>
</body>
</html>

10、字體傾斜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體傾斜</title><style>em {font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>em 標簽</em><div>div 標簽</div>
</body>
</html>

11、行高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高</title><style>p {font-size: 20px;/* line-height: 30px; *//* 行高值是數字，表示是當前標簽字體大小的倍數 */line-height: 2;}</style>
</head>
<body><p>今年受成本驅動、需求拉動以及全球糧價上漲等各種因素疊加影響，我國糧食價格整體上揚，小麥、玉米、大豆價格高位波動，水稻價格運行平穩，優質優價特征明顯，農民擇機擇時售糧，實現種糧收益最大化。但種糧成本持續攀升成為影響農民增收的“攔路虎”。這是因為，在去年高糧價的刺激下，今年土地租金以及化肥、農藥、柴油等農資價格大幅上漲，種糧成本隨之增加。加之今年糧食生產遭遇去年北方罕見秋雨秋汛、今年“南旱北澇”等極端天氣，雖然沒有帶來災害性后果，但一些農戶為抗災付出更多生產成本，種糧農戶收益空間進一步收窄。</p>
</body>
</html>

12、行高-垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中</title><style>div {height: 100px;background-color: skyblue;/* 注意：只能單行文字垂直居中 */line-height: 100px;}</style>
</head>
<body><div>文字</div>
</body>
</html>

13、字體族

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體族</title><style>div {font-family: 楷體;}</style>
</head>
<body><div>測試文字</div>
</body>
</html>

14、font屬性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>font 屬性</title><style>/* 文字傾斜、文字加粗、字體大小是30px、行高2倍、楷體 */div {/* font: italic 700 30px/2 楷體; *//* font 屬性必須寫字號和字體，否則屬性不生效 */font: 30px 楷體;/* font: italic 700 30px/2 ; */}</style>
</head>
<body><div>測試 font 屬性</div>
</body>
</html>

15、文本縮進

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本縮進</title><style>p {text-indent: 2em;}</style>
</head>
<body><p>今年受成本驅動、需求拉動以及全球糧價上漲等各種因素疊加影響，我國糧食價格整體上揚，小麥、玉米、大豆價格高位波動，水稻價格運行平穩，優質優價特征明顯，農民擇機擇時售糧，實現種糧收益最大化。但種糧成本持續攀升成為影響農民增收的“攔路虎”。這是因為，在去年高糧價的刺激下，今年土地租金以及化肥、農藥、柴油等農資價格大幅上漲，種糧成本隨之增加。加之今年糧食生產遭遇去年北方罕見秋雨秋汛、今年“南旱北澇”等極端天氣，雖然沒有帶來災害性后果，但一些農戶為抗災付出更多生產成本，種糧農戶收益空間進一步收窄。</p>
</body>
</html>

16、文本對齊方式

<!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 {/* 本質：居中的是文字內容，不是標簽 */text-align: center;/* 左對齊： text-align: left; *//* 右對齊： text-align: right; */}</style>
</head>
<body><h1>標題文字</h1>
</body>
</html>

17、圖片對齊方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖片對齊方式</title><style>div {text-align: center;}</style>
</head>
<body><div><img src="./cat2.jpg" alt=""></div>
</body>
</html>

18、文本修飾線

<!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 {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a 標簽，去掉下劃線</a><div>div 標簽，添加下劃線</div><p>p 標簽，添加刪除線</p><span>span 標簽，添加頂劃線</span>
</body>
</html>

19、文字顏色

<!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 {background-color: aqua;/* color: red; *//* color: rgb(0,255,0); *//* color: rgba(0,0,0,0.3); *//* color: #0000ff; */color: #00f;}</style>
</head>
<body><h1>h1 標簽</h1>
</body>
</html>

20、調試工具

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>調試工具</title><style>/*調試工具的細節：1、如果是錯誤的屬性，有黃色嘆號2、CSS屬性的前面有多選框，如果勾選，這個屬性生效；如果不勾選，這個屬性不生效*/div {color: red;font-size: 66px;}</style>
</head>
<body><div>測試文字</div>
</body>
</html>

21、綜合案例1-新聞詳情

<!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 {text-align: center;font-weight: 400;font-size: 30px;color: #333;}div {font-size: 14px;color: #999;}p {text-indent: 2em;font-size: 18px;color: #333; }.pic {text-align: center;}</style>
</head>
<body><h1>在希望的田野上 | 湖北秋收開鐮 各地多舉措保增產增收</h1><div>來源：央視網 | 2222年12月12日 12:12:12</div><p><strong>央視網消息：</strong>眼下，湖北省秋收開鐮已有一周多的時間。水稻收割已經超過四成，玉米收割七成。湖北省通過大力推廣新品種水稻，建設高標準農田等一系列措施，為秋糧穩產提供有力支撐。</p><p>中稻占據了湖北全年糧食產量的一半以上。在湖北的主產區荊門市，370萬畝中稻已經收割四成以上。</p><div class="pic"><img src="./img.jpg" alt=""></div><p>王化林說的新品種，是湖北省研發的雜交水稻“華夏香絲”，不僅產量高，還具有抗病、抗倒、抗高溫的特性。在荊門漳河鎮的一工程示范田內，像“華夏香絲”這樣抗旱節水的品種還有20多個，這些水稻新品將在荊門全面推廣，確保來年增產增收。</p><p>此外，湖北還大力推進高標準農田建設。截至今年6月，已建成3980萬畝高標準農田。目前，湖北全省仍有1800多萬畝中稻正在有序收割中，預計10月中旬收割完畢。</p>
</body>
</html>

22、綜合案例2-CSS簡介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 簡介</title><style>h1 {color: #333;}p {text-indent: 2em;font-size: 14px;color: #444;line-height: 30px;}a {color: #0069c2;}li {font-size: 14px;color: #444;line-height: 30px;}</style>
</head>
<body><h1>CSS（層疊樣式表）</h1><p>層疊樣式表 (Cascading Style Sheets，縮寫為 CSS），是一種 <a href="#">樣式表</a> 語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。</p><p><strong>CSS 是開放網絡的核心語言之一</strong>，由 W3C 規范 實現跨瀏覽器的標準化。CSS 節省了大量的工作。 樣式可以通過定義保存在外部.css 文件中，同時控制多個網頁的布局，這意味著開發者不必經歷在所有網頁上編輯布局的麻煩。CSS 被分為不同等級：CSS1 現已廢棄， CSS2.1 是推薦標準， CSS3 分成多個小模塊且正在標準化中。</p><ul><li>CSS 介紹 如果你是 Web 開發的新手，請務必閱讀我們的 CSS 基礎 文章以學習 CSS 的含義和用法。</li><li>CSS 教程 我們的 CSS 學習區 包含了豐富的教程，它們覆蓋了全部基礎知識，能使你在 CSS 之路上從初出茅廬到游刃有余。</li><li>CSS 參考 針對資深 Web 開發者的 <a href="#">詳細參考手冊</a> ，描述了 CSS 的各個屬性與概念。</li></ul>
</body>
</html>

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

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

相關文章

解鎖萬能文件內容提取器：Apache Tika

解鎖萬能文件內容提取器：Apache Tika

01 引言 在日常工作中&#xff0c;你是否曾為這些場景頭疼過&#xff1f; 堆積如山的PDF、Word、Excel文檔&#xff0c;如何快速提取關鍵信息&#xff1f;用戶上傳的文件五花八門&#xff0c;如何自動識別類型并安全處理&#xff1f;構建搜索引擎時&#xff0c;如何讓系統“讀懂…
閱讀更多...
gemini-cli初體驗

gemini-cli初體驗

目錄 準備配置環境變量運行使用基礎使用配置MCP調用MCP 參考 準備 NodeJS 18版本 配置環境變量 設置GEMINI_API_KEY 變量&#xff0c;在https://aistudio.google.com/apikey創建key 設置代理&#xff08;可選&#xff0c;取決于您的網絡&#xff09;,不配置可能會報錯 api e…
閱讀更多...
Java --類變量和類方法--main語句

Java --類變量和類方法--main語句

1. 類變量和類方法 介紹&#xff1a; 類變量也叫靜態變量/靜態屬性&#xff0c;是該類的所有對象共享的變量&#xff0c;任何一個該類的對象去訪問它時&#xff0c;取到的都是相同的值&#xff0c;同樣任何一個該類的對象去修改它時&#xff0c;修改的也是同一個變量。 語法…
閱讀更多...
spring boot項目配置使用minion

spring boot項目配置使用minion

一. Minio概述 Minio是一款開源的高性能對象存儲服務，兼容Amazon S3 API，適用于私有云、混合云及邊緣計算場景。它采用分布式架構設計，支持水平擴展，提供數據加密、版本控制、生命周期管理等企業級功能，適用于存儲非結構化數據（如圖片、視頻、日志等）。 核心特性 S3兼…
閱讀更多...
＜5＞_Linux進程控制

＜5＞_Linux進程控制

目錄 一&#xff0c;進程創建&#xff0c;fork/vfork 1&#xff0c;fork創建子進程&#xff0c;操作系統都做了什么 2&#xff0c;寫時拷貝的做了什么 二&#xff0c;進程終止&#xff0c;echo $&#xff1f; 1&#xff0c;進程終止時&#xff0c;操作系統做了什么 2&…
閱讀更多...
阿里云服務器正確配置 Docker 國內鏡像的方法

阿里云服務器正確配置 Docker 國內鏡像的方法

&#x1f4e6; 原理說明&#xff1a;什么是“Docker 鏡像加速器”&#xff1f; Docker 默認會從官方倉庫 registry-1.docker.io 拉取鏡像。由于網絡原因&#xff0c;在中國大陸訪問這個地址較慢甚至失敗。 鏡像加速器的作用是&#xff1a; 在國內部署一個緩存服務器&#xf…
閱讀更多...
PH熱榜 | 2025-07-05

PH熱榜 | 2025-07-05

1. todai 標語&#xff1a;你的第一份個性化快樂生活指數 介紹&#xff1a;Todai 是你個人的人工智能助手&#xff0c;幫助你獲得心理清晰和情感平衡。你可以隨時隨地記錄自己的情緒&#xff0c;發現情緒變化的規律&#xff0c;并獲取基于科學的工具。 產品網站&#xff1a;…
閱讀更多...
c++ duiLib環境集成

c++ duiLib環境集成

duiLib的Github鏈接&#xff1a;https://github.com/duilib/duilib 使用vcpkg快速安裝duilib以及配置。步驟如下&#xff1a; 1、用git下載vcpkg&#xff0c;下載報錯&#xff0c;這個錯誤通常表明在Git克隆過程中&#xff0c;與GitHub服務器的SSL連接被意外重置。改用http下…
閱讀更多...
一項基于粒子圖像測速PIV系統的泥石流模擬沖擊實驗

一項基于粒子圖像測速PIV系統的泥石流模擬沖擊實驗

1實驗背景 全國進入“七下八上”防汛關鍵期&#xff0c;泥石流作為山區常見地質災害&#xff0c;突發性強&#xff0c;破壞力大&#xff0c;對人民群眾生命財產安全造成威脅&#xff0c;傳統觀測手段難以實現對碎石運動軌跡與水流場耦合效應的精細觀測。而粒子圖像測速PIV技術…
閱讀更多...
ADAS功能介紹

ADAS功能介紹

ADAS功能介紹 ADAS&#xff08;Advanced Driving Assistance System&#xff09;高級駕駛輔助系統&#xff0c;可分為如下幾大類功能。 IA&#xff08;Information Assist&#xff09;信息輔助類 IA類功能&#xff0c;均不包含駕駛行為的控制。這些功能又可以進一步細分為三…
閱讀更多...
【LUT技術專題】CLUT代碼講解

【LUT技術專題】CLUT代碼講解

本文是對CLUT技術的代碼講解&#xff0c;原文解讀請看CLUT文章講解。 1、原文概要 CLUT利用矩陣在保持3DLUT映射能力的前提下顯著降低了參數量。整體流程如下所示。 整體還是基于3D-LUT的框架&#xff0c;只不過添加了一個壓縮自適應的變換矩陣。作者使用的損失函數在3DLUT的…
閱讀更多...
在LinuxMint 22.1(Ubuntu24.04)上安裝使用同花順遠航版

在LinuxMint 22.1(Ubuntu24.04)上安裝使用同花順遠航版

剛剛在LinuxMint 22.1(Ubuntu24.04)安裝完成同花順遠航版&#xff0c;體驗特別好&#xff0c;忍不住要及時給深受Linux平臺無好用行情軟件之苦的朋友們進行分享了。在此之前我一直只能用同花順Linux原生版的行情軟件&#xff0c;但是該軟件只有很基本的行情功能&#xff0c;而且…
閱讀更多...
解決vue3路由配合Transition時跳轉導致頁面不渲染的問題

解決vue3路由配合Transition時跳轉導致頁面不渲染的問題

問題復現 <router-view v-slot"{ Component, route }"><transition name"fade" mode"out-in"><keep-alive><component :is"Component" :key"route.path" /></keep-alive></transition>…
閱讀更多...
java: 無法訪問org.springframework.boot.SpringApplication，類文件具有錯誤的版本 61.0, 應為 52.0

java: 無法訪問org.springframework.boot.SpringApplication，類文件具有錯誤的版本 61.0, 應為 52.0

問題 java: 無法訪問org.springframework.boot.SpringApplication 錯誤的類文件: /D:/.m2/repository/org/springframework/boot/spring-boot/3.3.13/spring-boot-3.3.13.jar!/org/springframework/boot/SpringApplication.class 類文件具有錯誤的版本 61.0, 應為 52.0 請刪除…
閱讀更多...
Docker拉取nacos鏡像

Docker拉取nacos鏡像

以下是使用 Docker 拉取并運行 Nacos&#xff08;阿里巴巴開源的配置中心和服務發現組件&#xff09;鏡像的詳細指南&#xff1a; 1. 拉取 Nacos 官方鏡像 拉取最新版 Nacos 鏡像&#xff08;推薦指定版本以避免兼容性問題&#xff09;&#xff1a; # 拉取最新版本&#xff…
閱讀更多...
【CTF-Web環境搭建】kali

【CTF-Web環境搭建】kali

Kali虛擬機下載 這里在官網上下載下kali虛擬機Get Kali | Kali Linux 網速比較慢的話打開一下加速器 下載完成后 得到一個壓縮包 選擇一個合適的地方將這個壓縮包解壓一下 記住這個文件目錄 這里為了后續方便 簡歷一個叫做Virtual Machines的文件夾 里面就可以放不同的虛擬機…
閱讀更多...
微服務架構的演進：邁向云原生

微服務架構的演進：邁向云原生

微服務架構的演進&#xff1a;邁向云原生ps:最近在學習的時候&#xff0c;發現好多技術方案最終都有云原生的影子&#xff0c;這里淺談一下云原生的發展趨勢隨著互聯網技術的發展&#xff0c;軟件開發模式經歷了從單體應用到微服務架構的重大轉變。而在今天&#xff0c;微服務架…
閱讀更多...
服務器如何配置防火墻規則開放/關閉端口？

服務器如何配置防火墻規則開放/關閉端口？

配置服務器防火墻規則&#xff08;開放/關閉端口&#xff09;是服務器安全管理的基礎操作&#xff0c;不同操作系統和防火墻工具的配置方式有所不同。以下是主流系統的詳細操作指南&#xff1a;一、Linux系統&#xff08;iptables/firewalld/UFW&#xff09;1. iptables&#x…
閱讀更多...
基于SpringBoot+Redis實現外呼頻次限制功能

基于SpringBoot+Redis實現外呼頻次限制功能

針對外呼場景中的號碼頻次限制需求&#xff08;如每3天只能呼出1000通電話&#xff09;&#xff0c;我可以提供一個基于Spring Boot和Redis的完整解決方案。 方案設計 核心思路 使用Redis的計數器過期時間機制 采用滑動窗口算法實現精確控制 通過Lua腳本保證原子性操作 實…
閱讀更多...
下一代 2D 圖像設計工具「GitHub 熱點速覽」

下一代 2D 圖像設計工具「GitHub 熱點速覽」

長期以來&#xff0c;2D 設計領域似乎已是 Adobe 與 Figma 的天下&#xff0c;層疊的圖層、熟悉的工具欄&#xff0c;一切都顯得那么順理成章&#xff0c;卻也讓不少設計師在創意的邊界上感到了些許乏力。當我們以為設計工具的革新只能是小修小補時&#xff0c;開源社區再次扮演…
閱讀更多...
最新文章

Copyright @ 2022~2023