建站
咨詢
售后
建站咨詢
新聞中心
怎樣利用CSS制作網(wǎng)頁
光是CSS是做不了網(wǎng)頁的,CSS是樣式表,簡單說就是控制網(wǎng)頁里所有元素的表現(xiàn)形式,比如背景,比如字體大小,顏色.他需要和你html一起組成網(wǎng)頁.網(wǎng)頁主要是內(nèi)容的體現(xiàn),最好用div的寫法,就是層+樣式,網(wǎng)頁里標簽都可以設(shè)置id,就像人取了一個名字,id不能重復(fù),然后在css里用
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供南江網(wǎng)站建設(shè)、南江做網(wǎng)站、南江網(wǎng)站設(shè)計、南江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、南江企業(yè)網(wǎng)站模板建站服務(wù)，10多年南江做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
#id {樣式代碼}的方式就能控制這個id了.
如果多個內(nèi)容相同,可以看做他們是一組的,就是class,設(shè)置class
.class名稱 {樣式代碼} 就可以設(shè)置這個組的樣式了,class名可以重復(fù),主要應(yīng)用就是這二個,還有更多資料相信你可以在很多地方找到教程.
怎么用div布局加css樣式做網(wǎng)頁
方法/步驟
1
在桌面建立一個index.htm的文件和main.css的文件，當然你也可以不用main.css的文件，但是為了方便操作，還是建一個吧。只要把記事本另存為就可以了。
2
做好這兩個文件后我們把網(wǎng)頁的基礎(chǔ)代碼寫上去，并使index文件受到main.css的控制，我們右鍵選擇用記事本打開index文件輸入代碼，并在head里寫上link href="main.css" type="text/css" rel="stylesheet"使它受到main.css控制
html
head
title/title
/head
body
/body
/html
3
下面我們?nèi)ain.css寫一些屬性看看是不是能控制index文件。我希望整個頁面是粉色的，看上去溫馨，我在main.css里寫上*{background:#FF66FF}看看。我們打開index文件看看是不是在瀏覽器上是不是粉色的。在瀏覽器上是粉色的，表示已經(jīng)受到css樣式表的控制了。
4
下面我們進行布局一般網(wǎng)頁都是3層一級，所以我們需要div布局了在body里面寫一般我會先分為3層
html
head
title/title
link href="main.css" type="text/css" rel="stylesheet"
/head
body
div id="top"
div id="top1"/div
div id="top2"/div
div id="top3"/div
/div
/body
/html
5
布局好后我們需要去定義屬性了，這里我只是簡單的定義了一下
*{background:#FF33FF}
#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
#top1{background:#66FFFF; height:50px; width:800px;}
#top2{background:#FF00CC; height:400px; width:800px}
#top3{background:#FF9933; height:550px; width:800px}
定義好了我們打開預(yù)覽一下看看，圖片是不是居中和分成3塊了。當然，顏色只是為了方便看清楚，可以不寫。
6
其實做網(wǎng)頁就是不斷的畫框，只要知道布局和定義屬性就可以了，下面我們就整個做一下，因為我的有一些是一樣的，可以用class調(diào)用，class=baidu這個只是隨便寫的，你愛等于什么就等于什么
html
head
title/title
link href="main.css" type="text/css" rel="stylesheet"
/head
body
div id="top"
div id="top1"這里都是我截圖的照片/div
div id="top2"
div class="baidu"/div
div class="baidu"/div
/div
div id="top3"
div class="baidujingyan"/div
div class="baidujingyan"/div
/div
/div
/body
/html
7
下面我們再去定義他的屬性，當然我只是簡單的定義一下
*{background:#FF33FF}
#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}
#top2{background:#FF00CC; height:400px; width:800px}
#top3{background:#FF9933; height:550px; width:800px}
.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}
.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}
8
因為我這個是我截圖相冊的網(wǎng)頁，下面我們就放照片吧，這里我偷個懶，把照片都放在桌面了，所以不用連接照片地址了。
html
head
title/title
link href="main.css" type="text/css" rel="stylesheet"
/head
body
div id="top"
div id="top1"這里都是我老婆的照片/div
div id="top2"
div class="baidu"img src="QQ圖片20141212090452.jpg"/div
div class="baidu"img src="QQ圖片20141212090346.jpg"/div
/div
div id="top3"
div class="baidujingyan"img src="QQ圖片20141212090224.jpg"/div
div class="baidujingyan"img src="QQ圖片20141212090255.jpg"/div
/div
/div
/body
/html
如果圖片不在同一層目錄，就需要連接到圖片地址
9
這樣一個網(wǎng)頁就做好了，如果需要制作精美的網(wǎng)頁，就需要不斷的進行div布局和css樣式的規(guī)定了。
10
下面我來說說網(wǎng)頁制作的定義，網(wǎng)頁的制作只要會使用div不停的布局，不停的定義他的屬性，基本靜態(tài)的網(wǎng)頁就是這樣做出來的
HTML怎么把CSS樣式插入到頁面
html引用css方法如下：
1、直接在div中使用css樣式制作div+css網(wǎng)頁
2、html中使用style自帶式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推薦此方法
解html引用css方法的例子
1、直接在html標簽元素內(nèi)嵌入css樣式，如div style="font-size:14px; color:#FF0000;"我是div css測試內(nèi)容-支持/div 效果如下圖
2、在html頭部head部分內(nèi)style聲明插入代碼如下：
style?type="text/css"?
!--?
.ceshi?{font-size:14px;?color:#FF0000;}/*這里是設(shè)置CSS的樣式內(nèi)容*/?
--?
/style
具體方法如下圖：
3、使用@import引用外部CSS文件方法
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"
"
html?xmlns="
head?
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/?
titlecss引用方法實例-測試實例/title?
style?type="text/css"?
!--?
@import?url(wcss.css);/*這里是通過@import引用CSS的樣式內(nèi)容*/?
--?
/style?
/head?
body?
div?class="ceshi"我是div?css測試內(nèi)容支持/div?
/body?
/html
Wcss.css文件內(nèi)代碼.ceshi {font-size:14px; color:#FF0000;}
效果如下圖：
可以看出使用此方法和使用自帶式引用css樣式表方法有相同處，都是需要在html的head內(nèi)使用style標簽引用外部css。
4、使用link來調(diào)用外部的css文件
在head放置link rel="stylesheet" href="wcss.css" type="text/css" /來調(diào)用外部的wcss.css文件來實現(xiàn)html引用css文件
詳細如下圖
此方法就不需要style標簽，而是直接通過link一個樣式來引用外部樣式
一般推薦使用link來引用外部的css樣式方法。
將樣式表(css)加到你的網(wǎng)頁中的幾種方法
(1)、將樣式表置入 HTML 文件頭部:
!--
H1 {color: green; font-family: impact}
P {background: yellow; font-family: courier}
--
(2)、將一個外部樣式表定義文件鏈接到 HTML 文件上:
文件 mystyles.css 的內(nèi)容如下:
H1 {color:green; font-family:impact}
P {background:yellow; font-family:courier}
(3)、將一個外部樣式表定義文件輸入到 HTML 文件中:
!--
@import url(company.css);
H1 { color: orange; font-family: impact}
--
其中 company.css 文件內(nèi)容如下：
H1{color:green; font-family:times}
P{background:yellow; font-family:courier}
(4)、將樣式表加入到 HTML 文件行中:
如：
(注意：如果一個網(wǎng)頁中同時使用了以上 4 種方法，那么
它們的優(yōu)先級從高到低是 4-3-2-1。)
在網(wǎng)頁制作中怎樣引用CSS樣式？
共有4種引入cascading sheet style層疊樣式表方式： 1。link href="路徑/文件名.css" rel="stylesheet" type="text/css" 2。style a{text-align:center:...}/style(一般放在/head與/body之間) 3。style @import url("路徑/文件名.css" );/style (一般放在/head與/body之間,但比較少見，也少用) 4。直接在標簽后面加入style=""。比如img src='' " style="width:xxxpx;.height:xxxpx;" /
求采納
CSS樣式表嵌入到網(wǎng)頁中的幾種方法
css樣式表嵌入網(wǎng)頁有以下三種方法：
1，內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是直接在html標簽上定義該標簽的css樣式，如：
div
style="width:200px;height:30px;"/div
2，內(nèi)部樣式
內(nèi)部樣式是寫在html文件中，且包含在style/style代碼塊中，如：
style
.box{width:200px;height:30px;}
/style
div
class="box"/div
3，外部樣式
外部樣式是通過在html中引用外部css文件來控制樣式，如：
html文件中寫入引用語句：
link
href="css文件路徑"
rel="stylesheet"
media="screen"
/
文章題目：引入css樣式制作網(wǎng)頁,頁面引入css樣式
當前地址：http://fisionsoft.com.cn/article/dsiiepd.html
