css語法規則
① 簡述新建css規則中!3種類型的作用
其實你說錯了,樣式表類型有4種,如下:
1、內聯樣式表
直接在HTML標記內,插入sytle屬性,再定義要顯示的樣式,這是最簡單的樣式定義方法。不過,利用這種方法定義樣式時,效果只可以控制該標記,其語法如下:
<標記名稱 style="樣式屬性:屬性值;樣式屬性:屬性值">
如:<body style=" color:#FF0000;font-family:"宋體";cursor:url(3151.ani);">
2、 嵌入樣式表
<style type="text/css">
內部樣式表是把樣式表放到頁面的<head>區里,這些定義的樣式就應用到頁面中了,樣式表是用<style>標記插入的
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
<style>元素是用來說明所要定義的樣式。TYPE屬性是指定style元素以css的語法定義。有些低版本的瀏覽器不能識別style標記,這意味著低版本的瀏覽器會忽略style標記里的內容,並把style標記里的內容以文本直接顯示到頁面上。為了避免這樣的情況發生,我們用加HTML注釋的方式<!-- 注釋 -->隱藏內容而不讓它顯示。
3、外部樣式表
<link href="樣式表地址" rel="stylesheet" type="text/css" />
4、輸入樣式表(很少採用)
可以使用css的@import聲明將一個外部樣式表文件輸入到另外一個css文件中,被輸入的css文件中的樣式規則定義語句就成為了輸入到的css文件的一部分,也可以使用@import聲明將一個css文件輸入到網頁文件的<style></style>標簽對中,被輸入的css文件中的樣式規則定義語句就成了<style></style>標簽對中的語句。
<style>
@import url(http://……)
</stypel>
4種樣式表的優先順序為:內聯樣式表 > 嵌入樣式表 > 外部樣式表 > 輸入樣式表
② CSS的基礎語法
CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。
選擇器 {宣言1; 宣言2; ... 宣言N }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性(property)是您希望設置的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開。
選擇器 {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色,同時將字體大小設置為 14 像素。
在這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結構:
值的不同寫法和單位
除了英文單詞 red,我們還可以使用十六進制的顏色值 #ff0000: p{color:#ff0000;}為了節約位元組,我們可以使用 CSS 的縮寫形式: p{color:#f00;}我們還可以通過兩種方法使用 「紅綠藍」RGB 值: p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}請注意,當使用 RGB 百分比時,即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這么做了。比如說,當尺寸為 0 像素時,0 之後不需要使用 px 單位,因為 0 就是 0,無論單位是什麼。
值為若干詞須寫引號
提示:如果值為若干詞,則要給值加引號,值為中文也建議加上引號: p{font-family:sansserif;}多重聲明
如果要定義不止一個聲明,則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最後一條規則是不需要加分號的,因為分號在英語中是一個分隔符號,不是結束符號。然而,大多數有經驗的設計師會在每條聲明的末尾都加上分號,這么做的好處是,當你從現有的規則中增減聲明時,會盡可能地減少出錯的可能性。就像這樣: p{text-align:center;color:red;}你應該在每行只描述一個屬性,這樣可以增強樣式定義的可讀性,就像這樣: p{text-align:center;color:black;font-family:arial;}空格和大小寫
大多數樣式表包含不止一條規則,而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯: body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}是否包含空格不會影響 CSS 在瀏覽器的工作效果,同樣,與 XHTML 不同,CSS 對大小寫不敏感。不過存在一個例外:如果涉及到與 HTML 文檔一起工作的話,class 和 id 名稱對大小寫是敏感的。
③ css 文檔中css語句的通用語法規則有幾種寫出這些規則的一般形式
通常
匹配ID以#開頭
匹配類以.開頭
匹配HTML標簽則直接寫標簽名
比如這段代碼:
<div id="test">
<span class="cls">
<li id="sub"></li>
</span>
</div>
要寫CSS語句的話應該這樣
<style type="text/css">
.cls{
/*CSS類定義代碼在這里*/
}
#test{
/*會匹配ID為TEST的標簽*/
}
div{
/*所有DIV標記都被我匹配*/
}
</style>
更高級一點的應用
偽類模式:
#test span{
//以空格隔開 表示匹配以test為ID標簽內的SPAN標記都會匹配
}
同樣道理
div span{
//the same!
}
.cls #sub{
//理會一下
}
恩其實還有很多模式匹配 這都要自己去實踐一下比較好
CSS就象99乘法表 但是不用背只要你知道規則並能靈活應用就OK了,可以看CSS參考文獻來補充這方面的不足.
我的QQ 174419041 歡迎交流
④ CSS樣式表有哪幾類規則
1、內聯樣式表
直接在HTML標記內,插入sytle屬性,再定義要顯示的樣式,這是最簡單的樣式定
義方法。不過,利用這種方法定義樣式時,效果只可以控制該標記,其語法如下:
<標記名稱 style="樣式屬性:屬性值;樣式屬性:屬性值">
如:<body style=" color:#FF0000;font-family:"宋體";cursor:url(3151.ani);">
2、 嵌入樣式表
<style type="text/css">
內部樣式表是把樣式表放到頁面的<head>區里,這些定義的樣式就應用到頁面中了,樣式表是用<style>標記插入的
<head>
……
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
……
</head>
<style>元素是用來說明所要定義的樣式。TYPE屬性是指定style元素以css的語法定義。有些低版本的瀏覽器不能識別style標記,這意味著低版本的瀏覽器會忽略style標記里的內容,並把style標記里的內容以文本直接顯示到頁面上。為了避免這樣的情況發生,我們用加HTML注釋的方式<!-- 注釋 -->隱藏內容而不讓它顯示。
3、外部樣式表
<link href="樣式表地址" rel="stylesheet" type="text/css" />
4、輸入樣式表
可以使用css的@import聲明將一個外部樣式表文件輸入到另外一個css文件中,被輸入的css文件中的樣式規則定義語句就成為了輸入到的css文件的一部分,也可以使用@import聲明將一個css文件輸入到網頁文件的<style></style>標簽對中,被輸入的css文件中的樣式規則定義語句就成了<style></style>標簽對中的語句。
<style>
@import url(http://……)
</stypel>
⑤ CSS的語法規則是什麼,試舉例說明
看你用哪種方式嵌入到html,有內聯樣式表、內部樣式表、外部樣式表。三種的各不一樣。常用的是外部,例如:p{color: green;}。
⑥ css規則具體有哪些!
基本語法
規則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,
P { text-indent: 3em }
當中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁製作者也許希望視其語言而定,用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類,css和html,供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類,例如,
<P CLASS=warning>每個選擇符只允許有一個類。
例如,code.html.proprietary是無效的。</p>
類的聲明也可以無須相關的元素:
.note { font-size: small }
在這個例子,名為note的類可以被用於任何元素。
一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁製作者決定改變這個類的樣式,使得它不再是小字體的話,那麼這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
<P ID=svp94O>文本縮進3em</P>
關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字元串。這些選擇符可以指定一般屬性,而且因為層疊順序的規則,它們的優先權比單一的選擇符大。例如, 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。
組合
為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色>值也會應用到段落的文本中。
有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。
註解
樣式表裡面的註解使用C語言編程中一樣的約定方法去指定。CSS1註解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。
偽類或偽元素規則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。
一個有趣的效果是使當前(或「可激活」)連接以不同顏色、更大的字體顯示。然後,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:
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 }
⑦ css語法規則望指教
選我的答案把,
我閱讀了你這個類,主要是用來清除浮動的,
具體和我們往常的清除浮動實現方法不一樣。但是這種方法目前來說不值得推廣。
這個類的意思就是說, 只要我調用了clearfix類,那麼他就會在這個調用這個類的元素的後面生成一個占據0像素的行清除浮動。(平時我們清除浮動的設置成0像素 都是無效的 ,這種方法有效。)
content: "."; 這個屬性是配合偽對象:after使用的。
當偽對象:after 使用content屬性,是用來設置在對象後發生的內容。
也就是說 ,當一個元素 調用了帶有:after偽對象類的時候,他在元素結束了自身的屬性後,會使用content:所設置的屬性來書寫一個新元素。(目前主流瀏覽器大部分不支持)
而content: "."是調用字元串 「.」。
也就是說,他會在元素後面顯示一個點「.」。
* html>body .clearfix {}
這個是一個hack的寫法,由於瀏覽器的兼容問問題 「>」 這個選擇器在IE6下面不支持,
意思是 所有標簽(*) 下面的 html標簽的子標簽body 的 clearfix類
「>」子對象選擇符。選擇所有作為html子對象的 body 。
⑧ CSS定義的基本規則
基本語法
規則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,
P { text-indent: 3em }
當中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁製作者也許希望視其語言而定,用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類,css和html,供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類,例如,
<P CLASS=warning>每個選擇符只允許有一個類。
例如,code.html.proprietary是無效的。</p>
類的聲明也可以無須相關的元素:
.note { font-size: small }
在這個例子,名為note的類可以被用於任何元素。
一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁製作者決定改變這個類的樣式,使得它不再是小字體的話,那麼這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
<P ID=svp94O>文本縮進3em</P>
關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字元串。這些選擇符可以指定一般屬性,而且因為層疊順序的規則,它們的優先權比單一的選擇符大。例如, 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。
組合
為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色>值也會應用到段落的文本中。
有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。
註解
樣式表裡面的註解使用C語言編程中一樣的約定方法去指定。CSS1註解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。
偽類或偽元素規則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。
一個有趣的效果是使當前(或「可激活」)連接以不同顏色、更大的字體顯示。然後,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:
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 }
⑨ CSS樣式表與HTML語言的語法規則的區別
css html 語法規則區別 很難用語言表達
⑩ css選擇器有哪幾種語法規則是什麼
1. 標簽來名選擇器 div { color:Red;} 即頁面自中的各個標簽名的css樣式
2.類選擇器 .divClass {color:Red;} 即定義的每個標簽的class 中的css樣式
3.ID選擇器 #myDiv {color:Red;} 即頁面中的標簽的id
4.後代選擇器(類選擇器的後代選擇器) .divClass span { color:Red;} 即多個選擇器以逗號的格式分隔 命名找到准確的標簽
5.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標簽分組顯示