詳解CSS3.0(Cascading Style Sheet) 層疊級(jí)聯(lián)樣式表
發(fā)布時(shí)間：2021-07-15 17:27:49 作者：BLUcoding 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3.0(Cascading Style Sheet) 層疊級(jí)聯(lián)樣式表的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
CSS3.0(Cascading Style Sheet) 層疊級(jí)聯(lián)樣式表
快速入門：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS01</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>標(biāo)題一</h1>
</body>
</html>
CSS的三種導(dǎo)入方式：
行內(nèi)樣式（優(yōu)先級(jí)最高，但不建議這樣寫）：
<h1 style="color: red;">標(biāo)題一</h1>
內(nèi)部樣式表（不建議這樣寫）：
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>標(biāo)題一</h1>
</body>
外部樣式表（優(yōu)先級(jí)最低，但實(shí)現(xiàn)了HTML與CSS的分離，推薦使用）：
h1 {
color: red;
}
<head>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<h1>標(biāo)題一</h1>
</body>
選擇器：
3種基本選擇器：
- 標(biāo)簽選擇器（權(quán)重最低）
- 類選擇器
- id選擇器（權(quán)重最高）
/* 標(biāo)簽選擇器，會(huì)選擇所有h1標(biāo)簽 */
h1 {
color: red;
background: #3cbda6;
border-radius: 20px;
font-size: 80px;
}
/* 類選擇器，會(huì)選擇所有類名為text-red的元素 */
.text-red{
color: red;
}
/* id選擇器，會(huì)選擇id為description的元素，id必須保證唯一 */
#description{
color: black;
}
<h1>標(biāo)題一</h1> <p class="text-red">content</p> <span class="text-red">content</span> <p id="description">some content</p>
層次選擇器：
- 后代選擇器：在某個(gè)元素內(nèi)的元素（包括子代、孫代…）
- 子選擇器：在某個(gè)元素內(nèi)一層的元素（只包括子代）
- 相鄰選擇器（一個(gè)弟弟選擇器）：某個(gè)元素 之后 的 一個(gè) 同級(jí)選擇器
- 通用選擇器（所有弟弟選擇器）：某個(gè)元素 之后 的 所有 同級(jí)選擇器
/* 后代選擇器 */
body p{
}
/* 子選擇器 */
body>p{
}
/* 相鄰選擇器（弟弟選擇器） */
.active + p{
}
/* 通用選擇器（所有弟弟選擇器） */
.active~p{
}
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<div>
<p>p4</p>
<p>p5</p>
</div>
</body>
結(jié)構(gòu)偽類選擇器：
/* div中的第一個(gè)p元素 */
div p:first-child{
}
/* div中的最后一個(gè)p元素 */
div p:last-child{
}
/* div中的最后一個(gè)p元素 */
div p:last-child{
}
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
屬性選擇器：
/* class為demo中的所有a標(biāo)簽 */
.demo a{
}
/* 存在id的a標(biāo)簽 */
a[id]{
}
/* id為first的a標(biāo)簽 */
a[id=first]{
}
/* href以http開頭的a標(biāo)簽 */
a[href^=http]{
}
/* href以pdf結(jié)尾的a標(biāo)簽 */
a[href$=pdf]{
}
字體樣式(字體，字體風(fēng)格，字體大小，字體粗細(xì)，字體顏色)： font-family: 楷體; font-style:oblique; font-size: 40px; font-weight: bold color: #a13d30; font: italic bolder 12px "楷體";
文本樣式（文本居中對(duì)齊，首行縮進(jìn)兩個(gè)字母，行高，文本裝飾） text-align: center; text-indent: 2em; line-height:30px; text-decoration: underline; 文本陰影（陰影顏色，水平偏移，垂直偏移，陰影半徑） text-shadow: #3cc7f5 -5px 5px 2px a標(biāo)簽去除下劃線： text-decoration: none;
超鏈接偽類：
//默認(rèn)屬性
a{
text-decoration: none;
color: #000000;
}
//鼠標(biāo)進(jìn)入
a:hover{
color: orange
}
//鼠標(biāo)按住未松開
a:active{
color: green
}
//鼠標(biāo)點(diǎn)擊之后
a:visited{
color: red
}
li 標(biāo)簽的樣式：
//去除圓點(diǎn) list-style: none; //空心圓 list-style: circle; //數(shù)字編號(hào) list-style: decimal; //正方形 list-style: square;
背景樣式：
//背景顏色
background-color: blue
//背景圖片(默認(rèn)是 repeat 平鋪效果)
background-image: url("");
//水平平鋪,垂直平鋪,不平鋪
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
盒子模型：
上下外邊距為0，左右居中: margin: 0 auto; 上下左右外邊距為0: margin: 0; 上下外邊距為0，左右外邊距為1px: margin: 0 1px; 設(shè)置上左下右外邊距: margin: 0 10px 1px 10px; 上下左右內(nèi)邊距為10px: padding: 10px; 上下內(nèi)邊距為0，左右內(nèi)邊距為10px: padding: 0 10px 設(shè)置上左下右內(nèi)邊距: padding: 10px 10px 10px 10px
浮動(dòng)：
(圖文詳細(xì))最通俗易懂的CSS 浮動(dòng)float屬性詳解：http://www.dbjr.com.cn/css/714194.html
標(biāo)準(zhǔn)文檔流： 元素默認(rèn)自左往右，從上往下的流式排列方式。分為塊級(jí)元素和行內(nèi)元素
塊級(jí)元素： display: block; block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。 行內(nèi)元素： display: inline; inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。 是塊元素，但可以內(nèi)聯(lián)（在一行）： display: inline-block; 簡(jiǎn)單來說就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。 比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。 元素不顯示也不占用空間： display: none;
定位：
相對(duì)定位（相對(duì)自己原本的位置偏移，它原來的位置仍然被保留在標(biāo)準(zhǔn)文檔流中）
相對(duì)自己原本位置上移20px，右移20px： position: relative; top: -20px; left: 20px;
絕對(duì)定位（它原來的位置脫離了標(biāo)準(zhǔn)文檔流）
絕對(duì)定位 absolute 一般和 relative 搭配使用，絕對(duì)定位的元素會(huì)一層一層地尋找父元素，然后相對(duì)于 relative 父元素定位，否則相對(duì)于瀏覽器定位
<body>
<div class="b g">
ll
<div class="a r">
最外面
<div class="s b">
中間
<div class="ss y">
最里面
</div>
</div>
</div>
</div>
<style>
.b {
height: 900px;
width: 600px;
position: relative;
}
.a {
height: 500px;
width: 600px;
/* position: relative; */
}
.s {
height: 200px;
width: 200px;
position: absolute;
right: 0px;
bottom: 0px;
}
.ss {
height: 50px;
width: 50px;
}
.r {
background-color: red;
}
.b {
background-color: blue;
}
.y {
background-color: yellow;
}
.g {
background-color: green;
}
</style>
</body>
固定定位（相對(duì)于瀏覽器定位，不隨頁(yè)面滾動(dòng)而滾動(dòng)）
<div class="ss g">
</div>
<style>
.ss {
height: 50px;
width: 50px;
position: fixed;
top: 30px;
right: 20px;
}
.g {
background-color: green;
}
</style>
z-index
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
注釋：元素可擁有負(fù)的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）
補(bǔ)充：
設(shè)置元素透明度：
opacity: 0.5
到此這篇關(guān)于詳解CSS3.0(Cascading Style Sheet) 層疊級(jí)聯(lián)樣式表的文章就介紹到這了,更多相關(guān)css Style Sheet樣式表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解CSS3.0(Cascading Style Sheet) 層疊級(jí)聯(lián)樣式表
這篇文章主要介紹了CSS3.0(Cascading Style Sheet) 層疊級(jí)聯(lián)樣式表的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友2021-07-15
這篇文章主要介紹了HTML外部樣式表如何引入CSS樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-12-10
FrontPage怎么自定義設(shè)置CSS外部樣式表?
FrontPage怎么自定義設(shè)置CSS外部樣式表？FrontPage中想要自己制作一個(gè)樣式表，該怎么自定義設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2019-05-22- IE一直是特殊的一個(gè)瀏覽器，我們可以使用一些方法來指定樣式表只在IE瀏覽器下被加載。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-20
CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語(yǔ)總結(jié)
CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來詳細(xì)為您介紹，需要了解的朋友可以參考下2013-01-03
