當前位置：首頁 >

CSS3(笔记）

發布時間：2023/12/3 56 豆豆

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

CSS簡介

CSS是什么

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

CSS怎么用（快速入門）

CSS選擇器（重點+難點）

美化網頁（文字，陰影，超鏈接，列表，漸變…）

盒子模型

浮動

定位

網頁動畫（特效效果）

<!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種導入方式

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">這是標簽</h1> </body> </html>

外部樣式兩種方法

鏈接式

html

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

導入式

@import是CSS2.1特有的！

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

選擇器

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

基本選擇器

1、標簽選擇器

選擇一類標簽標簽{}

<!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>標簽選擇器</h1> </body> </html> 1234567891011121314151617

2、類選擇器 class

選擇所有class一致的標簽，跨標簽，格式：.類名{},可以復用

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*類選擇器的格式 .class的名稱{}好處：可以多個標簽歸類，是同一個class，可以復用*/.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名稱{}不遵循就近原則，優先級是固定的id選擇器 > 類選擇器 > 標簽選擇器*/#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>

優先級：id > class > 標簽

層次選擇器

1.后代選擇器（空格）

在某個元素的后面

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

2.子選擇器 (>)

一代

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

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

同輩

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

4.通用選擇器(~)

結構偽類選擇器

偽類

屬性選擇器（常用）

id + class結合

<!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;}/*屬性名，屬性名=屬性值（正則）=表示絕對等于*=表示包含^=表示以...開頭$=表示以...結尾存在id屬性的元素 a[]{}*//* a[id]{background: red;}*//*id=first的元素*//* a[id=first]{background: aqua;}*//*class中有links元素*//* 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標簽

重點要突出的字，使用span標簽套起來

字體樣式

font-family：字體
font-size：字體大小
font-weight：字體粗細

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

文本樣式

顏色–>color

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

首行縮進–>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}

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

超鏈接偽類

陰影

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

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

列表ul li

/*list-style{none:去掉原點circle：空心圓decimal：數字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中，作為導航欄*/ <div id="nav"></div> #nav{width:300px; }

背景

背景顏色：background

背景圖片

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

3.綜合使用

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

漸變

網址：https://www.grablent.com
徑向漸變、圓形漸變

盒子模型

margin：外邊距

padding：內邊距

border：邊框

邊框

border：粗細樣式顏色

邊框的粗細

邊框的樣式

邊框的顏色

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

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

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

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

盒子的計算方式：
margin+border+padding+內容的大小

總結：
body總有一個默認的外邊距 margin:0
常見操作：初始化

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

居中的終極方法

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

圓角邊框----border-radius

border-radius有四個參數（順時針），左上開始
圓圈：圓角=半徑

盒子陰影

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

源碼之家網站：www.mycodes.net

光年后臺管理系統： 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

門戶網站模板之家：https://ice.work

浮動

標準文檔流

塊級元素：獨占一行 h1~h6 、p、div、列表…
行內元素：不獨占一行 span、a、img、strong

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

display（重要）

block：塊元素

inline：行內元素

inline-block：是塊元素，但是可以內聯，在一行

這也是一種實現行內元素排列的方式，但是我們很多情況用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行內元素</span> </body> </html>

QQ會員頁面導航練習

<!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="">功能特權</a> </li><li><a href="">游戲特權</a> </li><li><a href="">生活特權</a> </li><li><a href="">會員特權</a> </li><li><a href="">成長體系</a> </li><li><a href="">年費專區</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：右側不允許有浮動元素
left：左側不允許有浮動元素
both：兩側不允許有浮動元素
none：

解決塌陷問題方案：

方案一

增加父級元素的高度；

方案二

增加一個空的div標簽，清除浮動

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

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

方案三

在父級元素中增加一個overflow：hidden

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

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

方案四(重要)

父類添加一個偽類:after

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

小結：

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

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

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

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

display與float對比

display：方向不可以控制

float：浮動起來的話會脫離標準文檔流，所以要解決父級邊框塌陷的問題。

定位

相對定位

相對定位：positon：relstive；
相對于原來的位置，進行指定的偏移，相對定位的話，它仍然在標準文檔流中，原來的位置會被保留

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

絕對定位-absolute

定位：基于xxx定位，上下左右~
1、沒有父級元素定位的前提下，相對于瀏覽器定位
2、假設父級元素存在定位，我們通常會相對于父級元素進行偏移
3、在父級元素范圍內移動
總結：相對于父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在標準文檔流中，原來的位置不會被保留

<!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">第一個盒子</div><div id="second">第二個盒子</div><div id="third">第三個盒子</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：默認是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">學習微服務，找狂神</li><li class="tipBg"></li><li>時間：2099-01=01</li><li>地點：月球一號基地</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

總結

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

笔记

上一篇： 121GB，《地平线西之绝境》完整版是
下一篇：购物车的功能——CSS源码

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

CSS3(笔记）

CSS簡介

CSS的3種導入方式

鏈接式

導入式

選擇器

基本選擇器

1、標簽選擇器

2、類選擇器 class

3、id 選擇器：

層次選擇器

1.后代選擇器 （空格）

2.子選擇器 (>)

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

4.通用選擇器(~)

結構偽類選擇器

屬性選擇器（常用）

span標簽

字體樣式

文本樣式

超鏈接偽類

陰影

列表ul li

背景

漸變

盒子模型

邊框

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

居中的終極方法

圓角邊框----border-radius

盒子陰影

浮動

標準文檔流

display（重要）

float：left/right左右浮動

overflow及父級邊框塌陷問題

解決塌陷問題方案：

方案一

方案二

方案三

方案四(重要)

display與float對比

定位

相對定位

絕對定位-absolute

固定定位-fixed

z-index層級

動畫及視野拓展

總結

總結

1.后代選擇器（空格）