CSS語法中的選擇器與屬性詳解

CSS:層疊樣式表,Cascading Style Sheets 層疊樣式表
內容和樣式分離解耦,便于修改樣式。
特殊說明:

  1. 最后一條聲明可以沒有分號,但是為了以后修改方便,一般也加上分號
  2. 為了使用樣式更加容易閱讀,可以將每條代碼寫在一個新行內
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS概述</title>
<!--外鏈的css可以可以影響多個html影響多個頁面起作用,作用域大優先級低--><link rel="stylesheet" href="css/style.css">
<!--    style就是css樣式的設置,這是內嵌樣式,對當前頁面的html的結構發生變化--><style>p {font-size: 24px;color: cornflowerblue;font-weight: bolder;}</style>
</head>
<body>
<!--行內css標簽優先級 > 內嵌css樣式 > 外鏈css樣式 --><p style="color: darkgreen">天使投資早期投資,尤其指的是個人早期投資</p><p>VC:VC是一種將資本投入高成長型企業的私募股權基金。VC往往在創業公司的早期階段進行投資,同時提供戰略和管理方面的支持</p><p>PE:PE是指利用私募基金投資于不公開交易的公司或不上市公司的股權</p>
</body>
</html>

外鏈代碼

 p {font-size: 24px;color: red;font-weight: bolder;}

執行結果
在這里插入圖片描述

標簽選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>標簽選擇器</title><style>body{background-color: white;text-align: center;font-size: 12px;}p{font-family: Arial;font-size: 18px;}h1{font-family: '宋體';font-size: 30px;}hr{width: 100px;}</style>
</head>
<body><h1>標題</h1><hr/><p>正文的段落</p>版權所有
</body>
</html>

在這里插入圖片描述

類選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>類選擇器</title>
</head><!--類選擇器和其他標簽不一樣的是,需要用.開頭表示一個類--><style>.one {font-size: 18px;color: darkred;}.two {font-size: 28px;color: aquamarine;}</style>
<body><p class="one">類別1</p><p class="one">類別2</p><p class="two">類別3</p><p class="two">類別4</p>
</body>
</html>

在這里插入圖片描述

id選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    使用id選擇器的原因是為了保證唯一性,它的特點是id不重復,style用#開頭--><title>id選擇器</title><style>#one {font-size: 26px;color: darkgreen;}#two {font-size: 18px;color: darkred;}</style>
</head><body><p id="one">文字1</p><p id="two">文字2</p>
</body>
</html>

執行結果
在這里插入圖片描述

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

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

相關文章

模擬設計的軟件工程項目

考核題目 論文論述題&#xff1a;結合你 參與開發、調研或模擬設計的軟件工程項目 &#xff0c;撰寫一篇論文 完成以下任務&#xff0c;論文題目為《面向微服務架構的軟件系統設計與建模分析》&#xff0c;總分&#xff1a; 100 分。 1. 考核內容&#xff1a; 一、系統論述…

個人理解redis中IO多路復用整個網絡處理流

文章目錄 1.redis網絡處理流2.理解通知機制 1.redis網絡處理流 10個客戶端通過TCP與Redis建立socket連接&#xff0c;發送GET name指令到服務器端。服務器端的網卡接收數據&#xff0c;數據進入內核態的網絡協議棧。Redis通過IO多路復用機制中的epoll向內核注冊監聽這些socket的…

【鄭州輕工業大學|數據庫】數據庫課設-酒店管理系統

該數據課設是一個基于酒店管理系統的數據庫設計 建庫語句 create database hotel_room default charset utf8 collate utf8_general_ci;建表語句 use hotel_room;-- 房型表 create table room_type( id bigint primary key auto_increment comment 房型id, name varchar(50)…

TCP 三次握手與四次揮手詳解

前言 在當今互聯網時代&#xff0c;前端開發的工作范疇早已超越了簡單的頁面布局和交互設計。隨著前端應用復雜度的不斷提高&#xff0c;對網絡性能的優化已成為前端工程師不可忽視的重要職責。而要真正理解并優化網絡性能&#xff0c;就需要探究支撐整個互聯網的基礎協議——…

RTD2735TD/RTD2738 (HDMI,DP轉EDP 高分辨率高刷新率顯示器驅動芯片)

一、芯片概述 RTD2738是瑞昱半導體&#xff08;Realtek&#xff09;推出的一款高性能顯示驅動芯片&#xff0c;專為高端顯示器、便攜屏、專業顯示設備及多屏拼接系統設計。其核心優勢在于支持4K分辨率下240Hz高刷新率及8K30Hz顯示&#xff0c;通過集成DisplayPort 1.4a與HDMI …

C++實現手寫strlen函數

要實現求字符串長度的函數&#xff0c;核心思路是通過指針或索引遍歷字符串&#xff0c;直到遇到字符串結束標志 \0 。以下是兩種常見的實現方式&#xff1a; 指針遍歷版本 #include <iostream> using namespace std; // 指針方式實現strlen size_t myStrlen(const cha…

NVPL 函數庫介紹和使用

文章目錄 NVPL 函數庫介紹和使用什么是 NVPLNVPL 的主要組件NVPL 的優勢安裝 NVPL基本使用示例示例1&#xff1a;使用 NVPL RAND 生成隨機數示例2&#xff1a;使用 NVPL FFT 進行快速傅里葉變換 編譯 NVPL 程序性能優化建議總結 NVPL 函數庫介紹和使用 什么是 NVPL NVPL (NVI…

HTTP相關內容補充

目錄 一、URI 和 URL 二、使用 Cookie 的狀態管理 三、返回結果的 HTTP狀態碼 一、URI 和 URL URI &#xff1a;統一資源標識符 URL&#xff1a;統一資源定位符 URI 格式 登錄信息&#xff08;認證&#xff09;指定用戶名和密碼作為從服務器端獲取資源時必要的登錄信息&a…

MySQL: Invalid use of group function

https://stackoverflow.com/questions/2330840/mysql-invalid-use-of-group-function 出錯SQL: 錯誤原因&#xff1a; 1. 不能在 WHERE 子句中使用聚合&#xff08;或分組&#xff09;函數 2. HAVING 只能篩選分組后的聚合結果或分組字段 # Write your MySQL query statem…

C#財政票查驗接口集成-醫療發票查驗-非稅收入票據查驗接口

財政票據是企事業單位、醫療機構、金融機構等組織的重要報銷憑證&#xff0c;其真實性、完整性和合規性日益受到重視。現如今&#xff0c;為有效防范虛假票據報銷、入賬、資金流失等問題的發生&#xff0c;財政票據查驗接口&#xff0c;結合財政票據識別接口&#xff0c;旨在為…

瀏覽器基礎及緩存

目錄 瀏覽器概述 主流瀏覽器&#xff1a;IE、Chrome、Firefox、Safari Chrome Firefox IE Safari 瀏覽器內核 核心職責 主流瀏覽器內核 JavaScript引擎 主流的JavaScript引擎 瀏覽器兼容性 瀏覽器渲染 渲染引擎的基本流程 DOM和render樹構建 html解析 DOM 渲染…

Ubuntu 安裝Telnet服務

1. 安裝Telnet 客戶端 sudo apt-get install telnet 2. 安裝Telnet 服務器 &#xff08;這樣才能用A電腦的客戶端連接B電腦的Telnet服務&#xff09; sudo apt-get install telnetd 3. 這時候Telnet服務器是無法自我啟動的&#xff0c;需要網絡守護進程服務程序來管理…

AI+預測3D新模型百十個定位預測+膽碼預測+去和尾2025年6月19日第113彈

從今天開始&#xff0c;咱們還是暫時基于舊的模型進行預測&#xff0c;好了&#xff0c;廢話不多說&#xff0c;按照老辦法&#xff0c;重點8-9碼定位&#xff0c;配合三膽下1或下2&#xff0c;殺1-2個和尾&#xff0c;再殺4-5個和值&#xff0c;可以做到100-300注左右。 (1)定…

觀察者模式 vs 發布訂閱模式詳解教程

&#x1f31f;觀察者模式 vs 發布訂閱模式詳解教程 收藏 點贊 關注&#xff0c;持續更新高頻面試知識庫&#xff01;&#x1f680; 一、核心概念&#xff08;總&#xff09; 在軟件開發中&#xff0c;觀察者模式&#xff08;Observer&#xff09; 和 發布訂閱模式&#xff0…

【云馨AI-大模型】MD2Card:從Markdown到知識卡片的完美轉變

Markdown的魅力與挑戰MD2Card的核心功能使用體驗與案例分析總結 在當今這個信息快速傳播的時代&#xff0c;內容創作者們一直在尋找更有效的方式來呈現他們的想法和知識。無論是為了個人學習筆記、團隊內部的知識分享還是對外的內容發布&#xff0c;一個清晰、美觀的展示方式顯…

【實戰教程】OPEN API 雷池社區版自動拉黑IP

老版本使用雷池社區版的時候都需要在界面操作&#xff0c;但是網絡攻擊往往都是無規律的&#xff0c;每次都手動操作非常累 前一段時間雷池社區版剛好開放了OPEN API 功能&#xff0c;可以支持大家使用API的方式進行管理了 但是沒有相關文檔非常難受&#xff0c;一直沒有使用…

Hot100——鏈表專項

目錄 相交鏈表 反轉鏈表 回文鏈表 環形鏈表 合并兩個有序鏈表 相交鏈表 ListNode *getIntersectionNode(ListNode *headA, ListNode *headB) {if (headA nullptr || headB nullptr) {return nullptr;}ListNode *pA headA;ListNode *pB headB;while (pA ! pB) {pA (pA…

Java + Spring Boot 后端防抖切面類AOP代碼問題排查分析

需排查分析的防抖切面類 AOP代碼&#xff1a; package com.weiyu.aop;import com.weiyu.anno.Debounce; import com.weiyu.utils.DebounceUtil; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lang.annotation.Around; import org.aspectj.lang.annotatio…

【FreeRTOS-信號量】

參照正點原子以及以下gitee筆記整理本博客&#xff0c;并將實驗結果附在文末。 https://gitee.com/xrbin/FreeRTOS_learning/tree/master 一、信號量簡介 1、什么是信號量 答&#xff1a;信號量是一種解決同步問題的機制&#xff0c;可以實現對共享資源的有序訪問。 假設有…

C++中decltype / auto 類型自動推導的深入講解

一、基本定義 關鍵字含義出現版本auto根據初始化表達式自動推導類型C11decltype根據表達式的類型推導類型C11 二、二者區別 特性autodecltype(expr)用途聲明變量獲取表達式類型是否需要初始化是否&#xff08;可用表達式&#xff0c;如函數參數&#xff09;是否推導引用否&am…