1. 程式人生 > >CSS的id、class、pseudo-class(偽類)

CSS的id、class、pseudo-class(偽類)

CSS例項

CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告:

這裡寫圖片描述

CSS宣告總是以分號(;)結束,宣告組以大括號({})括起來:

p
{
    color:red;
    text-align:center;
}

id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 “#” 來定義。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title
>
id選擇器</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>這個段落不受該樣式的影響。</p> </body> </html>

效果:
這裡寫圖片描述

class選擇器

class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個點”.”號顯示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>class選擇器</title> 
    <style>
    .center
    {
        text-align:center;
    }
    </style>
</head>

<body>
    <h1 class="center">標題居中</h1>
    <p class="center"
>
段落居中。</p> <p>普通段落</p> </body> </html>

效果:
這裡寫圖片描述

也可以指定特定的HTML元素使用class。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>class選擇器</title> 
    <style>
    p.center
    {
        text-align:center;
    }
    </style>
</head>

<body>
    <h1 class="center">這個標題不受影響</h1>
    <p class="center">這個段落居中對齊。</p> 
</body>
</html>

效果:
這裡寫圖片描述

Pseudo-class(偽類)

CSS偽類是用來新增一些選擇器的特殊效果。
偽類的語法:

selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>偽類選擇器</title> 
        <style>
            a:link {color:#000000;}     /* 未訪問連結*/
            a:visited {color:#00FF00;}  /* 已訪問連結 */
            a:hover {color:#FF00FF;}    /* 滑鼠移動到連結上 */
            a:active {color:#0000FF;}   /* 滑鼠點選時 */
        </style>
    </head>

    <body>
        <p><b><a href="https://www.baidu.com/" target="_blank">這是一個連結</a></b></p>
        <p><b>注意:</b> a:hover 必須在 a:link 和 a:visited之後,需要嚴格按順序才能看到效果。</p>
        <p><b>注意:</b> a:active 必須在 a:hover 之後。</p>
    </body>
</html>

效果:
這裡寫圖片描述

相關推薦

CSS的idclasspseudo-class

CSS例項 CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告: CSS宣告總是以分號(;)結束,宣告組以大括號({})括起來: p { color:red; text-align:center; } id選擇器

用pyqt繪製一個無邊框有陰影帶圖片背景的頂層圓角視窗

物件:(要設定的只有Form和widget) widget在Form內,緊貼著Form,之間隔著Form的layoutMargin(邊緣)的寬度: 物件Form的佈局(邊緣)設定: 物件widget的佈局(邊緣)設定: 思路: 首先先交代: 無邊框用:

獨立模式分佈模式hbase和hadoop HA高可用完全分散式模式。整合配置

一、獨立模式: 1.下載hbase檔案 略 2.tar開 略 3.配置環境變數 略 4.修改配置檔案 在hbase安裝目錄下: //配置jdk路徑 [/conf/hbase-env.sh] export JAVA_HOME=/zdq/jdk //配置hbas

【MyBatis源碼分析】insert方法update方法delete方法處理流程上篇

times database connect 環境 enable clas 它的 java對象 ace 打開一個會話Session 前文分析了MyBatis將配置文件轉換為Java對象的流程,本文開始分析一下insert方法、update方法、delete方法處理的流程,至

C++數據抽象數據封裝接口抽象

adt 優勢 函數 需求 pro 可用 code eight eth 一 、數據抽象 數據抽象是指,只向外界提供關鍵信息,並隱藏其後臺的實現細節,即只表現必要的信息而不呈現細節。 數據抽象是一種依賴於接口(抽象類)和實現分離的編程(設計)技術。C++ 類為數據抽象提供了可能

62django之MTV模型urls,view

9.png mes 法則 調試 mtv 重新 知識點 服務器 bar 今天就進入到python最重要的階段了django框架,框架就像膠水一樣會將我們前面學的所有知識點粘合在一起,所以以前有哪些部分模糊的可以看看前面的隨筆。本篇主要介紹djangoMTV模型,視圖層之路由配

Vue-小demo小效果 合集更新中...

lin auto isa hover json () add ole bce (騰訊課堂學習小demo:https://ke.qq.com/course/256052) 一、簡單的指令應用 ——打擊滅火器 圖片素材點擊騰訊課堂的鏈接獲取 html: 1 &

關於FormModelForm的一些操作持續更新

mit mar rim sub field 後端 錯誤信息 關於 eth 1、前端循環:後端傳到前端的form是可以循環的,以此獲得想要展示的元素 <form method="post" class="form-horizontal" novalidate>

css取消inputselect默認樣式手機端

dex pear put nta 會有 bsp 制作 -a padding IOS端: border-color:transparent; andorid端: 僅僅使用上面的代碼還不夠,可以發現select框在某些瀏覽器(包括微信)內置瀏覽器下 還會有箭頭以及高亮

二十MVC的WEB框架Spring MVC

用戶訪問 跳轉 實現接口 clas simple servle spring exe BE 一、Spring MVC 1、同樣還是導入相應的jar包,將用到的jar包,導入到項目的WebContent/WEB-INF/lib目錄下。 2、web.xml文件 在WEB-INF

讀構建之法第四十七章有感作業四

關系 img 作用域 src 而在 clas com 不同的 第十七 第四章: 問題: 看到這裏的時候,才註意到代碼中的“下劃線”這個東西,在之前的敲代碼過程中並沒有怎麽遇到下劃線,在經過百度後得到了一些答案: 這只是Python中下劃線的一部分應用,在不同的語言中

網關DNSDHCP協議的解釋超經典

內容 數據報 現在 準備 門牌號 土豆 -- CP 情況 計算機主機網關的作用是什麽?   網關、DNS、DHCP協議的解釋(超經典)計算機主機網關的作用是什麽?  假設你的名字叫小不點,你住在一個大院子裏,你的鄰居有很多小夥伴,在門口傳達室還有個看大門

【劍指offer】18刪除鏈表的重復節點

ica 這也 思路 遍歷 排序 時間 劍指offer 復雜度 例如 題目一 在O(1)時間內刪除鏈表節點,已知刪除節點的指針。 思路 關鍵是已知刪除節點的指針,則可以將下一個節點復制到當前節點,再將當前節點指向下下個節點。 這樣相當於用到的是 當前節點、下個節點、下下個節點

銳捷77167708抓流表抓包

end http -- rec any 表示 字符 系列 int 一、流表的含義:Pr SrcAddr DstAddr SrcPort DstPort Vrf SendBytes RecvBytes St6 172.18.15

Linux -lvm -擴容縮容邏輯卷針對ext4

卸載 term dev vpd process splay mage ima 更新 擴容不會丟失文件 lvresize -L 200M /dev/vg1/lv1 重新設置卷大小註意:先卸載,再重新設置大小e2fsck -f /dev/vg1/lv1 檢查磁盤錯誤 (ext

Linux -lvm -擴容縮容邏輯卷針對xfs

resize 需要 vpd 系統 roc tex src oss xfs xfs不支持縮容,不需要卸載 格式化:mkfs.xfs -f /dev/vg1/lv1,再掛載 mount /dev/vg1/lv1 /mnt lvresize -L 300M /dev/

2【C++】資料抽象/資料封裝/介面抽象

一、C++資料抽象 1、定義     資料抽象是指,只向外界提供關鍵資訊,並隱藏其後臺的實現細節,即只表現必要的資訊而不呈現細節。資料抽象是一種依賴於介面和實現分離的程式設計(設計)技術。     C++類為資料抽象提供了可能。它們向外界提供了大量用於操作物件資料的公共方法,也就

安裝pydotprotobufgraphviz並檢視版本包括libprotoc

安裝pydot、protobuf、graphviz並檢視版本(包括libprotoc) 更新於2018.10.25。 安裝 pydot sudo apt install python-pydot python-pydot-ng GraphViz sudo apt

Java 013 StringBufferArrays常見排序包裝Integer

知識點梳理 心得體會 小知識點 1.執行緒安全與不安全 概念:程式碼所在的程序中有多個執行緒在同時執行,而這些執行緒可能會同時執行這段程式碼。如果每次執行結果和單執行緒執行的結果是一樣的,而且其他的變數的值也和預期的是一樣的,就是執行緒安全的。執行緒安全的程式,多程序需要訪

scrapy生成csv檔案空行csv檔案開啟亂碼解決方案

一、scrapy生成csv檔案會有多餘的空行 當使用scrapy crawl testspider -o test.csv後,生成的預設csv檔案每一行之間是有空行的,解決的方法是修改scrapy的原始碼 首先開啟C:\Users\fengyun\AppData\Local\Programs\Python