HTML CSS樣式基礎(chǔ)(必看篇)

2020-03-24 15:59:56

字體：大中小

供稿：網(wǎng)友

Cascading Style Sheet 級(jí)聯(lián)樣式表改變樣式的一個(gè)工具，說(shuō)白了，就是為了讓我們的頁(yè)面好看，HTML底層封裝了css這樣一個(gè)工具。2.怎么使用cssa、style 風(fēng)格、樣式這個(gè)關(guān)鍵詞寫到標(biāo)簽內(nèi)部，可以修改標(biāo)簽的樣式注意：寫在標(biāo)簽內(nèi)部！也就是里面3.css樣式，分為三種a、行內(nèi)樣式表 p >其中： >b、內(nèi)部樣式表選擇器：告訴程序，我們要改變誰(shuí)的樣式。id選擇器：1、在標(biāo)簽內(nèi)加上id屬性2、在寫之前，要加上#
CSS Code復(fù)制內(nèi)容到剪貼板
styletype= text/css //style關(guān)鍵詞 p{//p標(biāo)簽，標(biāo)簽選擇器，查找所有相對(duì)應(yīng)的標(biāo)簽 color:#F33;//要改變的樣式。 } /style
注意： 1、style里面要寫上type屬性，標(biāo)識(shí)這是改變css
2、選擇器后面要加上一對(duì){} ，
3、每一句改變樣式之后，要加上;c、外部樣式表寫在我們網(wǎng)頁(yè)的外面1、新建一個(gè)css
2、在css中寫上相對(duì)應(yīng)的樣式
3、將css樣式導(dǎo)入網(wǎng)頁(yè)a、 link href= 1.css rel= stylesheet type= text/css / b、 style type= text/css @import url( css路徑 /style d、樣式表的優(yōu)先級(jí)行內(nèi)樣式表內(nèi)部樣式表外部樣式表e、選擇器的優(yōu)先級(jí)id選擇器類選擇器標(biāo)簽選擇器f、并集選擇器通過一個(gè)詳細(xì)的描述或者說(shuō)地址來(lái)查找某一個(gè)或者某一組相對(duì)應(yīng)的標(biāo)簽p,#id,.html' target='_blank'>class{}會(huì)改變所有p、id和class所覆蓋的標(biāo)簽樣式，中間用英文輸入法的 , 號(hào)隔開g、交集選擇器h3.cecond{}會(huì)先查找h3標(biāo)簽，再查找所有h3標(biāo)簽里面的類名為second的標(biāo)簽修改屬性中間沒有任何東西進(jìn)行連接h、后代選擇器CSS Code復(fù)制內(nèi)容到剪貼板
會(huì)根據(jù)所寫的標(biāo)簽或者選擇器，進(jìn)行一層一層的查找，直到最后查找到所需要的標(biāo)簽，中間用隔開小結(jié)：標(biāo)簽選擇器是直接應(yīng)用于所有的HTML標(biāo)簽
類選擇器可以在頁(yè)面中多次使用
id選擇器在頁(yè)面中只能使用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è)置文本的對(duì)齊方式
text-decoration：設(shè)置文本的裝修，例如：underline、none、line-through3、背景屬性：
background-color：設(shè)置背景顏色
background-image: 設(shè)置背景圖片
background-position：設(shè)置背景的位置
background-repeat：設(shè)置背景的填充方式
background 設(shè)置背景，把以上所有的設(shè)置全部設(shè)置在一個(gè)屬性中4、列表屬性：
list-style-image：將列表設(shè)置為列表標(biāo)識(shí)
list-style-type：設(shè)置列表的標(biāo)識(shí)類型，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)長(zhǎng)按改變樣式
background-color:#0FF;
}6、cursor屬性
url 設(shè)置自定義鼠標(biāo)樣式
default 默認(rèn)光標(biāo)
pointer 超鏈接的指針
wait 程序正在忙
help 指示可用的幫助
text 指示文本
crosshair 十字型
move 可移動(dòng)指針7、盒子模型
a、什么是盒子模型？
把相對(duì)應(yīng)的元素放入到一個(gè)容器中，可以進(jìn)行相對(duì)應(yīng)的處理
移動(dòng)或者處理這個(gè)盒子模型的同時(shí)，整個(gè)在盒子模型中的元素都會(huì)跟著
被處理。邊距：
內(nèi)邊距：
padding：top,left,right,bottom
外邊距：
margin：top,left,right,bottom
b、浮動(dòng)
什么是浮動(dòng)？
其實(shí)原理就是align浮動(dòng)的屬性：
left：左浮動(dòng)
right：右浮動(dòng)
none：不浮動(dòng)clear屬性：清除浮動(dòng)，both全部清除c、overflow屬性
當(dāng)有元素溢出時(shí)，應(yīng)如何處理visible 默認(rèn)的
auto 自動(dòng)的
hidden 隱藏
scroll 加上滾動(dòng)條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)入其他的頁(yè)面路徑
width：調(diào)整導(dǎo)入的頁(yè)面的寬度，px是單位，可以不加，默認(rèn)就是px
height：調(diào)整導(dǎo)入的頁(yè)面的高度
scrolling：是否顯示滾動(dòng)條
frameborder：是否顯示邊框，1表示顯示，0表示不顯示e、position屬性
定位。
相對(duì)定位：
relative，相對(duì)他原來(lái)的位置，進(jìn)行移動(dòng)。絕對(duì)定位：
absolute，fixed
定位到網(wǎng)頁(yè)的某個(gè)地方，一直不變。
static偏移值的設(shè)定
X軸(left、right 屬性)與Y軸（top、bottom屬性）
可取值：像素或百分比以上這篇HTML CSS樣式基礎(chǔ)(必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/w13248223001/archive/2016/07/22/5697519.html更多編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：2013年五大主流瀏覽器 HTML5 與 CSS3 兼容性大比拼

下一篇：使用CSS3美化HTML表單的技巧演示