HTML CSS樣式基礎(必看篇)

2020-03-24 15:59:56

字體：大中小

來源：轉載

供稿：網友

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

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

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

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