一、css
1.什麼是css？
Cascading Style Sheet 級聯樣式表
改變樣式的一個工具，說白了，就是為了讓我們的頁面好看，
HTML底層封裝了css這樣一個工具。
2.怎麼使用css
a、style 風格、樣式
這個關鍵詞寫到標簽內部，可以修改標簽的樣式
注意：寫在標簽內部！也就是>裡面
3.css樣式，分為三種
a、行內樣式表
<p style="color:#0FC">111111111111</p>
其中：style="color:#0FC"就是改變當前這個標簽的樣式。
b、內部樣式表
選擇器：告訴程序，我們要改變誰的樣式。
id選擇器：
1、在標簽內加上id屬性
2、在寫之前，要加上#
類選擇器：
1、在標簽內加上class屬性
2、類選擇器，寫之前，要加上.
注意：以.開頭
標簽選擇器：
CSS Code復制內容到剪貼板注意：
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,.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-through
3、背景屬性：
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樣式基礎(必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。
原文地址：http://www.cnblogs.com/w13248223001/archive/2016/07/22/5697519.html