css 入門基礎(chǔ)教程
發(fā)布時(shí)間：2010-01-17 01:10:01 作者：佚名 
我要評(píng)論
我要評(píng)論css 入門基礎(chǔ)，適合剛開(kāi)始學(xué)習(xí)css的朋友，最好先有一定的html編寫(xiě)經(jīng)驗(yàn)。
一、CSS語(yǔ)法：
h1 ｛color:blue;font-size:12px;｝
h1就是HTML的標(biāo)簽，又叫選被器，是被選擇樣式化的對(duì)象，color:blue;就是效果一，font-size:12px;效果二
二、來(lái)個(gè)例子：
p {color:red;text-align:center}
或者這樣，更方便讀取
p
{
color:red;
text-align:center;
}
放到HTML里的代碼就是：
<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
三、CSS注釋用/* 這里是被注釋的內(nèi)容 */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
四、CSS的id和Class選擇器來(lái)控制樣式
id可以用作樣式化一個(gè)單獨(dú)的對(duì)象，比如我們要對(duì)某一個(gè)P元素做個(gè)效果，而其他的默認(rèn)效果。
id在CSS中的定義方式就是：
#para1
{
text-align:center;
color:red
}
這里的para1就是HTML文件中某一個(gè)元素的id，看個(gè)例子
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
看效果圖，只有id為para1的P元素有效果。
Class也就是類選擇器，可以表示一組元素的樣式，id只對(duì)一個(gè)有效
<html>
<style>
.cen {text-align: center}
</style>
<body>
<h1 class="cen">
This heading will be center-aligned
</h1>
<p class="cen">
This paragraph will also be center-aligned.
</p>
</body>
</html>
這樣h1和p的內(nèi)容都會(huì)自動(dòng)居中了
一、外部樣式表：適用于很多頁(yè)面都需要用到樣式表時(shí)
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
用文本編輯器進(jìn)行編輯，里面不能包含任何HTML的標(biāo)簽并以CSS為后綴保存就是一個(gè)樣式表文件，如下內(nèi)容
[code]
<PRE class=brush:css>hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</PRE>
需要注意的是在屬性值和單位間不要有空間，否則只有IE6有效，在Mozilla/Firefox/Netscape中無(wú)效。
應(yīng)該用
<PRE class=brush:css>p {margin-left: 20px;} 而不是 p {margin-left: 20 px;}
</PRE>
二、內(nèi)部樣式表：
當(dāng)某個(gè)文檔需要特殊樣式時(shí)，就可以用內(nèi)部樣式表，可以用<style>包在里面
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
三、內(nèi)聯(lián)樣式表
只對(duì)當(dāng)前元素使用，只要在相關(guān)標(biāo)簽內(nèi)使用樣式(style)，可以包含CSS屬性
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
四、多重樣式表
某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過(guò)來(lái)。
如，外部樣式表針對(duì)h3選擇器的三個(gè)屬性
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而外部樣式表?yè)碛嗅槍?duì)h3選擇器的兩個(gè)屬性
h3 {
text-align: right;
font-size: 20pt;
}
假如擁有樣式表的這個(gè)頁(yè)面同時(shí)與外部樣式表鏈接，那么h3得到的樣式是：
color: red;
text-align: right;
font-size: 20pt;
一、CSS背景控制
可以控制元素的的背景，大概有以下屬性
view sourceprint?1 background-color
background-image
background-repeat
background-attachment
background-position
.控制背景色
例如：
<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
顏色還可以用其他方式表示，如："red","rgb(255,0,0)","#ff0000"
<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>
</body>
</html>
.控制背景圖
<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif')}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
.背景重復(fù)（如何需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪，可以使用background-repeat屬性）
普通效果
<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
平鋪效果
<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
4.背景定位
可以用back-ground-position屬性改變圖像在背景中的位置。
<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
只顯示一張圖片，如果 去除 background-repeat:no-repeat;<BR>就顯示多張圖片。
圖片置頂，靠右
<html>
<head>
<style type="text/css">
body
{
background:#ffffff url('img_tree.png') no-repeat top right;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>
h1 ｛color:blue;font-size:12px;｝
h1就是HTML的標(biāo)簽，又叫選被器，是被選擇樣式化的對(duì)象，color:blue;就是效果一，font-size:12px;效果二
二、來(lái)個(gè)例子：
p {color:red;text-align:center}
或者這樣，更方便讀取
p
{
color:red;
text-align:center;
}
放到HTML里的代碼就是：
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
三、CSS注釋用/* 這里是被注釋的內(nèi)容 */
復(fù)制代碼
代碼如下:/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
四、CSS的id和Class選擇器來(lái)控制樣式
id可以用作樣式化一個(gè)單獨(dú)的對(duì)象，比如我們要對(duì)某一個(gè)P元素做個(gè)效果，而其他的默認(rèn)效果。
id在CSS中的定義方式就是：
復(fù)制代碼
代碼如下:#para1
{
text-align:center;
color:red
}
這里的para1就是HTML文件中某一個(gè)元素的id，看個(gè)例子
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
看效果圖，只有id為para1的P元素有效果。
Class也就是類選擇器，可以表示一組元素的樣式，id只對(duì)一個(gè)有效
復(fù)制代碼
代碼如下:<html>
<style>
.cen {text-align: center}
</style>
<body>
<h1 class="cen">
This heading will be center-aligned
</h1>
<p class="cen">
This paragraph will also be center-aligned.
</p>
</body>
</html>
這樣h1和p的內(nèi)容都會(huì)自動(dòng)居中了
一、外部樣式表：適用于很多頁(yè)面都需要用到樣式表時(shí)
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
用文本編輯器進(jìn)行編輯，里面不能包含任何HTML的標(biāo)簽并以CSS為后綴保存就是一個(gè)樣式表文件，如下內(nèi)容
[code]
<PRE class=brush:css>hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</PRE>
需要注意的是在屬性值和單位間不要有空間，否則只有IE6有效，在Mozilla/Firefox/Netscape中無(wú)效。
應(yīng)該用
<PRE class=brush:css>p {margin-left: 20px;} 而不是 p {margin-left: 20 px;}
</PRE>
二、內(nèi)部樣式表：
當(dāng)某個(gè)文檔需要特殊樣式時(shí)，就可以用內(nèi)部樣式表，可以用<style>包在里面
復(fù)制代碼
代碼如下:<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
三、內(nèi)聯(lián)樣式表
只對(duì)當(dāng)前元素使用，只要在相關(guān)標(biāo)簽內(nèi)使用樣式(style)，可以包含CSS屬性
復(fù)制代碼
代碼如下:<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
四、多重樣式表
某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過(guò)來(lái)。
如，外部樣式表針對(duì)h3選擇器的三個(gè)屬性
復(fù)制代碼
代碼如下:h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而外部樣式表?yè)碛嗅槍?duì)h3選擇器的兩個(gè)屬性
復(fù)制代碼
代碼如下:h3 {
text-align: right;
font-size: 20pt;
}
假如擁有樣式表的這個(gè)頁(yè)面同時(shí)與外部樣式表鏈接，那么h3得到的樣式是：
復(fù)制代碼
代碼如下:color: red;
text-align: right;
font-size: 20pt;
一、CSS背景控制
可以控制元素的的背景，大概有以下屬性
view sourceprint?1 background-color
background-image
background-repeat
background-attachment
background-position
.控制背景色
例如：
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
顏色還可以用其他方式表示，如："red","rgb(255,0,0)","#ff0000"
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>
</body>
</html>
.控制背景圖
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif')}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
.背景重復(fù)（如何需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪，可以使用background-repeat屬性）
普通效果
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
平鋪效果
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
4.背景定位
可以用back-ground-position屬性改變圖像在背景中的位置。
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
只顯示一張圖片，如果 去除 background-repeat:no-repeat;<BR>就顯示多張圖片。
圖片置頂，靠右
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
body
{
background:#ffffff url('img_tree.png') no-repeat top right;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇Html/Css(新手入門第一篇必看攻略)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-01
- 結(jié)束了HTML學(xué)習(xí)，接下來(lái)我終于揭開(kāi)了css的真實(shí)面紗，在大學(xué)時(shí)代，一直忙碌去各處收集學(xué)習(xí)資料，記得當(dāng)時(shí)不知在那位大俠手里拷了有關(guān)css相關(guān)學(xué)習(xí)資料，代碼看了半天實(shí)在費(fèi)解2009-11-13
- 你是新學(xué)習(xí)CSS？在這個(gè)漂亮的學(xué)習(xí)語(yǔ)言的初始過(guò)程可能是一個(gè)有點(diǎn)驚人，有很多可以學(xué)習(xí)它有時(shí)很難找出哪里開(kāi)始。幸運(yùn)的是有寶貴的大量信息和資源，那里的網(wǎng)絡(luò)覆蓋，通過(guò)先進(jìn)2009-08-29
- CSS的定義是由三個(gè)部分構(gòu)成: 選擇符(selector)，屬性(properties)和屬性的取值(value)。 1.語(yǔ)法: selector {property: value} (選擇符 {屬性:值}) 說(shuō)明:2009-06-28
css入門教程之學(xué)習(xí)網(wǎng)頁(yè)布局(1)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文：http://jorux.com/archives/layout-1-if-you-love-css/ 從本篇開(kāi)始講述如何用css實(shí)現(xiàn)網(wǎng)頁(yè)的布局，即如何用css控制網(wǎng)頁(yè)內(nèi)各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者2008-10-31- 引用一本書(shū)中的一段文字：“當(dāng)我第一次開(kāi)始學(xué)習(xí)漢語(yǔ)時(shí)，我的家庭老師老王給了我一本漢英字典、一本漢語(yǔ)語(yǔ)法書(shū)和一本初級(jí)教程2008-10-17
CSS入門教程:網(wǎng)頁(yè)首字下沉-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS入門教程:網(wǎng)頁(yè)首字下沉 :first-letter 版本：CSS2 兼容性：IE5.5 語(yǔ)法： Selector : first-letter { sRules } 說(shuō)明： 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的2008-10-17css是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了css是什么,小編覺(jué)得挺不錯(cuò)的，詳細(xì)的介紹了css的基本入門?，F(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-23