css基本語法
CSS由二部分構(gòu)成:選擇器和聲明
選擇器是需要改變的html元素.
聲明是由屬性和值組成.
屬性和值中間用冒號(hào)隔開.
selector{property: value}
注釋
/* 這是注釋 */
引入css的方法
- 內(nèi)聯(lián)式
通過style屬性,在標(biāo)簽里直接設(shè)定樣式塑悼,這種方式?jīng)]能體現(xiàn)出css的優(yōu)勢(shì)擅这,不推薦使用。
栗子:
<p style="color:red;">這是段落</p>
- 嵌入式
將樣式寫到網(wǎng)頁的<head></head>標(biāo)簽中的<style type="text/css"></style>標(biāo)簽中吵瞻。一般不推薦,但可以運(yùn)用在主頁甘磨,提高加載速度橡羞。
栗子:
<style type="text/css">
p {
color:red;
}
</style>
- 外鏈?zhǔn)?/li>
在外部創(chuàng)建一個(gè).css文件,使用<link>標(biāo)簽引用济舆。推薦使用這種方式卿泽。
1.通過link引入
栗子:
<link href="main.css" rel="stylesheet" type="text/css"/>
2. 用@import 引入
栗子:
<style type="text/css">
@import url(main.css);
</style>
看了這些應(yīng)該對(duì)css有了一定的了解了,那么下面我們就看看css的選擇器和屬性吧滋觉!
常用的選擇器
列舉了三種常用的選擇器签夭,其他高級(jí)一定的會(huì)在css進(jìn)擊中詳細(xì)介紹
- 標(biāo)簽選擇器
其實(shí)就是用標(biāo)簽來進(jìn)行關(guān)聯(lián)齐邦,舉個(gè)栗子
p {
color:red;
}
選擇所有<p></p>標(biāo)簽,給它添加大括號(hào)里的樣式第租。
- 類選擇器
這個(gè)也很好明白措拇,直接上栗子
<style type="text/css">
.clsname{
color:red;
}
</style>
...
<p class="clsname">這是段落</p>
- 層級(jí)選擇器
結(jié)合了上面兩種選擇器來寫,主要為了通過層級(jí)間的關(guān)系慎宾,來限制樣式的作用范圍丐吓。下面來看個(gè)例子。
<style type="text/css">
.clsname span{
color:red;
}
</style>
...
<p class="clsname">這是<span>段落</span></p>
舉了幾個(gè)簡(jiǎn)單的栗子璧诵,應(yīng)該能明白了吧汰蜘!
多練練,多寫寫就能很好掌握了之宿。
常用屬性入門
布局常用的一些屬性:
- width 寬度族操,
- height 高度
- background 背景顏色
- float 浮動(dòng),float:left; float:right
- border 邊框
- padding 內(nèi)邊距
- margin 外邊距
在屬性進(jìn)擊中會(huì)對(duì)這些屬性進(jìn)行詳細(xì)的解釋
文本常用的一些屬性:
- color 顏色
- font-size 文字大小
- font-family 文字字體
- font-weight 文字是否加粗
- line-height 行高
- text-decoration 下劃線
這里只列舉了非常常用的一些簡(jiǎn)單的屬性和選擇器比被,更多更強(qiáng)大的會(huì)在后面會(huì)有介紹色难。
一定要多敲代碼,多看看敲出來的效果等缀,會(huì)有收獲的枷莉。