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的id、class、pseudo-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++ 類為數據抽象提供了可能
62、django之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 &
關於Form、ModelForm的一些操作(持續更新)
mit mar rim sub field 後端 錯誤信息 關於 eth 1、前端循環:後端傳到前端的form是可以循環的,以此獲得想要展示的元素 <form method="post" class="form-horizontal" novalidate>
css取消input、select默認樣式(手機端)
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中下劃線的一部分應用,在不同的語言中
網關、DNS、DHCP協議的解釋(超經典)
內容 數據報 現在 準備 門牌號 土豆 -- CP 情況 計算機主機網關的作用是什麽? 網關、DNS、DHCP協議的解釋(超經典)計算機主機網關的作用是什麽? 假設你的名字叫小不點,你住在一個大院子裏,你的鄰居有很多小夥伴,在門口傳達室還有個看大門
【劍指offer】18、刪除鏈表的(重復)節點
ica 這也 思路 遍歷 排序 時間 劍指offer 復雜度 例如 題目一 在O(1)時間內刪除鏈表節點,已知刪除節點的指針。 思路 關鍵是已知刪除節點的指針,則可以將下一個節點復制到當前節點,再將當前節點指向下下個節點。 這樣相當於用到的是 當前節點、下個節點、下下個節點
銳捷7716、7708抓流表(抓包)
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++類為資料抽象提供了可能。它們向外界提供了大量用於操作物件資料的公共方法,也就
安裝pydot、protobuf、graphviz並檢視版本(包括libprotoc)
安裝pydot、protobuf、graphviz並檢視版本(包括libprotoc) 更新於2018.10.25。 安裝 pydot sudo apt install python-pydot python-pydot-ng GraphViz sudo apt
Java 013 StringBuffer類、Arrays類(常見排序)、包裝類(Integer類)
知識點梳理 心得體會 小知識點 1.執行緒安全與不安全 概念:程式碼所在的程序中有多個執行緒在同時執行,而這些執行緒可能會同時執行這段程式碼。如果每次執行結果和單執行緒執行的結果是一樣的,而且其他的變數的值也和預期的是一樣的,就是執行緒安全的。執行緒安全的程式,多程序需要訪
scrapy生成csv檔案空行、csv檔案開啟亂碼(解決方案)
一、scrapy生成csv檔案會有多餘的空行 當使用scrapy crawl testspider -o test.csv後,生成的預設csv檔案每一行之間是有空行的,解決的方法是修改scrapy的原始碼 首先開啟C:\Users\fengyun\AppData\Local\Programs\Python