一、css

1.什么是css？

Cascading Style Sheet 級聯(lián)樣式表

改變樣式的一個(gè)工具，說白了，就是為了讓我們的頁面好看，

HTML底層封裝了css這樣一個(gè)工具。

2.怎么使用css

a、style 風(fēng)格、樣式

這個(gè)關(guān)鍵詞寫到標(biāo)簽內(nèi)部，可以修改標(biāo)簽的樣式

注意：寫在標(biāo)簽內(nèi)部！也就是>里面

3.css樣式，分為三種

a、行內(nèi)樣式表

<p style="color:#0FC">111111111111</p>

其中：style="color:#0FC"就是改變當(dāng)前這個(gè)標(biāo)簽的樣式。

b、內(nèi)部樣式表

選擇器：告訴程序，我們要改變誰的樣式。

id選擇器：

1、在標(biāo)簽內(nèi)加上id屬性

2、在寫之前，要加上#

類選擇器：

1、在標(biāo)簽內(nèi)加上class屬性
2、類選擇器，寫之前，要加上.

注意：以.開頭

標(biāo)簽選擇器：

注意：

1、style里面要寫上type屬性，標(biāo)識這是改變css
2、選擇器后面要加上一對{} ，
3、每一句改變樣式之后，要加上;

c、外部樣式表

寫在我們網(wǎng)頁的外面

1、新建一個(gè)css
2、在css中寫上相對應(yīng)的樣式
3、將css樣式導(dǎo)入網(wǎng)頁

a、<link href="1.css" rel="stylesheet" type="text/css" />

b、<style type="text/css"> @import url("css路徑"); </style>

d、樣式表的優(yōu)先級

行內(nèi)樣式表>內(nèi)部樣式表>外部樣式表

e、選擇器的優(yōu)先級

id選擇器>類選擇器>標(biāo)簽選擇器

f、并集選擇器

通過一個(gè)詳細(xì)的描述或者說地址來查找某一個(gè)或者某一組相對應(yīng)的標(biāo)簽

p,#id,.class{}

會改變所有p、id和class所覆蓋的標(biāo)簽樣式，中間用英文輸入法的“,”號隔開

g、交集選擇器

h3.cecond{}

會先查找h3標(biāo)簽，再查找所有h3標(biāo)簽里面的類名為second的標(biāo)簽修改屬性

中間沒有任何東西進(jìn)行連接

h、后代選擇器

會根據(jù)所寫的標(biāo)簽或者選擇器，進(jìn)行一層一層的查找，直到最后查找到所需要的標(biāo)簽，中間用“ ”隔開

小結(jié)：

標(biāo)簽選擇器是直接應(yīng)用于所有的HTML標(biāo)簽
類選擇器可以在頁面中多次使用
id選擇器在頁面中只能使用1次

i、css屬性
1、字體樣式：
font-style： 設(shè)置字體風(fēng)格
font-weight： 設(shè)置字體粗細(xì)
font-size： 設(shè)置字體尺寸
font-family： 設(shè)置字體系列
font： 把以上所有的設(shè)置全部設(shè)置在一個(gè)屬性中

2、文本樣式：
color： 設(shè)置字體顏色
line-height： 設(shè)置行高
text-align： 設(shè)置文本的對齊方式
text-decoration：設(shè)置文本的裝修，例如：underline、none、line-through

3、背景屬性：
background-color： 設(shè)置背景顏色
background-image: 設(shè)置背景圖片
background-position：設(shè)置背景的位置
background-repeat： 設(shè)置背景的填充方式
background 設(shè)置背景，把以上所有的設(shè)置全部設(shè)置在一個(gè)屬性中

4、列表屬性：
list-style-image： 將列表設(shè)置為列表標(biāo)識
list-style-type： 設(shè)置列表的標(biāo)識類型，disc實(shí)心圓，circle空心圓，
square正方形
list-style： 把以上所有的設(shè)置全部設(shè)置在一個(gè)屬性中

5、超鏈接的偽類
a:link{ 未訪問的鏈接
color:#F00;
}
a:visited{ 已訪問的鏈接
color:#6F6;
}
a:hover{ 鼠標(biāo)懸浮改變樣式
color:#FCC;
}
a:active{ 鼠標(biāo)長按改變樣式
background-color:#0FF;
}

6、cursor屬性
url 設(shè)置自定義鼠標(biāo)樣式
default 默認(rèn)光標(biāo)
pointer 超鏈接的指針
wait 程序正在忙
help 指示可用的幫助
text 指示文本
crosshair 十字型
move 可移動指針

7、盒子模型
a、什么是盒子模型？
把相對應(yīng)的元素放入到一個(gè)容器中，可以進(jìn)行相對應(yīng)的處理
移動或者處理這個(gè)盒子模型的同時(shí)，整個(gè)在盒子模型中的元素都會跟著
被處理。

邊距：
內(nèi)邊距：
padding：top,left,right,bottom
外邊距：
margin：top,left,right,bottom
b、浮動
什么是浮動？
其實(shí)原理就是align

浮動的屬性：
left： 左浮動
right： 右浮動
none： 不浮動

clear屬性： 清除浮動，both全部清除

c、overflow屬性
當(dāng)有元素溢出時(shí)，應(yīng)如何處理

visible 默認(rèn)的
auto 自動的
hidden 隱藏
scroll 加上滾動條

d、iframe標(biāo)簽
內(nèi)聯(lián)框架。
可以導(dǎo)入其他東西。

<iframe src="1.html" width="1366px" height="200" scrolling="no"
frameborder="0">
src：導(dǎo)入其他的頁面路徑
width：調(diào)整導(dǎo)入的頁面的寬度，px是單位，可以不加，默認(rèn)就是px
height：調(diào)整導(dǎo)入的頁面的高度
scrolling：是否顯示滾動條
frameborder：是否顯示邊框，1表示顯示，0表示不顯示

e、position屬性
定位。
相對定位：
relative，相對他原來的位置，進(jìn)行移動。

絕對定位：
absolute，

fixed
定位到網(wǎng)頁的某個(gè)地方，一直不變。
static

偏移值的設(shè)定
X軸(left、right 屬性)與Y軸（top、bottom屬性）
可取值：像素或百分比

以上這篇HTML CSS樣式基礎(chǔ)(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/w13248223001/archive/2016/07/22/5697519.html

最新評論