標籤：c style code java a http
在HTML中使用CSS的方法
1.行內樣式
<p style="color:red">段落樣式</p>
2.內嵌樣式
<head>
<style type="text/css">
p{
color:red;
font-size:12px;
}
</style>
</head>
3.連結樣式
<head>
<link rel="stylesheet" type="text/css"href="1.css"/>
</head>
4.匯入樣式
<head>
<style type="text/css">
@import"1.css"
</style>
</head>
匯入樣式表必須在樣式表的開始部分，其他內部樣式表上面
優先順序問題
行內樣式>內嵌樣式>連結樣式>匯入樣式
-------------------------------------------
CSS基礎文法
根據CSS選擇符用途可以把選取器分為標籤選取器，類別選取器，全域選取器，ID選取器和偽類別選取器等。
全域選取器就是對所有的HTML元素起作用
*{property:value;}
偽類作用在標記的狀態上
偽類包括：first-child,:link,:vistited,:hover,:active,:focus,:lang等
超連結的偽類：：link,:vistited,:hover,:active
<html>
<head>
<title>偽類</title>
<style type="text/css">
a:link{color:red;} /*未訪問的連結*/
a:visited{color:green;} /*已訪問的連結*/
a:hover{color:blue;} /*滑鼠移動到串連上*/
a:active{color:orange;} /*選定的連結*/
</style>
</head>
<body>
<a href="">連結到本頁</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>
---------------------------------------
CSS字型與段落屬性
字型
{font-family:name,name...}
當前一種字型不能正常顯示時，用後一種字型，若字型由多個字串和空格組成，要加雙引號。
字型大小
{font-size:數值}
字型風格
{font-style；normal|italic|oblique|inherit}
加粗字型
{font-weight:100~900}
字型複合屬性
{font:font-style font-variant font-weight font-size font-family}
字型顏色color
----------------------------------------------
CSS段落樣式
p{word-spacing:15px|normal}用於設定詞與詞之間的間隔，不能設定文字之間的間隔
字元間隔
p{letter-spacing:15px|-15px|normal}
文字修飾
{text-decoration:none|wuderline|overline|line-through|blink}
垂直對齊
{vertial-align:屬性值} 屬性值有8個預設值可用，也可以用百分比
------------------------------------------
文本轉換
{text-transform:none|capitalize|uppercase|lowercase}
capitalize:將每個單詞的第一個字母轉換成大寫
水平對齊
{text-align:屬性值}用於定義文本的對齊
文本縮排
{text-indent:length} 設定文字區塊中首行的縮排，百分比或其他10mm
文本行高
{line-height:normal|length} 設定行間距px,mm,%
處理空白
{white-space:normal|pre|nowrap|pre-wrap|pre-line} 用於設定對象內空白字元的處理方式
pre:空白會被瀏覽器保留
文本反排
{unicode-bidi:normal|bidi-override|embed}
{direction:ltr|rtl|inherit}
------------------------------------
用CSS美化圖片
<img src="" border= width= height= style="border-style:" />
也可以用CSS來定義圖片的width,height,max-width,max-height,從而達到圖片的縮放效果
對齊圖片
圖片本身沒有對齊屬性，需要使用CSS繼承父標記的text-align來 定義對齊
垂直對齊
<p>對齊<img src="" style="vertical-align:baseline|bottom|middle|sub|super"/></p>
圖文混排
float:none|left|right
img{
float:left;
}
是文字圍繞到圖片的周圍
設定圖片與文字間距
如果需要設定圖片與文字之間的距離，即文字之間有一定的間距，不是緊緊的環繞，可以使用CSS中的padding屬性來設定（內邊距）
----------------------------------------
用CSS設定背景和邊框
{background-color:transparent|color} 設定網頁背景色
背景圖片
{background-image:none|url(url)}
background-repeat屬性用於設定背景圖片是否重複平鋪
background-attachment屬性用來設定背景圖片是否隨文檔一起滾動，該屬性包括兩個屬性值scroll和fixed
background-position屬性用於指定背景圖片在頁面中所處的位置
背景圖片大小
background-size:<length>|<percentage>|cover|contain
background-size:900 800;第一個寬度，第二個高度
背景複合屬性 屬性順序可以自由調換
-----------------------------------------
設定邊框
在網頁設計中，HTML元素在在頁面中會佔有一定的地區
邊框樣式
{border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset}
邊框顏色
border-color:color
邊框線寬
border-width:medium|thin|thick|length
邊框複合屬性
border:border-width||border-style||border-color
-------------------------------------
用CSS美化超級連結和滑鼠
對於超級串連的修飾，通常可以採用CSS偽類
a:link 定義a對象在未被訪問前的樣式
a:hover 定義a對象在其滑鼠移至上方時的樣式
a:active 定義a對象被使用者啟用時的樣式（在按一下滑鼠與釋放之間發生的事件）
a:visited 定義a對象在其連結地址已被訪問時樣式
<a href="" title=""></a> title提示資訊
超級連結背景圖設定
a{background-image:url(url);}
超級連結的按鈕效果
a:hover，當滑鼠經過連結時，會將連結向下，向右各移一個像素
滑鼠特效
使用CSS控制滑鼠箭頭
CSS通過改變cursor屬性來實現對滑鼠樣式的控制，包含17個屬性值
-------------------------------------------
用CSS美化表格和表單樣式
{border-collapse:separate|collapse} 前一個為預設屬性，表示邊框會分開，後一個表示邊框會合并成單一的邊框
表格邊框寬度
{border-width:}
表格邊框顏色
通常使用CSS屬性color設定表格中的文本顏色
使用background-color設定表格背景色，還可以設定某一個儲存格顏色
--------------------------------------
CSS與表單
美化表單中的元素
input{background-color:}
美化提交按鈕
對錶單元素邊框定義，可以採用border-style,border-width,border-color,也可以用gbackground-color屬性，將值設為transparent(透明)
美化下拉式功能表
---------------------------------------
用CSS製作實用菜單
導覽功能表是網站中必不可少的元素之一，通過導覽功能表可以在頁面上自由跳轉
項目列表
ul ol dl
在CSS中，可以通過屬性list-style-type來定義無序列表前面的項目符號
{list-style-type:dics|circle|square|none} 實心圓，空心圓，實心方塊
美化有序列表
{list-style-type:decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 阿拉伯數字 小寫羅馬數字 大寫羅馬數字 小寫英文字母 大寫英文字母
美化自訂欄表
圖片列表
對於有序或無序列表，不但可以通過list-style-type改變選項前面的特殊符號，還可以使用list-style-image屬性將每項前面的項目符號替換為任意的圖片
{list-style-image:none|url(url);}
列表縮排
在CSS中，可以通過list-style-position來設定圖片顯示位置
{list-style-position:outside|inside}
複合屬性list-style
無需表格的菜單
菜單的橫豎轉換
橫向菜單
li{float:left;}
a{display:biock;}
----------------------------------------
CSS濾鏡的應用
應用於IE9瀏覽器
CSS的濾鏡屬性的標示符是filter，文法格式如下：
filter:filtername(parameters)
filtername是濾鏡名稱，para指定了濾鏡中的參數
CSS基本濾鏡
通道（Alpha）濾鏡
圖片文字元素的透明效果
filter:Alpha()
Blur濾鏡
實現頁面模糊效果filter:Blur()
Chroma濾鏡
可以設定HTML對象中指定的顏色為透明色
filter:Chroma
DropShadow濾鏡
陰影製作效果在實際文字和圖片中非常實用
filter:DropShadow()
FlipH濾鏡
實現HTML對象翻轉效果，水平翻轉
filter:FlipH(enable=bEnabled)
Glow濾鏡
使對象邊緣產生一種柔和的邊框或光暈，並可產生如火焰一樣的效果
filter:Glow()
Gray濾鏡
使用Gray濾鏡能輕鬆地將彩色圖片變為黑白圖片
{filter:Gray();}
Invert濾鏡
使圖片產生一種“底片”或負片的效果
{filter:Invert();}
FlipV濾鏡
實現對象的垂直翻轉
{filter:FlipV();}
Mask濾鏡
為網頁中的元素對象做出一個矩形遮罩
{filter:Mask();}
Shadow濾鏡
給對象添加陰影
{filter:Shadow()}
Wave濾鏡
可以為對象 添加豎直方向上的波浪效果
{filter:Wave();}
X-ray濾鏡
使整體看起來有一種X光片的效果
{filter:Xray();}
CSS的進階濾鏡
進階濾鏡是指需要配合javascript的 指令碼語言，產生變換效果的濾鏡
BlendTrans濾鏡
可以實現HTML對象的漸隱漸現的效果
{filter：BlendTrans()}
Light濾鏡
產生類似於光照燈的效果
{filter:Light()}
RevealTrans濾鏡
實現映像之間的轉場效果
{filter:RrvealTrans()}
-------------------------------------------------
CSS定位與DIV布局
在網頁設計中，能否很好的定位網頁中的每個元素，是網頁整體布局的關鍵
定位方式
定位屬性
position屬性
在CSS中，可以通過position屬性，對頁面中的元素進行定位
position:static|relative|absolute|fixed
分別是預設值，相對定位，絕對位置，固定定位
<html>
<head>
<title>定位屬性</title>
</head>
<body>
<div>
<h2 style="position:absolute;left:80px;top:80px;">
這是絕對位置</h2>
</div>
</body>
</html>
相對定位
position:relative
絕對位置的座標原點是為上階項目的原點，與上階項目有關；相對定位的座標原點為本身位移量的原點，與上階項目無關
固定定位fixed
position：fixed
固定定位與絕對位置相似，但參照位置不是上階項目塊而是瀏覽器視窗，可以把一些效果固定在瀏覽器的視線位置
-----------------------------------
層疊順序（深度）
z-index用來設定元素層疊的順序，其方法是為每個元素指定一個數字，數字較大的元素將疊加在數字較小的元素之上
z-index:auto|number
該屬性只能作用於position和relative的對象
邊位移屬性
left right top buttom
--------------------------------------
浮動定位
浮動定位只能在水平方向上定位，不能再垂直方向上定位
float:none|left|right
清除浮動
clear：none|left|right|both
溢出定位
元素內容較多，元素框顯示不下，此時可以使用溢出屬性overflow來控制這種情況
overflow:visible|auto|hidden|scroll
隱藏定位
指定是否顯示一個元素產生的元素礦
visibility:inherit|visible|collapse|hidden
visible:元素可見
hidden:元素隱藏
collapse:主要隱藏表格的行或列
元素仍佔據本來空間
塊和行內元素
display:block|inline|~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
