css樣式標簽屬性,CSS樣式標簽
css常用屬性有哪些
一、html標簽
10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有北安免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
pre.../pre文字格式化
div....../div列塊容器
字體大小變化 font size=?想輸入的字/font
字體顏色 font color="..."想輸入的字/font
字體變粗 b想輸入的字/b
字體變斜 i想輸入的字/i
字體加下劃線 u想輸入的字/u
對正中央ㄉ語法 p align="center"內(nèi)容/p
對正左邊ㄉ語法 p align="left"內(nèi)容/p
對正右邊ㄉ語法 p align="right"內(nèi)容 /p
字體刪除線 s想輸入的字/s
字體設(shè)置 font face="字體名稱"想輸入的字/font
打字機字體 tt想輸入的字/tt
上標字 sup想輸入的字/sup
下標字 sub想輸入的字/sub
水平線 hr color="..."
換行輸入 想輸入的字br想輸入的字
超鏈接 a href="想鏈接網(wǎng)址"鏈接地的名稱/a
a href="mailto:填入email"要顯示的字打這里/a網(wǎng)絡(luò)郵寄標簽
貼圖 img src="圖形的網(wǎng)址"
跑馬燈(循環(huán)) marquee behavior=scroll想輸入的字/marquee
外部文件導(dǎo)入格式標簽
CSS外部導(dǎo)入格式：
link rel="stylesheet" type="text/css" href="/css.css" /
直接引用：
style type="text/css"
!--
id{...}
--
/style
javascript - 加載外部.js獨立文件：
script type="text/javascript" src="/script.js"/script
二、CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標字*/
vertical-align:super; /*上標字*/
text-decoration:line-through; /*加刪除線*/
text-decoration:overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/
三、CSS符號屬性：
list-style-type:none; /*不編號*/
list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫英文字母*/
list-style-type:upper-alpha; /*大寫英文字母*/
list-style-type:disc; /*實心圓形符號*/
list-style-type:circle; /*空心圓形符號*/
list-style-type:square; /*實心方形符號*/
list-style-image:url(/dot.gif); /*圖片式符號*/
list-style-position:outside; /*凸排*/
list-style-position:inside; /*縮進*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*/
五、CSS連接屬性：
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標轉(zhuǎn)到鏈接*/
鼠標光標樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號 cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:
border-top-color : #369 /*設(shè)置上框線top顏色*/
border-top-width :1px /*設(shè)置上框線top寬度*/
border-top-style : solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運用：
文字方塊 input type="text" name="T1" size="15"
按鈕 input type="submit" value="submit" name="B1"
復(fù)選框 input type="checkbox" name="C1"
選擇鈕 input type="radio" value="V1" checked name="R1"
多行文字方塊 textarea rows="1" name="S1" cols="15"/textarea
下拉式菜單 select size="1" name="D1"option選項1/option
option選項2/option/select
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
九、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白*/
基本語法
規(guī)則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如， P { text-indent: 3em }
當(dāng)中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類)，因而允許同一元素有不同樣式。例如，一個網(wǎng)頁制作者也許希望視其語言而定，用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類，css和html，供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類，例如，
P
例如，code.html.proprietary是無效的。/p
類的聲明也可以無須相關(guān)的元素:
.note { font-size: small }
在這個例子，名為note的類可以被用于任何元素。
一個良好的習(xí)慣是在命名類的時候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類也可以命名為small，但如果網(wǎng)頁制作者決定改變這個類的樣式，使得它不再是小字體的話，那么這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應(yīng)該盡量少用，因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
P ID=svp94O文本縮進3em
關(guān)聯(lián)選擇符
關(guān)聯(lián)選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因為層疊順序的規(guī)則，它們的優(yōu)先權(quán)比單一的選擇符大。例如， 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調(diào)文本會是黃色背景；而標題的強調(diào)文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如，屬性顏色能接受值red。
組合
為了減少樣式表的重復(fù)聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實際上，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，一個BODY定義了的顏色值也會應(yīng)用到段落的文本中。
有些情況是內(nèi)部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落不會有同文檔BODY一樣的上邊界值。
注解
樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素，能自動地被支持CSS的瀏覽器所識別。偽類區(qū)別開不同種類的元素(例如，visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分，例如段落的第一個字母。
偽類或偽元素規(guī)則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應(yīng)用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用，如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示，甚至不同字體大小和風(fēng)格。
一個有趣的效果是使當(dāng)前(或“可激活”)連接以不同顏色、更大的字體顯示。然后，當(dāng)網(wǎng)頁的已訪問連接被重選時，又以不同顏色、更小字體顯示。這個樣式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行偽元素
通常在報紙上的文章，例如Wall Street Journal中的，文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能，將其作為一個偽元素。首行偽元素可以用于任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
首個字母偽元素
首個字母偽元素用于加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用于任何塊級元素。例如:
P:first-letter { font-size: 300%; float: left }
會比普通字體加大三倍。
常用重要CSS樣式的屬性
盒子模型是CSS中一個很重要的概念，頁面中的所有元素都可以看成一個盒子，并占據(jù)一定的頁面空間，一個頁面由很多盒子組成，盒子之間會互相影響。只有掌握盒模型以及其中每個屬性的用法，才能真正控制好頁面元素。
盒子模型主要定義四個區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁面元素，擁有如下屬性：
邊框基本屬性：
通過一個屬性設(shè)置四個方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語法：border-方向（top/right/bottom/left）：width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語法：border-屬性（width/style/color）：取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語法：
border-image-source ：引入背景圖片
取值：
默認值：無圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個參數(shù)，即水平和垂直方向
取值：
Stretch：默認值，拉伸
Repeat：平鋪
Round：取整平鋪
內(nèi)容區(qū)域和邊框（邊緣）之間的距離
語法：padding: 值；
單邊設(shè)置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內(nèi)邊距的簡寫方式：
padding:value;
四個方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過外邊距可以為元素創(chuàng)建額外的“空間”。默認不能被其他元素所占據(jù)，用于拉伸兩個元素間的距離。
語法：margin: 值；
單邊設(shè)置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構(gòu)成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認值，滾動
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過為每個背景屬性提供多個屬性值實現(xiàn)。
font 簡寫屬性語法：
將所有字體屬性合寫為一行，其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個值，如果省略值地話，就使用屬性的默認值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語法：
作用：定義列表的編號樣式
屬性：list-style-type
作用：用于設(shè)置列表項的圖像屬性
語法：
圖像URL地址：圖像的相對路徑或絕對路徑
none：默認值，不指定圖像
注意：圖片圖標與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設(shè)置列表的圖片樣式。
通過設(shè)置li的背景圖片的方式來設(shè)置列表圖片基本步驟：
設(shè)置list-style-type屬性值為none
設(shè)置li標記的背景屬性backgruond
作用：用于聲明列表標志相對于列表項內(nèi)容的位置
語法：
作用：可以同時設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法：
注意：
可以不設(shè)置其中的某個值，未設(shè)置的屬性采用默認值
同時指定list-style-image和list-style-type時，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯誤無法顯示
當(dāng)列表與列表項目同時使用樣式時，列表項目的樣式優(yōu)先顯示
特點：
可以設(shè)置寬度和高度
默認情況下每個塊級元素獨占一行
作用：
塊級元素主要用于頁面布局
常用塊級元素：
div、p、h1~h6、ol、ul等
特點：
不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度
默認情況下多個行內(nèi)元素會在一行內(nèi)顯示，遇父元素邊界時會自動換行
作用：
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素：
a、span、em、b、i、strong、img、input等
作用：控制頁面元素脫離原有文檔流，實現(xiàn)向左或向右移動，直到該元素外邊緣碰到其包含框或另一個浮動框的邊緣停止，標準流中的其他盒子將頂?shù)礁雍凶拥奈恢?。浮動的元素不占?jù)實際空間。
屬性： float
取值：
浮動元素不會相互重疊；
浮動元素不會上下浮動，如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低于先前任何浮動元素的位置。
作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動元素。
取值：
作用：控制頁面元素在頁面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認屬性值，元素按照標準文檔流進行排列，塊級元素獨占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動換行。
特點：
相對于自身原有位置進行偏移
仍處于標準文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對定位后會產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時，默認該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點：
建立了以包含塊為基準的定位
絕對定位的元素的位置相對于最近的已定位祖先元素（設(shè)定了絕對定位、相對定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對于瀏覽器窗口。
完全脫離了標準文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對定位未設(shè)置偏移量的特點：
無論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標準文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是瀏覽器窗口本身。
在計算機顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對定位容器的z-index屬性即對應(yīng)該方向。
作用：用于控制元素的層疊次序，使得某個元素浮于其他元素之上。
語法：
auto：遵循其父元素的定位
number：整數(shù)，可負，值大者疊加在上層
注意：使用z-index屬性時，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時元素生成的顯示框類型
語法：dispaly:值;
作用：用于定義建立布局時元素生成的顯示框類型
語法：visibility:值;
css樣式的屬性。
css縮寫的主要規(guī)則如下：
margin/padding
通常寫法,會遇到以下三種情況
margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;
margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
那么我們進行CSS縮寫后會讓你目驚口呆的效果.如下
margin:1px
10px
5px
20px;
margin:5px;
margin:0
10px
5px;
書寫順序是
margin:上
右
下
左
,
在CSS中.值為0的時候可以將單位省略不寫就像第三種寫法一樣.
其中padding和margin基本是一樣的寫法
怎么樣.是不是大吃一驚.是的.CSS縮寫就是這樣做到的.
border
通常寫法:
border-width:1px;
border-style:solid;
border-color:#000;
縮寫后:
border:1px
solid
#000;
書寫順序:border:寬度
邊框線種類
顏色;
Background
通常寫法:
background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0
0;
縮寫后:
background:url(bg.png)
#00f
no-repeat
0;
書寫順序:background:背景圖片
顏色
重復(fù)類型
定位;
background:image
color
repeat
position;
Font
通常寫法:
font-family:"宋體";
font-size:2em;
line-height:180%;
font-weight:800;
縮寫后：
font:800
2em/180%
"宋體";
書寫順序:font:加粗
字體大小/行高
字體;
在使用Font縮寫時至少要有
字體大小和字體這兩項
font:字體大小
字體;
Color
通常寫法:
color:#000000;
color:#001188;
縮寫后:
color:#000;
color:#018;
16進制的色彩值時，如果每兩位的值相同，可以縮寫一個
css樣式與html標簽屬性的優(yōu)劣
css 樣式是css渲染引擎解析的 如 style="color:red;"
html標簽屬性是html解析的 input name="email" autoComplete="off"/
html標簽屬性難以重復(fù)使用，多個頁面想達到一樣的效果需要針對單獨頁面添加標簽
css樣式則可以被多個頁面調(diào)用，更加方便，易于維護和管理
標簽屬性和css樣式哪個優(yōu)先級高
css的樣式會優(yōu)先于標簽的屬性，比如img src="" width="255" height="60"和
.img{ width:300px;height=70px;} 。你會發(fā)現(xiàn)圖片的最終效果是300*70，所以是css樣式會優(yōu)先于標簽屬性。
文章題目：css樣式標簽屬性,CSS樣式標簽
當(dāng)前網(wǎng)址：http://www.jiaotiyi.com/article/dsshdsh.html