柚子快報(bào)激活碼778899分享：第二章 前端開發(fā)基礎(chǔ)CSS

http://yzkb.51969.com/

第一章：前端開發(fā)基礎(chǔ)：html 第二章：前端開發(fā)基礎(chǔ)：CSS 第三章：前端開發(fā)基礎(chǔ)：JavaScript 第四章：前端開發(fā)基礎(chǔ)：jQuery 第五章：前端UI框架 Layui

文章目錄

CSS介紹CSS使用方法內(nèi)聯(lián)方式內(nèi)部方式外部導(dǎo)入方式(推薦)準(zhǔn)備工作

選擇器元素ID類派生

CSS常用屬性內(nèi)邊距和外邊距內(nèi)邊距外邊距舉例

字體font-*舉例

文本舉例

**邊框 border-\***舉例

**背景 background-\***舉例

**定位**格式舉例

浮動(dòng)舉例

其他舉例

寫一個(gè)登陸界面

CSS介紹

CSS，全稱為層疊樣式表（Cascading Style Sheets），主要用于設(shè)置HTML頁面中的CSS，全稱為層疊樣式表（Cascading Style Sheets），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。它是一種樣式表語言，用于描述網(wǎng)頁上的信息格式化和顯示的方式。無論樣式是直接存儲(chǔ)于HTML網(wǎng)頁還是單獨(dú)的樣式單文件，其核心都是將樣式應(yīng)用到指定類型的元素的規(guī)則。此外，CSS還描述了在屏幕、紙質(zhì)、音頻等其他媒體上的元素應(yīng)該如何被渲染的問題。

還可以配合Javascript腳本語言動(dòng)態(tài)對(duì)網(wǎng)頁各元素操作

格式： 選擇器{屬性:值;屬性:值;屬性:值;....}

選擇器：需要改變樣式的HTML元素

CSS使用方法

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式（行內(nèi)樣式）

\

在HTML中如何使用css樣式

這是第一個(gè)句子

這是第二個(gè)句子

這是第三個(gè)句子

內(nèi)部方式

內(nèi)部方式（內(nèi)嵌樣式），在head標(biāo)簽中使用

這是第一個(gè)句子

這是第二個(gè)句子

這是第三個(gè)句子

外部導(dǎo)入方式(推薦)

外部導(dǎo)入方式（推薦），在head標(biāo)簽中使用

準(zhǔn)備工作

創(chuàng)建CSS目錄，以及css文件

css.css文件

.c1 {

color: aqua; // 設(shè)置類名為c1的元素的文字顏色為淺藍(lán)色（aqua）

}

.c2 {

color: blueviolet; // 設(shè)置類名為c2的元素的文字顏色為深紫色（blueviolet）

}

.c3 {

color: red; // 設(shè)置類名為c3的元素的文字顏色為紅色（red）

}

html

// 指定css文件

這是第一個(gè)句子

這是第二個(gè)句子

這是第三個(gè)句子

選擇器

元素

元素選擇器：這是最基本的CSS選擇器，HTML文檔中的元素本身就是一個(gè)選擇器

例如p { line-height: 1.5em; margin-bottom: 1em; }，這會(huì)設(shè)置所有p元素的行高為1.5em，底部間距為1em。

元素演示

元素演示2

這是第一個(gè)句子

這是第二個(gè)句子

這是第三個(gè)句子

ID

ID選擇器：使用#來指定，后面跟著ID名

例如#firstname會(huì)選擇所有ID為firstname的元素。

使用格式

#id名{樣式...}

特點(diǎn)

根據(jù)元素id選擇：ID選擇器根據(jù)元素的id屬性來選取特定的元素。這意味著，每個(gè)id屬性值只能對(duì)應(yīng)一個(gè)元素，這確保了每個(gè)HTML文檔中id的唯一性。精確匹配：為了使被選中的元素生效，其id屬性值必須與選擇器中給出的值完全匹配。例如，如果選擇器的值為"demo"，那么只有id為"demo"的元素才會(huì)應(yīng)用相應(yīng)的樣式。語法規(guī)則：ID選擇器的語法規(guī)則是以井號(hào)（#）開頭，后面跟著對(duì)應(yīng)元素id的名稱。這樣的規(guī)則使得我們可以很輕松地定義出對(duì)應(yīng)的樣式規(guī)則。高優(yōu)先級(jí)和唯一性：ID選擇器具有很高的優(yōu)先級(jí)，而且每個(gè)id屬性值只能對(duì)應(yīng)一個(gè)元素，這使得它具有唯一性。常用于派生選擇器：在現(xiàn)代布局中，id選擇器常常用于建立派生選擇器，以實(shí)現(xiàn)更為復(fù)雜和靈活的樣式設(shè)置。ID不能以數(shù)字開頭

元素演示

元素演示2

這是第一個(gè)句子

這是第二個(gè)句子

這是第三個(gè)句子

類

類選擇器：使用.來指定，后面跟著類名

例如.c1會(huì)選擇所有類名為c1的元素。

使用格式

.類名{樣式...}

特點(diǎn)

獨(dú)立于文檔元素：類選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用，提供了一種獨(dú)立于文檔元素的方式來指定樣式。根據(jù)class屬性的內(nèi)容匹配元素：當(dāng)定義了類選擇器后，所有含有對(duì)應(yīng)class屬性的元素都將被選中并應(yīng)用相應(yīng)的樣式。一個(gè)元素可以有多個(gè)class：一個(gè)元素可以擁有多個(gè)class，因此可以使用逗號(hào)分隔多個(gè)class名稱來選中對(duì)應(yīng)的元素。提高開發(fā)效率：通過使用類選擇器，開發(fā)者可以在全局范圍內(nèi)統(tǒng)一設(shè)置某種樣式，而不需要對(duì)每個(gè)元素分別設(shè)置，從而提高了網(wǎng)頁開發(fā)的效率。層疊與優(yōu)先級(jí)：當(dāng)多個(gè)選擇器選中同一個(gè)元素時(shí)，CSS規(guī)定了選擇器的優(yōu)先級(jí)規(guī)則。在同等優(yōu)先級(jí)的情況下，后定義的樣式將覆蓋先定義的樣式。而在不同優(yōu)先級(jí)之間，優(yōu)先級(jí)高的樣式將覆蓋優(yōu)先級(jí)低的樣式

元素演示

元素演示2

這是第一個(gè)句子

這是第二個(gè)句子

這是第三個(gè)句子

派生

**派生選擇器：**依據(jù)元素在其位置的上下文關(guān)系來定義樣式

#mermaid-svg-h7JhzGnZyr9UrB2c {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c .error-icon{fill:#552222;}#mermaid-svg-h7JhzGnZyr9UrB2c .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-h7JhzGnZyr9UrB2c .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-h7JhzGnZyr9UrB2c .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-h7JhzGnZyr9UrB2c .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-h7JhzGnZyr9UrB2c .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-h7JhzGnZyr9UrB2c .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-h7JhzGnZyr9UrB2c .marker{fill:#333333;stroke:#333333;}#mermaid-svg-h7JhzGnZyr9UrB2c .marker.cross{stroke:#333333;}#mermaid-svg-h7JhzGnZyr9UrB2c svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-h7JhzGnZyr9UrB2c .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c .cluster-label text{fill:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c .cluster-label span{color:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c .label text,#mermaid-svg-h7JhzGnZyr9UrB2c span{fill:#333;color:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c .node rect,#mermaid-svg-h7JhzGnZyr9UrB2c .node circle,#mermaid-svg-h7JhzGnZyr9UrB2c .node ellipse,#mermaid-svg-h7JhzGnZyr9UrB2c .node polygon,#mermaid-svg-h7JhzGnZyr9UrB2c .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-h7JhzGnZyr9UrB2c .node .label{text-align:center;}#mermaid-svg-h7JhzGnZyr9UrB2c .node.clickable{cursor:pointer;}#mermaid-svg-h7JhzGnZyr9UrB2c .arrowheadPath{fill:#333333;}#mermaid-svg-h7JhzGnZyr9UrB2c .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-h7JhzGnZyr9UrB2c .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-h7JhzGnZyr9UrB2c .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-h7JhzGnZyr9UrB2c .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-h7JhzGnZyr9UrB2c .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-h7JhzGnZyr9UrB2c .cluster text{fill:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c .cluster span{color:#333;}#mermaid-svg-h7JhzGnZyr9UrB2c div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-h7JhzGnZyr9UrB2c :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

html

body

head

meta

title

First Page!

h1

Test!

<\!--NOTE!--\>

p

Welcome to

em

DOM

World!

ul

li

Newer

CSS常用屬性

內(nèi)邊距和外邊距

內(nèi)邊距

屬性描述padding設(shè)置四邊的內(nèi)邊距padding-top上內(nèi)邊距padding-right右內(nèi)邊距padding-bottom下內(nèi)邊距padding-left左內(nèi)邊距

外邊距

屬性描述margin設(shè)置四邊的外邊距，使用方法同paddingmargin-top上外邊距margin-right右外邊距margin-bottom下外邊距margin-left左外邊距

舉例

字體font-*

屬性描述值font-size設(shè)置字體的尺寸 ? xx-small、x-small、small、medium、large、xlarge、xx-large，從小到大，默認(rèn)值 medium ? length 固定長(zhǎng)度，例如 12px font-family字體系列。可以寫多個(gè)，如果第一個(gè)不支持，使用下一個(gè)Microsoft YaHeifont-weight設(shè)置字體的粗細(xì) ? normal 默認(rèn)值 ? bold 粗體 ? bolder 更粗 ? lighter 更細(xì) font-style字體樣式 ? normal 正常 ? italic 斜體 ? oblique 傾斜的字體

舉例

這是一個(gè)段落

文本

屬性描述值text-align文本對(duì)齊方式 ? left：左邊 ? right：右邊 ? center：中間 ? justify：兩端對(duì)齊文本效果 text-decoration文本修飾 ? none：默認(rèn)，定義標(biāo)準(zhǔn)的文本，例如去掉超鏈接下劃線 ? line-through：刪除線 ? underline：文本下加一條線 text-overflow文本溢出后顯示效果 ? clip：修剪文本 ? ellipsis：顯示省略號(hào)來代表被修剪的文本 ? string：使用給定的字符串來代表被修剪的文本 letter-spacing字符間的距離 ? normal：默認(rèn) ? length：自定義間距 line-height行間的距離（行高） ? normal：默認(rèn) ? length：設(shè)置固定值 color字體顏色 ? 顏色名稱，例如 red ? 十六進(jìn)制值，例如 #ff0000 ? rgb 代碼，例如 rgb(255,0,0)

舉例

邊框 border-*

屬性描述值border所有邊框樣式的縮寫示例：`border: 1px solid blue;` 寬度 樣式 顏色border-color四邊框的顏色示例：`border-color: red blue green yellow;` 上右下左border-style邊框樣式 ? `solid` 實(shí)線邊框 ? `dotted` 點(diǎn)線 ? `dashed` 虛線 ? `none` 不顯示邊框，默認(rèn) border-left border-right border-top border-bottom左邊框 右邊框 上邊框 下邊框例如設(shè)置底邊框?yàn)樘摼€：`border-bottom: 1px dotted red;`box-shadow給元素添加陰影 格式：`box-shadow: h-shadow v-shadow blur spread color inset;` ? `h-shadow` 必選，水平陰影的位置 ? `v-shadow` 必選，垂直陰影的位置 ? `blur` 可選，模糊程度 ? `spread` 可選，陰影的大小 ? `color` 可選，陰影的顏色 ? `inset` 可選，從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影 示例1：`box-shadow: 1px 2px 3px 1px #c2c2c2;` 示例2：`box-shadow: 0 5px 20px 0 #e8e8e8;`

舉例

背景 background-*

屬性描述值background-color背景顏色 ? 顏色名稱，例如 `red` ? 十六進(jìn)制值，例如 `#ff0000` ? rgb 代碼，例如 `rgb(255,0,0)` background-image背景圖片 ? `url('URL')` 圖片路徑 ? `none` 不顯示背景圖片 background-repeat設(shè)置是否及如何重復(fù)背景圖像 ? `repeat` 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù) ? `repeat-x` 背景圖像將在水平方向重復(fù) ? `repeat-y` 背景圖像將在垂直方向重復(fù) ? `no-repeat` 背景圖像將僅顯示一次 background-position背景圖片的位置 ? `top left`、`top center`、`top right`、 `center left`、`center center`、`center right`、 `bottom left`、`bottom center`、`bottom right` ? `x% y%` 水平位置和垂直位置 background-size背景圖片的尺寸 ? `length` 背景的高度和寬度，例如 `80px 60px` ? `percentage` 以父元素的百分比設(shè)置背景圖像 的高度和寬度，例如 `50% 50%`

舉例

定位

position屬性：把你元素定到什么位置，或者把你元素根據(jù)什么定位

屬性描述absolute絕對(duì)定位，根據(jù)自己最近的一個(gè)父元素定位，而且父元素必須相對(duì)定位過。如果沒有父元素，根據(jù)窗口定位。fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位。relative相對(duì)定位，相對(duì)于自己定位，偏移后，元素仍保持其未定位前的形狀。原來的空間依然保留，只是看不到了。static默認(rèn)值。沒有定位，元素框正常生成，出現(xiàn)在正常的流中。

格式

1.先使用postion告訴怎么定位

2. 再告訴它定位到哪

? ? left 靠左距離

? ? right 靠右距離

? ? top 頂部距離

? ? bottom 底部距離

舉例

浮動(dòng)

**float屬性：**定義元素在哪個(gè)方向浮動(dòng)。

可選值：none、left、right

特點(diǎn)：

? 只能水平浮動(dòng)，不能橫向浮動(dòng)

? 浮動(dòng)碰到父元素的邊框或者浮動(dòng)元素的邊框就會(huì)停止

? 浮動(dòng)元素的后一個(gè)元素會(huì)圍繞著浮動(dòng)元素（典型應(yīng)用：文字圍繞圖片）

? 浮動(dòng)元素的前一個(gè)元素不會(huì)受到任何影響（如果想讓兩個(gè)塊元素并排顯示，必須讓兩個(gè)塊元素都應(yīng)用float）

舉例

其他

屬性描述其他list-style-type列表樣式 ? `none`: 不顯示項(xiàng)目符號(hào) overflow內(nèi)容溢出處理 ? `hidden`: 溢出部分隱藏 ? `scroll`: 不管是否溢出都顯示滾動(dòng) ? `auto`: 溢出顯示滾動(dòng)條，不溢出沒有滾動(dòng)條 display是否及如何顯示 ? `none`: 隱藏該元素 ? `block`: 顯示為塊級(jí)元素 ? `inline`: 默認(rèn)

舉例

寫一個(gè)登陸界面

柚子快報(bào)激活碼778899分享：第二章 前端開發(fā)基礎(chǔ)CSS

http://yzkb.51969.com/

好文鏈接