CSS基础(part1)--引入CSS的方式
學(xué)習(xí)筆記，僅供參考，有錯(cuò)必糾
文章目錄
- CSS
- CSS的定義
- 引入CSS的方式
- 行內(nèi)樣式
- 嵌入樣式
- 外聯(lián)CSS樣式
- 導(dǎo)入樣式
CSS
CSS的定義
- 什么是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)，CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。
- HTML和CSS的關(guān)系
HTML為結(jié)構(gòu)層， 負(fù)責(zé)從 語義的角度搭建頁面結(jié)構(gòu)；
CSS為樣式層 ，負(fù)責(zé)從審美的角度美化頁面；
JavaScript為行為層，負(fù)責(zé)從交互的角度提升用戶體驗(yàn)。
引入CSS的方式
所有的標(biāo)簽都有一個(gè)默認(rèn)樣式，我們稱為瀏覽器樣式，或者默認(rèn)樣式.
行內(nèi)樣式
知識(shí)點(diǎn)回顧：所有的HTML標(biāo)簽都有id, name, style等屬性.
行內(nèi)樣式，是通過在標(biāo)簽中設(shè)置style屬性來達(dá)到控制標(biāo)簽樣式的效果。例如：
<h1 style="color: red;">我是紅色的h1標(biāo)簽</h1> <!--屬性名1:屬性值1;屬性名2:屬性值2;-->在標(biāo)簽的style屬性中，我們可以設(shè)置多條的CSS樣式：
<h1 style="color: red;font-size:12px;">我是12像素的紅色h1標(biāo)簽</h1>嵌入樣式
在head標(biāo)簽中，可以嵌套一個(gè)style標(biāo)簽，在style標(biāo)簽中，可以書寫CSS的樣式內(nèi)容，style標(biāo)簽有一個(gè)屬性type屬性，默認(rèn)值就是 text/css，也可以省略。例如：
<style type="text/css"> /*css注釋方式*/p { /*對(duì)p標(biāo)簽的樣式進(jìn)行設(shè)置*/color: green; /*設(shè)置前景色，也就字體的顏色*/background-color: silver; /*設(shè)置背景色，也就字體的顏色*/}ul {background-color: red;}</style>外聯(lián)CSS樣式
我們可以通過link標(biāo)簽引入外部的CSS樣式文件，比如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS學(xué)習(xí)</title><link rel="stylesheet" href="CssFile/main.css"><!--rel：是指當(dāng)前HTML文件與CSS文件的關(guān)系href：是指外聯(lián)樣式表的路徑--><!--stylesheet表示當(dāng)前頁面的樣式表--><!--href屬性指向的路徑為我們的css樣式文件的地址,它是相對(duì)地址--> </head> <body><ul><li><a href="#">小黃</a></li><li><a href="#">大白</a></li><li><a href="#">小黑</a></li></ul> </body> </html>CSS樣式文件main.css：
a {color: yellow; }頁面：
導(dǎo)入樣式
@import導(dǎo)入樣式會(huì)導(dǎo)致css文件不能并行下載，所以，我們并不推薦這種導(dǎo)入方式。
注意，導(dǎo)入樣式的書寫必須在所有的css規(guī)則書寫之前。
例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS學(xué)習(xí)</title><style>/*將某一個(gè)CSS文件的樣式直接導(dǎo)入到當(dāng)前的位置*//*導(dǎo)入樣式必須寫在所有的其他樣式設(shè)置之前*/@import url(CssFile/main.css);p {color: green; /*設(shè)置前景色，也就字體的顏色為綠色*/background-color: red;/*設(shè)置背景色為紅色*/}</style> </head> <body><p>我是一個(gè)Bunny列表</p><ul><li><a href="#">小黃</a></li><li><a href="#">大白</a></li><li><a href="#">小黑</a></li></ul> </body> </html>頁面：
現(xiàn)在，我們創(chuàng)建b.css樣式文件：
a {background-color: blue; }并在main.css中導(dǎo)入b.css：
@import url(b.css); a {color: yellow; }現(xiàn)在，我們?cè)倏匆幌挛覀兊捻撁?#xff1a;
總結(jié)
以上是生活随笔為你收集整理的CSS基础(part1)--引入CSS的方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中班数学游戏教案《大转盘》反思
- 下一篇： CSS基础(part2)--CSS选择器