當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3(笔记）

發(fā)布時(shí)間：2023/12/3 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3(笔记）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

CSS簡介

CSS是什么

Cascading Style Sheet層疊樣式表
CSS：表現(xiàn)（美化網(wǎng)頁）
字體，顏色，邊距，高度，寬度，背景圖片，網(wǎng)頁定位，網(wǎng)頁浮動

CSS怎么用（快速入門）

CSS選擇器（重點(diǎn)+難點(diǎn)）

美化網(wǎng)頁（文字，陰影，超鏈接，列表，漸變…）

盒子模型

浮動

定位

網(wǎng)頁動畫（特效效果）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/style.css"> </head> <body> <h1>CSS測試</h1> </body> </html> h1{color: crimson; }

CSS的3種導(dǎo)入方式

Title <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>h1{color: green;}</style><link rel="stylesheet" href="css/style.css" /> </head> <body> <h1 style="color: red">這是標(biāo)簽</h1> </body> </html>

外部樣式兩種方法

鏈接式

html

<link rel="stylesheet" href="css/style.css" />

導(dǎo)入式

@import是CSS2.1特有的！

<style>@import url("css/style.css");</style>

選擇器

作用：選擇頁面上的某一個(gè)或者者某一類元素

基本選擇器

1、標(biāo)簽選擇器

選擇一類標(biāo)簽標(biāo)簽{}

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>h1{color: orange;background: blue;border-radius: 10px;}</style> </head> <body> <h1>標(biāo)簽選擇器</h1> </body> </html> 1234567891011121314151617

2、類選擇器 class

選擇所有class一致的標(biāo)簽，跨標(biāo)簽，格式：.類名{},可以復(fù)用

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*類選擇器的格式 .class的名稱{}好處：可以多個(gè)標(biāo)簽歸類，是同一個(gè)class，可以復(fù)用*/.demo1{color: blue;}.demo2{color: red;}.demo3{color: aqua;}</style> </head> <body> <h1 class = "demo1">類選擇器：demo1</h1> <h1 class="demo2">類選擇器：demo2</h1> <h1 class="demo3">類選擇器：demo3</h1> </body> </html> 123456789101112131415161718192021222324252627

3、id 選擇器：

全局唯一，格式：#id名{}

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*id選擇器：id必須保證全局唯一#id名稱{}不遵循就近原則，優(yōu)先級是固定的id選擇器 > 類選擇器 > 標(biāo)簽選擇器*/#demo1{color: aqua;}.demo2{color: red;}#demo2{color: orange;}h1{color: blue;}</style> </head> <body><h1 id="demo1">id選擇器：demo1</h1> <h1 class="demo2" id = "demo2">id選擇器：demo2</h1> <h1 class="demo2">id選擇器：demo3</h1> <h1>id選擇器：demo4</h1> <h1>id選擇器：demo5</h1> </body> </html>

優(yōu)先級：id > class > 標(biāo)簽

層次選擇器

1.后代選擇器（空格）

在某個(gè)元素的后面

/*后代選擇器*/ <style> body p{background:red; } </style>

2.子選擇器 (>)

一代

/*子選擇器*/ <style> body>p{background:orange; } </style>

3.相鄰的兄弟選擇器(+)

同輩

/*相鄰兄弟選擇器：只有一個(gè)，相鄰（向下）*/ <style> .active+p{ background: red } </style><body><p class="active">p1<p><p>p2</p> </body>

4.通用選擇器(~)

結(jié)構(gòu)偽類選擇器

偽類

屬性選擇器（常用）

id + class結(jié)合

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.demo a{display: block;height: 50px;width: 50px;float:left;border-radius: 10px;background: blue;text-align: center;color: beige;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*屬性名，屬性名=屬性值（正則）=表示絕對等于*=表示包含^=表示以...開頭$=表示以...結(jié)尾存在id屬性的元素 a[]{}*//* a[id]{background: red;}*//*id=first的元素*//* a[id=first]{background: aqua;}*//*class中有l(wèi)inks元素*//* a[class = "links item2 first2"]{background: orange;}*//*a[class*="links"]{background: black ;}*//*選中href中以http開頭的元素*/a[href^="http"]{background: orange;}</style></head> <body> <p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="/adad/faf" class="links item2 first2" >2</a><a href="qwe123" class="links item3 first3" >3</a><a href="eweqe" class="links item4 first4" >4</a><a href="rrrrr" class="links item5 first5" >5</a><a href="ttt" class="links item6 first6" >6</a><a href="yyy" class="links item7 first7" >7</a> </p> </body> </html>

span標(biāo)簽

重點(diǎn)要突出的字，使用span標(biāo)簽套起來

字體樣式

font-family：字體
font-size：字體大小
font-weight：字體粗細(xì)

font-weight:bolder;/*也可以填px，但不能超過900,相當(dāng)于bloder*/ /*常用寫法：*/ font:oblique bloder 12px "楷體"

文本樣式

顏色–>color

文本對齊方式–>text-align：center

首行縮進(jìn)–>text-indent：2em

行高–>line-height：300px；

下劃線–>text-decoration

text-decoration:underline/*下劃線*/ text-decoration:line-through/*中劃線*/ text-decoration:overline/*上劃線*/ text-decoration:none/*超鏈接去下劃線*/

圖片、文字水平對齊

img,span{vertical-align:middle}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Z0vUNcL5-1608875405695)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225003006064.png)]

超鏈接偽類

陰影

/* 第一個(gè)參數(shù)：表示水平偏移第二個(gè)參數(shù)：表示垂直偏移第三個(gè)參數(shù)：表示模糊半徑第四個(gè)參數(shù)：表示顏色 */ text-shadow:5px 5px 5px 顏色

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-gFnix5Xu-1608875405699)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225095229521.png)]

列表ul li

/*list-style{none:去掉原點(diǎn)circle：空心圓decimal：數(shù)字square：正方形 }*/ ul li{height:30px;list-style:none;text-indent:1em; } a{text-decoration:none;font-size:14px;color:#000; } a:hover{color:orange;text-decoration:underline } /*放在div中，作為導(dǎo)航欄*/ <div id="nav"></div> #nav{width:300px; }

背景

背景顏色：background

背景圖片

background-image:url("");/*默認(rèn)是全部平鋪的*/ background-repeat:repeat-x/*水平平鋪*/ background-repeat:repeat-y/*垂直平鋪*/ background-repeat:no-repeat/*不平鋪*/

3.綜合使用

background:red url("圖片相對路徑") 270px 10px no-repeat background-position：/*定位：背景位置*/

漸變

網(wǎng)址：https://www.grablent.com
徑向漸變、圓形漸變

盒子模型

margin：外邊距

padding：內(nèi)邊距

border：邊框

邊框

border：粗細(xì) 樣式顏色

邊框的粗細(xì)

邊框的樣式

邊框的顏色

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-llfEVadD-1608875405700)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225103546532.png)]

外邊距----妙用：居中

margin-left/right/top/bottom–>表示四邊，可分別設(shè)置，也可以同時(shí)設(shè)置如下

margin:0 0 0 0/*分別表示上、右、下、左；從上開始順時(shí)針*/ /*例1：居中*/ margin:0 auto /*auto表示左右自動*/ /*例2：*/ margin:4px/*表示上、右、下、左都為4px*/ /*例3*/ margin:10px 20px 30px/*表示上為10px，左右為20px，下為30px*/

盒子的計(jì)算方式：
margin+border+padding+內(nèi)容的大小

總結(jié)：
body總有一個(gè)默認(rèn)的外邊距 margin:0
常見操作：初始化

margin:0; padding:0; text-decoration:none;

居中的終極方法

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-bdJ0Y6Kk-1608875405703)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225110537377.png)]

圓角邊框----border-radius

border-radius有四個(gè)參數(shù)（順時(shí)針），左上開始
圓圈：圓角=半徑

盒子陰影

box-shadow: 10px 10px 1px black;

源碼之家網(wǎng)站：www.mycodes.net

光年后臺管理系統(tǒng)： http://lyear.itshubao.com/index.html#

vue-element-admin:https://panjiachen.github.io/vue-element-admin-site/zh/

element:https://element.eleme.cn/#/zh-CN/component/installation

飛冰:https://ice.work

門戶網(wǎng)站模板之家：https://ice.work

浮動

標(biāo)準(zhǔn)文檔流

塊級元素：獨(dú)占一行 h1~h6 、p、div、列表…
行內(nèi)元素：不獨(dú)占一行 span、a、img、strong

注：行內(nèi)元素可以包含在塊級元素中，反之則不可以。

display（重要）

block：塊元素

inline：行內(nèi)元素

inline-block：是塊元素，但是可以內(nèi)聯(lián)，在一行

這也是一種實(shí)現(xiàn)行內(nèi)元素排列的方式，但是我們很多情況用float

none：消失

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}span{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}</style> </head> <body> <div>div塊元素</div> <span>span行內(nèi)元素</span> </body> </html>

QQ會員頁面導(dǎo)航練習(xí)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>QQ會員</title><link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="wrap"><header class="nav-header"><div class="head-contain"><a href="" class="top-logo"><img src="img/logo.png" width="145" height="90" /></a><nav class="top-nav"><ul><li><a href="">功能特權(quán)</a> </li><li><a href="">游戲特權(quán)</a> </li><li><a href="">生活特權(quán)</a> </li><li><a href="">會員特權(quán)</a> </li><li><a href="">成長體系</a> </li><li><a href="">年費(fèi)專區(qū)</a> </li><li><a href="">超級會員</a> </li></ul></nav><div class="top-right"><a href="">登錄</a><a href="">開通超級會員</a></div></div></header> </div> </body> </html> 123456789101112131415161718192021222324252627282930313233 *{padding:0;margin: 0; } a{text-decoration: none; } .nav-header{height: 90px;width: 100%;background: rgba(0,0,0,.6); } .head-contain{width: 1180px;height: 90px;margin: 0 auto;text-align: center; } .top-logo,.top-nav,.top-nav li,.top-right{height: 90px;display: inline-block;vertical-align: top; } .top-nav{margin: 0 48px; } .top-nav li{line-height: 90px;width: 90px; } .top-nav li a{display: block;text-align: center;font-size: 16px;color: #fff; } .top-nav li a:hover{color: blue; }.top-right a{display: inline-block;font-size: 16px;text-align: center;margin-top: 25px;border-radius: 35px; } .top-right a:first-of-type{width: 93px;height: 38px;line-height: 38px;color: #fad65c;border: 1px #fad65c solid; } .top-right a:first-of-type:hover{color: #986b0d;background: #fad65c; } .top-right a:last-of-type{width: 140px;height: 40px;font-weight: 700;line-height: 40px;background: #fad65c;color: #986b0d; } .top-right a:last-of-type:hover{background: #fddc6c; }

float：left/right左右浮動

clear：both

overflow及父級邊框塌陷問題

clear：
right：右側(cè)不允許有浮動元素
left：左側(cè)不允許有浮動元素
both：兩側(cè)不允許有浮動元素
none：

解決塌陷問題方案：

方案一

增加父級元素的高度；

方案二

增加一個(gè)空的div標(biāo)簽，清除浮動

<div class = "clear"></div> <style>.clear{clear:both;margin:0;padding:0; } </style>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-HuGA4JNe-1608875405705)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225123439932.png)]

方案三

在父級元素中增加一個(gè)overflow：hidden

overflow:hidden/*隱藏*/ overflow：scoll/*滾動*/

layui:https://www.layui.com/admin/

方案四(重要)

父類添加一個(gè)偽類:after

#father:after{content:'';display:block;clear:both; }

小結(jié)：

浮動元素增加空div----》簡單、代碼盡量避免空div

設(shè)置父元素的高度-----》簡單，元素假設(shè)沒有了固定的高度，就會超出

overflow----》簡單，下拉的一些場景避免使用

父類添加一個(gè)偽類:after（推薦）----》寫法稍微復(fù)雜，但是沒有副作用，推薦使用

display與float對比

display：方向不可以控制

float：浮動起來的話會脫離標(biāo)準(zhǔn)文檔流，所以要解決父級邊框塌陷的問題。

定位

相對定位

相對定位：positon：relstive；
相對于原來的位置，進(jìn)行指定的偏移，相對定位的話，它仍然在標(biāo)準(zhǔn)文檔流中，原來的位置會被保留

top:-20px; left:20px; bottom:-10px; right:20px

絕對定位-absolute

定位：基于xxx定位，上下左右~
1、沒有父級元素定位的前提下，相對于瀏覽器定位
2、假設(shè)父級元素存在定位，我們通常會相對于父級元素進(jìn)行偏移
3、在父級元素范圍內(nèi)移動
總結(jié)：相對于父級或?yàn)g覽器的位置，進(jìn)行指定的偏移，絕對定位的話，它不在標(biāo)準(zhǔn)文檔流中，原來的位置不會被保留

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;position: relative;}#first{background-color: #a13d30;border: 1px dashed #b27530;}#second{background-color: green;border: 1px dashed #0ece4f;position: absolute;right:30px;top:30px}#third{background-color: red;border: 1px dashed #ff1b87;}</style> </head> <body> <div id = "father"><div id="first">第一個(gè)盒子</div><div id="second">第二個(gè)盒子</div><div id="third">第三個(gè)盒子</div> </div> </body> </html>

固定定位-fixed

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{height: 1000px;}div:nth-of-type(1){/*絕對定位：沒有相對的父級元素，所以相對于瀏覽器*/width: 100px;height: 100px;background:red;position: absolute;right: 0;bottom: 0;}div:nth-of-type(2){width: 50px;height: 50px;background: yellow;position: fixed;right: 0;bottom: 0;}</style> </head> <body><div>div1</div> <div>div2</div> </body> </html>

z-index層級

圖層~
z-index：默認(rèn)是0，最高無限~999

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css"></head> <body> <div id="content"><ul><li><img src="images/bg.jpg" alt=""></li><li class="tipText">學(xué)習(xí)微服務(wù)，找狂神</li><li class="tipBg"></li><li>時(shí)間：2099-01=01</li><li>地點(diǎn)：月球一號基地</li></ul> </div> </body> </html>#content{width: 380px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px solid yellow; } ul,li{padding: 0px;margin: 0px;list-style: none; } /*父級元素相對定位*/ #content ul{position: relative; } .tipText,.tipBg{position: absolute;width: 380px;height: 25px;top:216px } .tipText{color: white;z-index: 999; } .tipBg{background: orange;opacity: 0.5;/*背景透明度*/filter: alpha(opacity=50); }

動畫及視野拓展

菜鳥教程:https://www.runoob.com

總結(jié)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-IGvckSf0-1608875405707)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225134804298.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-RmRi8zok-1608875405707)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225134837125.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jRdYijjX-1608875405708)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225134917099.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-reE3wqBZ-1608875405709)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225134945388.png)]

總結(jié)

以上是生活随笔為你收集整理的CSS3(笔记）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

笔记

上一篇： 121GB，《地平线西之绝境》完整版是
下一篇： CSS 基本样式

CSS

CSS3(笔记）

CSS簡介

CSS的3種導(dǎo)入方式

鏈接式

導(dǎo)入式

選擇器

基本選擇器

1、標(biāo)簽選擇器

2、類選擇器 class

3、id 選擇器：

層次選擇器

1.后代選擇器 （空格）

2.子選擇器 (>)

3.相鄰的兄弟選擇器(+)

4.通用選擇器(~)

結(jié)構(gòu)偽類選擇器

屬性選擇器（常用）

span標(biāo)簽

字體樣式

文本樣式

超鏈接偽類

陰影

列表ul li

背景

漸變

盒子模型

邊框

外邊距----妙用：居中

居中的終極方法

圓角邊框----border-radius

盒子陰影

浮動

標(biāo)準(zhǔn)文檔流

display（重要）

float：left/right左右浮動

overflow及父級邊框塌陷問題

解決塌陷問題方案：

方案一

方案二

方案三

方案四(重要)

display與float對比

定位

相對定位

絕對定位-absolute

固定定位-fixed

z-index層級

動畫及視野拓展

總結(jié)

總結(jié)

1.后代選擇器（空格）