前端學(xué)習(xí)(二)—— CSS書寫位置、基本語法

CSS3(Cascading Style Sheets 層疊樣式表)

用來給HTML標(biāo)簽增加樣式的語言

語言 功能
結(jié)構(gòu)層 HTML 搭建結(jié)構(gòu)、放置部件
樣式層 CSS 美化頁面、實(shí)現(xiàn)布局
行為層 JavaScript 實(shí)現(xiàn)交互效果數(shù)據(jù)收發(fā)表單驗(yàn)證

HTML、CSS結(jié)合的紐帶——選擇器

一、CSS書寫位置

1、內(nèi)嵌式(常用)

<head> </head>標(biāo)簽對中書寫<style> </style>標(biāo)簽對,里面書寫 CSS語句

2、外鏈?zhǔn)剑ǔS茫?/h4>

可將CSS單獨(dú)存為.css文件,然后使用<link>標(biāo)簽引入

引入標(biāo)簽放在<head>標(biāo)簽中

rel屬性式表明link的鏈接與HTML的關(guān)系,stylesheet即為樣式表的意思,表示link的是HTML的樣式表

href屬性,表示路徑和文件名

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

優(yōu)點(diǎn):多個(gè)HTML頁面可以共用一個(gè)CSS樣式文件

3、導(dǎo)入式

是最不常見的樣式表導(dǎo)入方法

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

基本不常用的原因:使用導(dǎo)入式引入的樣式表,不會等待CSS文件加載完畢,而是立即渲染HTML文件,所以頁面會有幾秒鐘的“素面朝天”的時(shí)間

4、行內(nèi)式

樣式可以直接通過style屬性寫在標(biāo)簽上

<div style="font-size:30;color:green">
    我是div中的文字,字體大小是30px,顏色是綠色
</div>

行內(nèi)式犧牲了樣式表批量設(shè)置樣式的能力,只給一個(gè)標(biāo)簽設(shè)置樣式,所以不常用

二、CSS3的基本語法

選擇器 大括號 屬性:值

h1 {
    color:green;
    font-weight:bold;
}

CSS3的注釋是/* */

<style>標(biāo)簽有type屬性,并且值為一(text/css)含義是指明標(biāo)簽內(nèi)的代碼是標(biāo)準(zhǔn)的CSS,可省略不寫。若不省略則一定要寫對屬性值,否則會造成瀏覽器不認(rèn)識標(biāo)簽內(nèi)的代碼。

選擇器之間,不能寫分號或者其他符號,不然會導(dǎo)致下面那個(gè)樣式不生效

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容