1. css簡介
css 是
cascading style sheet
的縮寫。層疊樣式表。
用途：用於(增強
)控制網頁外觀效果並允許將樣式資訊與網頁內容分離的一種標記性語言。
2. css常用的屬性
color：設定字型顏色（前景色）。
background-color：設定元素的背景色。
font-size：字型大小
font-weight：
bold|100-900|lighter
文字加粗
text-decoration：
underline|overline|line-through|none
文字裝飾效果
text-indent：首行縮排
2em
line-height：文字的行高
height：元素的高度
width：元素的寬度
text-align：元素的水平對齊方式
left|right|center
3. 盒子模型
l border：邊框
border-right
、border-top
、border-bottom
常見寫法：border:1px solid red; border-bottom:1px dashed green; border-right:none;
l margin：外邊距
margin-right
、margin-top
、margin-bottom
常見寫法
：margin:10px; margin-bottom:10px; margin:10px 0px; margin:10px 20px 30px 40px;(上右下左)
l padding：內邊距
padding-right
、padding-top
、padding-bottom
常見寫法：padding:10px; padding-bottom:10px;
4. css**的書寫位置
1>.行內樣式：直接在
html
元素的style
屬性中書寫
css** **
">
2>.內嵌樣式：在網頁檔案的
head
標記中，
title
標記後書寫
css**
3>.外部樣式：將
css**單獨寫到乙個樣式表檔案中（
***.css
），然後再將
css檔案匯入到網頁中
5. css選擇符的幾種用法
1>.id選擇符 語法：
#selectorname
#box1
2>.類選擇符 語法：
.selectorname class屬性
.box
3>.標記選擇符 語法：
selectorname
div
4>.組合選擇符 語法：
selector1,selector2,...
.box,#mybox,span
.box
#mybox
span
5>.包含選擇符 語法：
selector1 selecotr2
div span .box span #yourbox .box
6>.萬用字元選擇符 語法：*
* 6. 網頁中顏色的幾種用法
1>.擁有顏色名稱的顏色。
red、
blue
、black
、white
、gray
、purple...
2>.web安全色。
# + 6
位（0-9a-f
）
#ffffff #000000 #a927c0 #fff #081 #ffca66
3>.rgb顏色值。
rgb(0,255,100) rgb(100,100, 100)
每一位都介於
0-255之間
7. css屬性
1>.font-family 字型 宋體
|微軟雅黑
2>.border-collapse 邊框收縮
separate|collapse
給table
寫樣式時使用
3>.list-style
list-style-type：none|disc|circle|square|upper-alpha|lower-alpha|lower-roman|upper-roman|decimal
list-style-image
list-style-position
4>.float: left|right 浮動
注意：浮動使用完畢後記得清除浮動，否則會對後續元素造成影響。
clear: left|right|both 清除浮動
8. 偽類
:hover 滑鼠懸浮到元素上時應用的效果
tr:hover
:link 未訪問過的超連結
:visited 已經訪問過的超連結的樣式
:active 被啟用（滑鼠按下）時的樣式
9. css常用屬性
1>.background-image 設定背景
2>.background-repeat 設定背景的重複
repeat(水平垂直方向重複
)|no-repeat(
不重複)|repeat-x(
水平方向重複
)|repeat-y(
垂直方向重複)
3>.background-position 設定背景的座標
background-position:x y; background-position:20px 50px;
4>.position 定位
static | absolute | fixed | relative
注意：當position設定為
absolute
、fixed
或者relative
後，top|bottom|left|right
會被啟用。
5>.z-index 設定
z軸的大小
z-index:999;
6>.display 元素的呈現方式
inline：行內樣式，無法設定寬度、高度
block：塊，每次在新的一行顯示
inline-block：行內塊，不會換行，同時可以設定高度和寬度
none：隱藏元素，使元素不可見（並且不佔據空間）。
CSS 基礎知識
選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...
CSS基礎知識
css規則有兩個主要的部分組成 選擇器，以及一條或者多條宣告h1 css內部的注釋以 開始，以 結束p id選擇器，通過 來選擇html元素 username class選擇器，通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...
css基礎知識
css基礎 id選擇器 用 定義 結合div class選擇器 用.定義 結合div 背景 background color 背景色 background image 背景影象 background repeat 背景重複 background position 位置 background atta...