css 常用标签
■外部連接■:1. <link? rel="stylesheet" href="css.css" type="text/css" />
???????????? 2. <style type="text/css">
<!--
@import url(screen.css) screen;
@import url(print.css) print;
-->
</style>
■內部連接■:<STYLE type=text/css></STYLE>
==========================★字體屬性★=================================
符合屬性font
■字體：font-family:"宋體";
■字號：font-size:12px;
????? －相對大小：smaller|larger
■斜體顯示：font-style:italic;
■粗體：font-weight: normal(正常)|bolder(特粗);
■小型的大寫：font-variant:small-caps;
■字體顏色：color:#000000;
==========================★背景屬性★=================================
符合屬性background
■背景顏色：background-color:#FF0000;
■背景圖片：background-image:url(images/index_03.jpg);
■背景重復：background-repeat:no-repeat|repeat|repeat-x|repeat-y;
??????????????????????????? －no-repeat不重復|repeat重復|repeat-x x軸重復|repeat-y y軸重復
■背景附件：background-attachment:fixed|scroll;
??????????????????????????????? －fixed固定在頁面上靜止不動|scroll隨背景滾動
■背景位置：background-position:right|left|center|bottom|top;
==========================★文本屬性★=================================
■單詞間隔：word-spacing:normal;
■字符間隔：letter-spacing:normal;
■文字修飾：text-decoration: none|underline|overline|line-through|blink;
??????????????????? －none不修飾|underline添加下劃線|overline添加上劃線|line-through添加刪除線|blink文字閃爍效果（有限制）
■縱向排列：vertical-align: text-bottom|bottom|middle|text-top|top|super|sub|baseline;
????????????? －text-bottom元素和上級元素的字體對齊|bottom使元素和行中最低的元素向下對齊|middle縱向對齊元素基線加上上級元素的x高度的一半的中點，其中x高度是字母“X”的高度|text-top使元素和上級元素的字體向上對齊|top使元素和行中最高的元素向上對齊|super為上標|sub作為下標|baseline使元素和上級元素的基線對齊
■文本轉換：text-transform:none|capitalize|uppercase|lowercase;
?????????????????????? －none表示使用原始值|capitalize第一個字母大寫|uppercase每個單詞的所有字母大寫|lowercase每個字的所有字母小寫
■文本排列：text-align: left|right|center|justify;
??????????????????? －justify為兩端對齊
■文本縮進：text-indent:18px;
■文本行高：line-height:18px;
■處理空白：white-space:pre|nowrap;
??????????????????? －pre換行和空白都顯示|nowrap不顯示換行和空白
■文本反排：unicode-bidi|direction
unicode-bidi:normal|bidi-override|embed;
?????????? －bidi-override表示嚴格按照direction屬性的值重排序，忽略隱式雙向運算規則|embed表示對象打開附加的嵌入direction屬性的值重排序，忽略隱式雙向運算規則指定給嵌入層，在對象內部進行隱式重排序。
direction: rtl|ltr|inherit;
???????? －ltr表示從左到右的閱讀順序|rtl表示從右到左的閱讀順序|inherit表示文本流的值不可繼承
==========================★邊距與填充屬性★=================================
■邊距：margin復合屬性
margin-top:12px;
margin-bottom:12px;
margin-left:12px;
margin-right:12px;
■襯距,填充：padding復合屬性
padding-bottom:12px;
padding-left:12px;
padding-right:12px;
padding-top:12px;
==========================★邊框屬性★=================================
■設置的顏色：
border-bottom-color:#000000;
border-top-color:#000000;
border-right-color:#000000;
border-left-color:#000000;
■設置邊框寬度：
border-bottom-width:12px;
border-right-width:12px;
border-top-width:12px;
border-left-width:12px;
■設置邊框高度：
border-bottom-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;
border-top-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;
border-right-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;
border-left-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;
????????????? －outset整個方框凸陷，即在邊框內嵌入一個立體邊框|inset整個方框凹陷，即在邊框內嵌入一個立體邊框|ridge邊框成脊形|groove邊框帶有立體感的溝槽|double雙實線|solid實線|dashed虛線，短線|dotted點線|none不顯示邊框
==========================★定位及尺寸屬性★=================================
■定位方式：position:static|absolute|fixed|relative;
???????????????? －static無特殊定位|absol|fixed|relative相對定義，對象不可層疊，但將依據top|right|left|bottom
■元素定位：top|right|left|bottom對象與附近對象定位
■層疊順序：z-index:1;值高的覆蓋值低的
■浮動屬性：float: none|right|left;
?????????????? －left浮在對象左側|right浮在對象右側
■清除屬性：clear:right|left|both;
????????????? －right不允許右邊有浮動對象|left不允許左邊有浮動對象|both完全沒有浮動
■可視區域：clip: rect(auto, auto, auto, auto)|rect('top', 'right', 'bottom', 'left');
????????????? －auto對象不剪切|rect(數值)
■設定大小：height:12px;|width:12px;
■超出范圍：overflow:visible|auto|hidden|scroll;
???????????????? －visible表示不剪切內容也不添加滾動條|auto是<body>和<textarea>對象的默認值，它在需要時剪切內容并添加滾動條|hidden表示不顯示超過對象尺寸的內容|scroll表示顯示滾動條
■可見屬性：visibility: inherit|visible|hidden;
??????????????????? －inherit表示繼承上一個父對象的可見性，如果父對象可見，則該對象也可見，則該對象也可見，反之則可見|visible可見|hidden隱藏
■圖像符號：list-style-image:none|url(images/index_08.jpg);
???????????????????????? －url則使用絕對或相對地址指定作為符號的圖像|none不指定圖像
■列表縮進：list-style-position:inside|outside;
??????????????????????????? －inside列表默認屬性，列表項目標記放置在文本以內，且環繞文本根據標記對齊|outside表示列表項目標記放置在文本以外，且環繞文本不根據標記對齊
■列表符號：list-style-type:
■復合屬性：列表list-style
==========================★光標屬性★=================================
■光標屬性：cursor:url(images/wcj.ico);
==========================★連接屬性★=================================
a:link {
text-decoration: none|underline|overline|line-through|blink;
}
a:visited {
text-decoration: none|underline|overline|line-through|blink;
}
a:hover {
text-decoration: none|underline|overline|line-through|blink;
}
a:active {
text-decoration: none|underline|overline|line-through|blink;
}
none沒有任何修飾|underline給文本增加下劃線|overline給文本增加上劃線|line-through給文本增加刪除線|blink給文本增加閃爍線
link沒有訪問過的超鏈接內容|visited含有超鏈接訪問后的內容|hover含有超鏈接的內容在鼠標懸停狀態的顯示效果|active被激活后的顯示效果
==========================★滾動條樣式★=================================
1．
overflow內容溢出時的設置
overflow-x水平方向內容溢出時的設置
overflow-y垂直方向內容溢出時的設置
以上三個屬性設置的值為visible(默認值)、scroll有滾動條、hidden沒有滾動條、auto。
2．
scrollbar-arrow-color: #f4ae21;???? 三角箭頭的顏色*/
scrollbar-face-color: #333;???????? 立體滾動條的顏色 */
scrollbar-3dlight-color: #666;????? 立體滾動條亮邊的顏色*/
scrollbar-highlight- color: #666;?? 滾動條空白部分的顏色*/
scrollbar-shadow-color: #999;?????? 立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: #666;?? 立體滾動條強陰影的顏色*/
scrollbar-track-color: #666;??????? 立體滾動條背景顏色*/
scrollbar-base- color:#f8f8f8;????? 滾動條的基本顏色*/
==========================★靜態濾鏡樣式★=================================
靜態濾鏡樣式 （filter）（只有IE4.0以上支持）
filter: chroma(COLOR=#000000);
chroma 對所選擇的顏色進行透明處理 color (常用在透明滾動條的顏色)
alpha 設置圖片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur 在指定的方向和位置上產生動感模糊效果 add、direction、strength
chroma 對所選擇的顏色進行透明處理 color
dropShadow 在指定的方向和位置上產生陰影 color、offX、offY、positive
flipH 沿水平方向翻轉對象
flipV 沿垂直方向翻轉對象
glow 在對象周圍上發光 color、strength
gray 將對象以灰度處理
invert 逆轉對象顏色
light 對對象進行模擬光照
mask 對對象生成掩膜 color
shadow 沿對象邊緣產生陰影 color、direction
wave 在垂直方向產生正弦波形 add、freq、lightStrength、phase、strength
xray 改變對象顏色深度，并繪制黑白圖象
==========================★CSS濾鏡filter詳解★=================================
語法：STYLE="filter:filtername(fparameter1, fparameter2...)"
（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）
濾鏡說明：
alpha：設置透明層次
blur：創建高速度移動效果，即模糊效果
chroma：制作專用顏色透明
DropShadow：創建對象的固定影子
FlipH：創建水平鏡像圖片
FlipV：創建垂直鏡像圖片
glow：加光輝在附近對象的邊外
gray：把圖片灰度化
invert：反色
light：創建光源在對象上
mask：創建透明掩膜在對象上
shadow：創建偏移固定影子
wave：波紋效果
Xray：使對象變得像被x光照射一樣
1、濾鏡：Alpha
語 法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style= style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
說明：
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、濾鏡：blur
語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說明：
Add：一般為1，或0。
Direction：角度，0～315度，步長為45度。
Strength：效果增長的數值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")
3、濾鏡：Chroma
語法：STYLE="filter:Chroma(Color = color)"
說明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")
4、濾鏡：DropShadow
語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
說明：Color:#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、濾鏡：FlipH
語法：STYLE="filter:FlipH"
例子：filter:FlipH
6、濾鏡：FlipV
語法：STYLE="filter:FlipV"
例子：filter:FlipV
7、濾鏡：glow
語法：STYLE="filter:Glow(Color=color, Strength=strength)"
說明：
Color：發光顏色。
Strength：強度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8、濾鏡：gray
語法：STYLE="filter:Gray"
例子：filter:Gray
9、濾鏡：invert
語法：STYLE="filter:Invert"
例子：filter:Invert
10、濾鏡：mask
語法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")
11、濾鏡：shadow
語法：filter:Shadow(Color=color, Direction=direction)
說明：
Color：#rrggbb格式。
Direction：角度，0－315度，步長為45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")
12、濾鏡：wave
語法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase， Strength=strength)
說明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、濾鏡：Xray
語法：STYLE="filter:Xray"
例子：filter:Xray
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
/
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
用了一段CSS 布局設計網頁,發現自己的命名有點混亂,完全按照自己的想法命名,雖然沒什么影響,有不給別人看源文件,但是工作室有時候和團隊合作完成項目的時候,就遇到麻煩了,要修改一個地方相當的費事.所以還是有個標準比較好啊!
在網上看到的一個相關的參考,再加上平時也研究別人的代碼,發現這樣的命名使用很廣泛!我再加上自己的經驗,希望對看到這篇文章的人能有用!
命名規范
常用的CSS命名規則：
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
命名全部使用小寫字母，如果需要多個單詞，單詞間使用“-”分隔，比如user-list
常用代碼結構：
div：主要用于布局，分割頁面的結構
ul/ol：用于無序/有序列表
span：沒有特殊的意義，可以用作排版的輔助，例如
Example Source Code [www.52css.com]
<li><span>(4.23)</span>天幻網六周年天幻網六周年天幻網六周年天幻網六</li>
然后在css中定義span為右浮動，實現了日期和標題分兩側顯示的效果
h1-h6：標題
h1-h6 根據重要性依次遞減
h1位最重要的標題
label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，例如：
Example Source Code [www.52css.com]
<label for="user-password">密 碼</label>
<input type="password" name="password" id="user-password" />
fieldset & legend：fildset套在表單外，legend用于描述表單內容。例如：
Example Source Code [www.52css.com]
<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密 碼</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>
dl,dt,dd：當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽，例如
Example Source Code [www.52css.com]
<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一種叫做樣式表（stylesheet）的技術。也有的人稱之為層疊樣式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
<dd>XHTML是一個基于XML的置標語言，看起來與HTML有些想像，只有一些小的但重要的區別。可以這樣看，XHTML就是一個扮演著類似HTML的角色的XML。 本質上說，XHTML是一個橋接（過渡）技術，結合了XML（有幾分）的強大功能及HTML（大多數）的簡單特性。</dd>
</dl>
Example Source Code [www.52css.com]
C #content
S #subcol
M #maincol
X #xcol
這是縱向布局的XHTML結構，c-smx表示網頁有三個縱欄, c-sm表示有兩個縱欄, c-mx表示有兩個縱欄其中一個是附屬的, c-m表示一個縱欄。
其中在三縱欄的布局需要分為兩層 第一層是#subcol與#main第二層是#main中的#maincol與#xcol。
自定義命名：
根據w3c網站上給出的,最好是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種
Example Source Code [www.52css.com]
.red{color:red}
.important-news{color:red}
很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字。
轉載于:https://www.cnblogs.com/shuanger/archive/2012/12/13/2815767.html
總結
- 上一篇： 华为路由器RIP协议通信的配置
- 下一篇： 在项目开始前，为客户做专门的“需求变更流