Web學習筆記4

CSS概述

1、CSS簡介

CSS，層疊樣式表，是一種樣式表語言，用以描述HTML的呈現內容的方式（美化網頁）。CSS書寫規則是：

選擇器{屬性名：屬性值}的鍵值對

CSS有三種引入方式，分別為：

內部樣式表：CSS書寫在HTML文件里<head>中<title>下方，使用<style>標簽包裹CSS代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你好</title><style>p {color: blue;font-size: 300px;}</style>
</head>
<body><p>你好</p>
</body>
</html>

外部樣式表(最常用)：CSS書寫在外部的.css文件中，在HTML里使用link標簽引入在<title>下方

????????????????????????<link rel="引入方式" herf="文件路徑">

    p{color: blueviolet;font-size: 200px;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你好</title><link rel="stylesheet" href="./testcss.css">
</head>
<body><p>你好</p>
</body>
</html>

行內樣式：配合JS使用，CSS寫在標簽的屬性值里

    <div style="color: aqua;font-size: 100px;">你好</div>

2、基礎選擇器?

標簽選擇器

使用標簽名作為選擇器，將同名的標簽設置為一個樣式

標簽名{屬性名：屬性值}

類選擇器

在查找標簽的同時差異化設置標簽內容的樣式。步驟：首先定義類選擇器：.類名，后在標簽里添加類名class=" " 一個標簽可以添加很多類，一個類也可以給多種標簽使用

    <p class="til">你好</p><p class="cont">你好</p>

/* 寫CSS */
.til{
color:red;
font-size: 50px;
}
.cont{
color: blue;
font-size: 30px;
}

id選擇器

功能與類選擇器類似，但一般與JS配合使用，在CSS中一般不使用。步驟：首先定義ID選擇器：#id名，然后在標簽里添加id="id名"。ID選擇器具有唯一性，同一個ID選擇器在一個頁面只能使用一次

通配符選擇器

查找頁面所有的標簽，并設置相同的樣式。通配符選擇器不需要調用，瀏覽器自動查找并設置

* {

}

3、CSS盒子

利用無語義標簽加上CSS可以在Web中畫盒子做頁面的整體規劃，規定盒子樣式的屬性有：

width：規定盒子寬度

height：規定盒子高度

background-color：盒子背景色

.red-box{width: 100px;height: 100px;background-color: red;
}
.blue-box{width: 200px;height: 200px;background-color: blue;
}

    <div class="red-box">小紅盒子</div><div class="blue-box">大藍盒子</div>

4、文字控制屬性

CSS的文字控制屬性用于調整web頁面的文字風格，常用的文字屬性有:

font-size：調整文字大小

font-weight：調整字體粗細，400表示不加粗，700表示加粗

line-height：調整行高，數字+px代表間隔像素值，僅數字代表當前字體大小的倍數，若行高屬性值等于盒子高度屬性值，可以實現單行文字的垂直居中

font-family：字體族，調整字體格式，使用font-family:字體名，字體名可以設置多個，之間用逗號隔開，這樣瀏覽器可以從做到右查找電腦有的字體。在設置字體時的最后一個設置字體族名，一般設置無襯線字體sans-serif?

font：字體的復合屬性，將多個字體屬性簡寫為一條，必須按這個順序書寫：font：是否傾斜是否加粗字號/行高字體，其中字號和字體值必須書寫

text-indet：調整文本縮進，屬性值有兩種設置方法：數字+px代表縮進的像素值，數字+em代表縮進的字符數（一般用這個）

text-aligh：調整文本對齊方式，屬性值有三種:left(默認)左對齊；center：居中；right：右對齊，text-aligh調整的是標簽內容的對齊方式，不影響標簽位置

text-decoration：調整文本修飾線，有四個屬性值:none：無標簽；underline：下劃線；line-through：刪除線；overline：上劃線

color：調整文本顏色，屬性值四種表示方法：顏色關鍵字、rgb表示法、rgba表示法（開發用，實現透明色，a表示透明度，從0到1取值），十六進制表示法（開發用）

.red-box-char{font-size: 30px;font-weight: 700;line-height: 200px;font-family:sans-serif;text-align: center;color: #fc0;;
}
.blue-box-char{font: italic,20px/40px,楷體;text-indent: 2em;text-decoration: underline;color: rgba(255,0,0,0.5);
}

<div class="red-box"><p class="red-box-char">標題</p></div><div class="blue-box"><p class="blue-box-char">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p></div>

5、復合選擇器

復合選擇器通過兩個或以上的基礎選擇器組合而成，可以更高效的選擇目標元素，復合選擇器有：后代選擇器、子代選擇器、并集選擇器、交集選擇器

后代選擇器：選擇某元素內所有指定的后代元素，選擇器寫法：

父選擇器子選擇器 {CSS}屬性

em h1{color: #fc0;
}

子代選擇器：選擇某元素內最近的子元素，選擇器寫法：

父選擇器>子選擇器 {CSS}屬性

ul>li{color: blue;
}

并集選擇器：選擇多組標簽設置相同的樣式，選擇器寫法：

選擇器1，選擇器2，……{CSS屬性}

p,div{color: aqua;
}

交集選擇器：選中同時滿足設定條件的元素，選擇器寫法（中間沒有任何符號，包括空格！）：

選擇器1選擇器2……{CSS屬性}

li.second{color: blue;
}

6、偽類選擇器

偽類選擇器用于設置元素中在某些情況下的狀態，主要是設置帶有超鏈接的元素，例如鼠標懸停、鼠標點擊等例如，設置鼠標懸停狀態的選擇器寫法為：選擇器:hover{CSS屬性}

偽類-超鏈接：

超鏈接一共有四種狀態，書寫狀態時一定要按照下列的順序寫：

:link：訪問前

:visited：訪問后

:hover：鼠標懸停

:active：鼠標點擊（激活）

a:link {color: #000;
}
a:visited{color: #0ff;
}
a:hover{color: #f66;
}
a:active{color: #ff0;font-size: 40px;
}
button{background-color: aqua;
}
button:active{color: #f66;background-color: #ff0;
}

7、CSS特性

CSS有三大特性：繼承性、層疊性、優先級，利用這些特性可以化簡CSS代碼，定位解決問題

繼承性：

子級標簽默認繼承父級的文字控制屬性

層疊性：

不同的CSS在同一個標簽下設置了相同的屬性，后面的CSS會覆蓋前面的CSS；不同的CSS在同一個標簽下設置不同的屬性，幾個屬性會疊加

優先級：

不同的選擇器設置同一個標簽，優先級高的選擇器生效，選擇器的優先級為：

通配符選擇集<標簽選擇器<類選擇器<id選擇器<行內樣式<!important（選中標簽的范圍越大，優先級越低）

如果是復合選擇器，則需要權重計算：權重從左往右計算：行內樣式，id選擇器個數，類選擇器個數，標簽選擇器個數

!improtan權重最高，子級繼承的屬性權重最低

8、背景屬性

背景圖實現網頁裝飾性圖片，添加方法為:

background-image：url.(圖片路徑)，背景圖片默認是平鋪的

背景圖的其他屬性還有：

設置平鋪方式：

background-repeat:屬性值,有:

no-repeat:不平鋪

repeat：平鋪（默認）

repeat-x：水平方向平鋪

repeat-y：垂直方向平鋪

設置背景圖位置:

background-position：屬性值，屬性值有兩種寫法：

關鍵字：left：左；right:右；center：居中；top：頂部；bottom：底端

坐標:水平坐標垂直坐標（默認0 0，即左上角）若關鍵字只寫一個值，另外一個值默認居中

坐標只寫一個值，代表水平方向，垂直方向默認居中

設置背景圖比例：

background-size:屬性值，有三種寫法：

關鍵字：cover，等比例完全覆蓋背景區，可能剪切掉部分背景圖；contain:等比例完全裝入背景區，可能導致背景留白

百分比：根據盒子尺寸計算大小，100%代表圖片寬度與盒子寬度一致

數字+單位

固定背景圖：

background-attachment:fixed：這樣背景圖不會隨著頁面滾動而滾動

div{width: 2000px;height: 1000px;background-image: url(./dd.jpeg);background-repeat: no-repeat;background-position: 0 0;background-size: 50%;background-attachment: fixed;
}

背景屬性也可以用復合寫法

background:屬性值1 屬性值2 背景圖位置/縮放……不同的屬性值用空格分開，不區分順序

div{width: 2000px;height: 1000px;background: #ff0 url(./dd.jpeg) no-repeat center/50% fixed;
}

9、盒子顯示模式

CSS的盒子顯示模式有三種：

塊狀顯示(div默認)：

獨占一行，字級寬度默認是父級的100%，可以添加寬高

行內顯示（span默認）：

一行可以放多個，寬高不生效，寬高由內容展開

行內塊顯示（圖片標簽默認）：

一行可以存多個，寬高生效，寬高默認由內容展開

CSS可以轉換標簽的顯示模式，寫法為：display:屬性值，屬性值有：

block：塊狀顯示

inline-block：行內塊顯示

inline：行內顯示

10、結構偽類選擇器

結構偽類選擇器可以根據元素之間的結構關系查找標簽，寫法為：

選擇器：結構關系{CSS屬性}

結構關系有:

first-child：查找第一個選擇器

last-child：查找最后一個選擇器

nth-chlid(N)：查找第n個選擇器

nth-child(公式)：根據公式找選擇器，如:2n,第（所有的偶數）選擇器；2n+1，第（所有的奇數）選擇器；Xn，第（所有X的倍數）選擇器；n+x：第（x之后）所有選擇器；-n+x：第（x之前）所有選擇器

li:first-child{
color: #be2;
}
li:last-child{
color: #a52;
}
li:nth-child(5){
color: rgba(100, 200,100,0.5);
}
li:nth-child(2n){
font-size: 30px;
}
li:nth-child(n+5){
font-weight: 700;
}

11、偽元素選擇器

偽元素選擇器用于創建虛擬元素，用于裝飾標簽內容，寫法為：

在元素前加偽元素：選擇器::before{CSS屬性}

在元素后加選擇器：選擇器::after{CSS屬性}

偽元素默認是行內顯示，權重與選擇的標簽相同，CSS屬性中必須有content，但content可以為" "

div::before{
content: ">";
width: 100px;
height: 100px;
background-color: brown;
display: inline-block;
}
div::after{
content:"<"
}

12、flex布局

Flex布局也叫做彈性布局，布局網頁靈活簡單，是瀏覽器推薦的布局方式。設置方式為給父級元素設置display:flex，子元素可以自動擠壓拉伸。flex的組成有：

彈性容器：父級盒子

彈性盒子：子級盒子

主軸：默認水平

側軸：默認垂直

彈性盒子沿主軸方向排列，沿側軸方向拉伸，flex的方法有：

創建flex容器：display:flex

.fath{display: flex;width: 1000px;height: 300px;background-color: blue;
}
.fath div{width: 100px;height: 100px;background-color: red;
}

主軸對齊:

justify-content：屬性值，屬性值有:

flex-start：默認值，盒子從起點開始依次排序

flex-end：盒子從終點開始默認排序

center:盒子沿主軸居中排列

space-between：沿主軸均勻排列，空白區域在兩個盒子之間，彈性盒子之間間距相等

space-around：沿主軸均勻排列，空白區域在盒子兩側

space-evenly：沿主軸均勻排列，彈性盒子與容器之間間距相等

.fath{display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;
}
.fath div{width: 100px;height: 100px; background-color: red;border: 1px solid #000;
}

側軸對齊，用于設置彈性容器:

設置所有彈性盒子：align-items：屬性值；設置單個彈性盒子：align-self：屬性值；屬性值有：

stretch：彈性盒子沿側軸拉伸，兩端對齊容器（彈性盒子沒有設置側軸方向尺寸時默認）

center：彈性盒子居中排列

flex-start：沿起點開始排列

flex-end：沿終點開始排列

.fath{display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;align-items: center;
}.fath div:nth-child(3) {align-self: flex-start;
}

修改主軸方向:

flex-direction：屬性值，屬性值有：

row：水平方向，從左到右（默認）

column：垂直方向，從上到下

row-reverse：水平方向，從右到左

colunmn：垂直方向，從上到下

.fath {display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;align-items: center;flex-direction: column;
}

彈性伸縮比，用于控制彈性盒子在主軸方向的尺寸：

flex：整數數字，用于表示占用父級剩余尺寸的份數

.fath div:nth-child(3) {align-self: flex-start;flex: 1;
}

彈性盒子默認在一行，若彈性容器撐不下時彈性盒子自動擠壓，彈性盒子換行:

flex-warp：wrap(換行)/nowrap（不換行，默認）

行對齊方式:

align-content：屬性值，屬性值與主軸對齊方式一致，對單行盒子不生效

.fath {display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;align-items: center;flex-direction: row;flex-wrap: wrap;align-content: space-around;
}