|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于CSS選擇器的代碼實例以及css優先級的代碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/index.css">
<title>CSS入門第一節</title>
<!-- 嵌入樣式 頁內樣式-->
<style>
p {
color: yellowgreen;
}
</style>
</head>
<body>
<!-- 內斂樣式 -->
<div style="color: red; font-size: 24px; border: 1px solid black;">
我是DIV
</div>
<p>
我是段落標簽
</p>
<h1>
我是大標題
</h1>
</body>
</html>/*index.css文件*/
p {
/* 設置字體大小為:50像素 */
font-size: 50px;
/* 設置p標簽的背景色為銀灰色 */
background-color: silver;
}
span {
font-size: 28px;
}css案例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css練習</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<style>
h1 {
color: green;
}
</style>
<body>
<p style="background-color: red;">設置p標簽的背景色為紅色</p>
<h1>設置H1標簽的字體顏色為綠色</h1>
<span>設置span標簽的文本為14像素</span>
</body>
</html>通配符選擇器 <!DOCTYPE html>
<!-- 通配符選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS選擇器</title>
</head>
<style>
* {
color: #3cd;
}
/* 通配符選擇器：統統都被匹配上，可以選擇到所有的標簽 */
</style>
<body>
<h1>標題</h1>
<p>
內容
</p>
<ul>
<li>北京</li>
<li>南京</li>
<li>山東</li>
</ul>
<strong>這是strong標簽</strong><br/>
<span>demo</span>
</body>
</html>css選擇器 <!DOCTYPE html>
<!-- 標簽選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS選擇器</title>
</head>
<style>
/* 標簽選擇器 */
p {
color: red;
}
li {
background-color: gold;
}
span {
font-size: 50px;
}
/* id選擇器 */
/* id命名規范:必須以字母開頭(不限制大小寫),然后可以包含數字/字母/下劃線/連接符- */
#li-beijing {
background-color: silver;
}
#li-shanghai {
background-color: aquamarine;
}
</style>
<body>
<h1>標題</h1>
<p> 內容</p>
<ul>
<li id="li-beijing">北京</li>
<li id="li-shanghai">南京</li>
<li>山東</li>
</ul>
<strong>這是strong標簽</strong>
<br/>
<span>demo</span>
</body>
</html>類選擇器 <!DOCTYPE html>
<!-- 類選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS的類選擇器</title>
</head>
<style>
.lf-p {
color: green;
}
.fl{
background-color: #cdf;
}
</style>
<body>
<h1>標題</h1>
<p class="p_1"> 段落一</p>
<p class="lf-p fl"> 段落二</p>
<p class="lf-p"> 段落三</p>
</body>
</html>選擇器綜合練習 <!DOCTYPE html>
<!-- 標簽選擇器 類選擇器 id選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>選擇器綜合練習</title>
</head>
<style>
h1 {
color: red;
font-size: 30px;
}
span {
font-size: 18px;
}
#comt {
color: yellow;
/* font-size: 18px; */
}
.date {
color: purple;
/* font-size: 18px; */
}
.articleP{
font-size: 18px;
color: blue;
}
</style>
<body>
<h1>標題</h1>
<p>
<span id="comt">段落</span>
<span class="date">時間</span>
</p>
<p class="articleP">正文</p>
</body>
</html>復合選擇器 <!DOCTYPE html>
<!-- 復合選擇器:標簽指定式選擇器,后代選擇器,并集選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>復合選擇器</title>
<style>
/*
1.請把li中的class等于current的標簽的背景設置為高亮(顏色為藍色)
2.請把class為news的ul標簽下面的所有的li標簽中的文字設置為黑色(#333)
3.請把體育新聞和財經新聞的文字設置為銀灰色
*/
/* 標簽指定式選擇器 */
li.current {
background-color: lightblue;
}
li#home {
font-weight: bold;
/*字體加粗*/
}
/* 后代選擇器 */
.news a {
/* color:#333; */
color: green;
}
/* 并集選擇器 */
.f-news a,
.s-news a {
color: silver;
}
/* 如果兩個優先級一致的話,后面的則優先生效 */
.othernews a {
color: red;
}
/* 并集選擇器 */
html,
body,
p,
dt,
dl,
dd,
ul,
p {
padding: 0;
/* 內邊距 */
margin: 0;
/* 外邊距 */
}
</style>
</head>
<body>
<ul>
<li id="home"><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li class="current"><a href="#">新聞</a></li>
<li><a href="#">售后</a></li>
<li><a href="#">關于</a></li>
</ul>
<ul class="news">
<li><a href="#">哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈</a></li>
</ul>
<dl class="f-news othernews">
<dt><a href="#">財經新聞</a></dt>
<dd><a href="#">內容</a></dd>
<dd><a href="#">內容</a></dd>
<dd><a href="#">內容</a></dd>
</dl>
<dl class="s-news othernews">
<dt><a href="#">體育新聞</a></dt>
<dd><a href="#">內容</a></dd>
<dd><a href="#">內容</a></dd>
<dd><a href="#">內容</a></dd>
</dl>
</body>
</html>子元素選擇器 <!DOCTYPE html>
<!-- 子選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子元素選擇器</title>
<style>
/* 子選擇器 */
p > strong {
color: red;
}
</style>
</head>
<body>
<p>
<p>
<span>段落1</span>
<span>
<strong>段落2</strong>
</span>
<span>段落3</span>
<strong>強調標簽</strong>
</p>
</p>
</body>
</html>屬性選擇器 <!DOCTYPE html>
<!-- 屬性選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<style>
span[class] {
color: green;
}
/* 擁有id屬性的標簽都被選擇出來 */
[id] {
font-size: 50px;
}
span[id="4"] {
color: yellow;
}
/* 屬性包含選擇器 */
span[class~="demo"] {
font-size: 100px;
}
</style>
</head>
<body>
<p>
<span class="cur demo">1</span>
<span>2</span>
<span id="3">3</span>
<span id="4">4</span>
<span>5</span>
</p>
</body>
</html>偽類選擇器 <!DOCTYPE html>
<!-- 偽類選擇器 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽類選擇器</title>
<style>
a:link {
color: red;
}
/* 當鏈接被訪問過了之后,就會添加偽類visited */
a:visited {
color: lawngreen;
}
/* 當鼠標懸停于元素上面的時候,會自動添加偽類:hover */
a:hover {
color: #fff;
background-color: aquamarine
}
/* 當鏈接被點擊,但是鼠標不要放開的時候, 會自動給連接添加active偽類*/
a:active {
color: gold;
}
/* 遵循LoVe HAte 原則,否則可能無法正常顯示*/
/* 獲取到焦點的時候,默認給標簽添加focus效果 */
input:focus{
color: red;
}
</style>
</head>
<body>
<a href="#">首頁</a>
<a href="#">產品</a>
<a href="#">新聞</a>
<a href="/">娛樂</a>
<input type="text" name="" id="">
</body>
</html>偽元素選擇器 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器</title>
<style>
/* 第一個必須是span標簽,第二:是第一個孩子 */
span:first-child {
color: red;
font-size: 50px;
}
/* 段落的首個字符 */
p:first-letter {
font-size: 50px;
color: green;
}
/* 設置一行 */
p::first-line {
color: gold;
}
/* 在標簽前面追加內容 */
#temp::before {
content:"================";
}
/* 在標簽后面追加內容 */
#temp:after {
content:"xxxxxxxxxxxxxxx";
}
</style>
</head>
<body>
<p id="temp">
<span>一</span>
<span>二</span>
<span>三</span>
</p>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
<p>張宜成</p>
</body>
</html>css的特性 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS的特性:層疊性和繼承性</title>
<style>
p {
color: red;
font-size: 40px;
}
p{
color: green;
}
a{
color:inherit; /*繼承父標簽的屬性*/
}
/* 繼承性:父容器設置的樣式,子容器也可以享受同等待遇 */
/*
所有字相關的都可以繼承,比如:color,text-系列/font-系列/line-系列/cursor
并不是所有的CSS屬性都可以繼承,例如,下面的屬性就不具有繼承性:邊框,外邊距,內邊距,背景,定位,元素寬高屬性.
a標簽不繼承父標簽的字體顏色
*/
</style>
</head>
<body>
<p>
層疊性和繼承性
<span>我是Span標簽</span>
<a href="#">我是a標簽,我特立獨行</a>
</p>
<span>我是Span標簽2</span>
</body>
</html>css的優先級 <!DOCTYPE html>
<!-- 第一原則: CSS優先級從高到低: 內聯樣式 嵌入樣式 外部引入樣式 繼承樣式 默認樣式 -->
<!-- 第二原則: ID選擇器 > 類(偽類) > 標簽 > 繼承 > 默認-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 外部引入樣式優先級大于繼承樣式 --><!-- 優先級別可能與嵌入樣式互換,如果將link放到style下面,
則外部引入樣式優先于嵌入樣式 -->
<link rel="stylesheet" href="./css/t.css">
<title>優先級</title>
<style>
/* 繼承樣式大于默認樣式 */
body{
color: blueviolet;
}
/* 嵌入樣式大于外部引入 */
p {
color: green;
font-size: 50px;
background-color: sienna;
}
.fs{
font-style: 400px;
}
#tp #atc{
font-size: 20px;
/* !important是重要的意思,優先級最高高于內斂樣式 */
color:lightsalmon !important;
}
</style>
</head>
<body id="tp">
<!-- 內聯樣式優先級大于嵌入樣式 -->
<p id="atc" class="fs" style="color: blue;">
我是段落
</p>
</body>
<!-- 綜述: -->
<!-- 行內樣式 > 頁內樣式 > 外部引用樣式 > 瀏覽器默認樣式 -->
<!-- important > 內聯 > ID > 偽類/類/屬性選擇 > 標簽 > 偽對象 > 通配符 > 繼承 -->
</html>相關推薦： 以上就是CSS選擇器的代碼實例以及css優先級的代碼實例的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
