1.CSS指的是什么?在網(wǎng)頁制作中為什么要使用CSS技術(shù)? 2.網(wǎng)頁制作中有哪幾種樣式設(shè)置方法?各有何特點?

1.css是網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言，就比如每個人都有一雙眼睛、兩只耳朵、兩個鼻孔、一個嘴巴，而長的丑的人只是他的面部樣式不符合大眾的審美觀。

創(chuàng)新互聯(lián)公司堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10多年網(wǎng)站建設(shè)經(jīng)驗創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)站設(shè)計、H5場景定制、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、重慶小程序開發(fā)公司服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

2.網(wǎng)站制作中之所以要使用css，是為了讓頁面布局樣式等更加美觀從而吸引更多閱讀者。就好比一個五官精致的美女大家都愛看一樣！

3.

①行內(nèi)樣式。例如：p style="color:red;"樣式/p(實際效果是p標(biāo)簽中的字體為紅色)

②內(nèi)嵌樣式。列如p class="test"樣式/p style.test{color:red;}/style(效果同上)

③外聯(lián)樣式。列如把代碼 .test{color:red;} 保存在style.css文件中，然后在頁面中引入link type="text/css" rel="stylesheet" href="style.css" /(效果同上)

（望采納哦！~~）

怎樣通過css美化我的模版

CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading Stylesheet）。 在主頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。 只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。

顏色選擇器

顏色：

選中顏色：

代碼：

基色 : #000000

亮度 : 120

使用說明：

1、選取顏色

在顏色選取區(qū)域點擊你所需要的色彩；

2、調(diào)整亮度

在右側(cè)的漸變色塊中調(diào)整該顏色的亮度；

3、復(fù)制粘貼代碼

復(fù)制在“代碼”框中該顏色的代碼，粘貼（CTRL+V）到css自定義模板所需位置即可。

空間頁面CSS說明

body 整個空間頁面{background-color:#FFFFFF}

--------------------------------------------------------------------------------

空間名稱和簡介區(qū)域

#header 主體部分{height:89px;background:#3399CC}

#header div.lc 左背景圖{background:url(temp1/hdl.jpg) no-repeat}

#header div.rc 右背景圖{background:url(temp1/hdr.jpg) no-repeat top right}

#header div.tit 空間名稱{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑體}

#header div.tit a.titlink 空間名稱鏈接{color:#FFFFFF;text-decoration:none}

#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}

#header div.desc 空間簡介{top:33px;left:20px;color:#FFFFFF;font-size:13px}

#tabline TAB菜單下方的橫線{top:89px;background-color:#FFFFFF}

#tab TAB菜單主體{top:67px;background:url(temp1/tabbg.gif) repeat-x}

#tab a.on,#tab a.on:link,#tab a.on:visited TAB選中狀態(tài){margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}

#tab span TAB與TAB之間的分割符“|”{color:#FFFFFF;font-size:14px}

#tab a:link TAB未選中狀態(tài){color:#FFFFFF;text-decoration:none;font-size:14px}

#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab2 設(shè)置TAB菜單主體{background:#DAE9F5}

#tab2 span TAB選中狀態(tài){color:#000000;font-size:12px;font-weight:bold}

#tab2 a TAB未選中狀態(tài){font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

--------------------------------------------------------------------------------

內(nèi)容區(qū)域 .stage（TAB菜單與版權(quán)信息之間的區(qū)域）{background:#F3F1F1}

其它區(qū)域（即訪問量等信息）

#comm_info 主體{color:#333333;font-family:Arial;text-align:left}

#comm_info div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#comm_info a 鏈接{color:#3399CC}

--------------------------------------------------------------------------------

頁碼區(qū)域

#page 主體{height:30px;font-size:14px;font-family:Arial;text-align:center}

#page span 當(dāng)前頁碼（不可點擊）{padding:3px;color:#000000;font-size:14px;font-weight:bold}

#page a.pc 上一頁和下一頁{color:#3399CC;font-size:14px;font-weight:bold}

#page a.pc:visited{color:#3399CC}

#page a.pi 頁碼（可點擊）{padding:3px;color:#3399CC;font-size:14px}

#page a.pi:visited{color:#3399CC}

--------------------------------------------------------------------------------

模塊

.mod {margin-bottom:10px}

.modhandle{cursor:move}

.modth 模塊標(biāo)題欄主體{height:24px}

.modhead{padding:4px 4px 0 4px}

.modopt 模塊操作區(qū)（如寫新文章）{padding:4px 4px 0 0}

.modtit 模塊標(biāo)題區(qū)（如文章列表）{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF}

.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline}

.modact 操作文字鏈接（如文章列表）{color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF}

.modbox 模塊內(nèi)容區(qū){padding:10px 10px 0 10px;background-color:#FFFFFF}

.modtl 模塊左上角背景{background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px}

.modtc 模塊中上背景{background:url(temp1/ptitc.gif) repeat-x}

.modtr 模塊右上角背景{background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px}

.modbl 模塊左下角背景{background-color:#FFFFFF;line-height:1px}

.modbc 模塊中下背景{background-color:#FFFFFF;line-height:1px}

.modbr 模塊右下角背景{background-color:#FFFFFF;line-height:1px}

--------------------------------------------------------------------------------

文章區(qū)域

#m_blog div.tit 文章標(biāo)題{font-size:14px;font-weight:bold}

#m_blog div.tit a 文章標(biāo)題鏈接{color:#333333;font-size:14px;font-weight:bold}

#m_blog div.tit a:visited{color:#333333}

#m_blog div.date 文章發(fā)表日期{margin:5px 0 8px 0;color:#666666}

#m_blog div.cnt 文章內(nèi)容{color:#333333;line-height:20px;font-size:14px}

#m_blog div.more{margin:14px 0 16px 0}

#m_blog div.more a 閱讀全文鏈接{color:#3399CC;font-size:14px}

#m_blog div.more a:visited{color:#3399CC}

#m_blog div.opt 文章操作區(qū)（如編輯、評論等）{color:#666666;font-size:12px}

#m_blog div.opt a 文章操作鏈接{color:#3399CC;font-size:12px}

#m_blog div.opt a:visited{color:#3399CC}

#m_blog div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#m_blog div.none 無文章提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}

--------------------------------------------------------------------------------

個人檔案區(qū)域

#m_pro a 鏈接{color:#3399CC}

#m_pro a:visited{color:#3399CC}

#m_pro div.image 個人頭像{text-align:center}

#m_pro div.act 操作區(qū)（如加為好友、發(fā)送消息）{margin-top:10px}

#m_pro div.user 用戶名{margin-top:10px;color:#333333;font-size:12px;font-weight:bold}

#m_pro div.desc 用戶簡介{color:#333333;font-size:12px}

#m_pro div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#m_pro td{color:#333333;line-height:24px;font-size:14px}

--------------------------------------------------------------------------------

相冊區(qū)域

#m_album div.image 照片{text-align:center}

#m_album div.page {color:#666666;font-size:12px;text-align:center}

#m_album div.page a{color:#0000CC;font-size:12px}

#m_album div.page a:visited{color:#0000CC}

--------------------------------------------------------------------------------

友情鏈接區(qū)域

#m_links div.item 子項{color:#333333;font-size:12px}

#m_links div.item a 名稱（鏈接）{color:#3399CC;font-size:12px;text-decoration:none}

#m_links div.item a:visited{color:#3399CC}

#m_links div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

文章分類

#m_artclg div.item 子項{color:#666666;font-size:12px}

#m_artclg div.item a 分類名稱（鏈接）{color:#3399CC;font-size:12px}

#m_artclg div.item a:visited{color:#3399CC}

#m_artclg div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

最新評論區(qū)域

#m_comment div.item 子項{color:#333333;font-size:12px}

#m_comment div.item a 發(fā)表人（鏈接）{color:#3399CC;font-size:12px}

#m_comment div.item a:visited{color:#3399CC}

#m_comment div.item a.cnt 評論摘要（鏈接）{color:#333333;font-size:12px;text-decoration:none}

#m_comment div.item a.cnt:visited{color:#333333;text-decoration:none}

#m_comment div.item a.cnt:hover{color:#333333;text-decoration:underline}

#m_comment div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

相冊列表

#m_albumlist div.note{color:#333333;font-size:14px}

#m_albumlist div.desc 簡介{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px}

#m_albumlist div.none 無照片提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}

#m_albumlist div.line 分界線{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}

#m_albumlist div.tit 照片標(biāo)題{margin:6px 0 7px 0;color:#333333;font-size:14px}

#m_albumlist div.tit a 照片標(biāo)題鏈接{color:#3399CC;font-size:14px}

#m_albumlist div.tit a:visited{color:#3399CC}

#m_albumlist span.count 照片數(shù)量{color:#666666;font-size:12px;font-weight:bold}

#m_albumlist span.size 照片尺寸{color:#999999;font-size:12px;font-family:Arial}

#m_albumlist a.act 操作區(qū)鏈接（如編輯、刪除）{color:#3399CC;font-size:12px}

#m_albumlist a.act:visited{color:#3399CC}

#m_albumlist a.page 頁碼鏈接{color:#0000CC;font-size:14px}

#m_albumlist a.page:visited{color:#0000CC}

#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF}

--------------------------------------------------------------------------------

好友列表

#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px}

#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px}

#m_friend div.user{margin-top:4px;color:#333333;font-size:12px}

#m_friend div.user a 好友名稱（鏈接）{color:#3399CC;font-size:12px}

#m_friend div.user a:visited{color:#3399CC}

#m_friend div.line 分界線{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

設(shè)置訪問統(tǒng)計、模板設(shè)置

#m_setting a 鏈接{color:#3399CC}

#m_setting a:visited{color:#3399CC}

#m_setting 主體{line-height:22px;color:#333333;font-size:14px}

#m_setting img.sel 模板預(yù)覽圖（選中狀態(tài)）{border:4px solid #FFDB7B}

#m_setting img.unsel 模板預(yù)覽圖（未選中狀態(tài)）{border:1px solid #D2D2D2}

#m_setting span.tit 模板標(biāo)題名稱{font-size:14px}

#m_setting span.usr 作者名{color:#666666}

#m_setting div.sel “當(dāng)前模板”文字{padding-top:6px;font-size:14px;font-weight:bold}

#m_setting div.line 分界線{margin-top:20px;line-height:16px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

系統(tǒng)公告

#m_sysinfo a 鏈接{color:#3399CC}

#m_sysinfo a:visited{color:#3399CC}

#m_sysinfo 主體{line-height:22px;color:#333333;font-size:14px}

#m_sysinfo span.new 最新{color:#FF0000;font-size:10px;font-family:Arial}

#m_sysinfo span.date 發(fā)布時間{color:#666666;font-size:14px}

--------------------------------------------------------------------------------

基本選項

#m_setbase 主體{color:#333333;font-size:14px}

#m_setbase td{color:#333333;font-size:14px}

#m_setbase div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

網(wǎng)友評論

#in_comment 主體{width:710px}

#in_comment div.tit 標(biāo)題{margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold}

#in_comment div.user 發(fā)表人名{margin-bottom:6px;color:#333333;font-size:12px}

#in_comment div.user a 發(fā)表人名（鏈接）{color:#3399CC;font-size:12px}

#in_comment div.user a:visited{color:#3399CC}

#in_comment div.user span.date 發(fā)表時間{color:#666666;font-size:12px}

#in_comment div.desc 評論內(nèi)容{color:#333333;font-size:12px}

#in_comment div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#in_send div.tit 發(fā)表評論（標(biāo)題）{margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold}

百度空間使用幫助

簡述css的概念和在網(wǎng)頁設(shè)計中的作用

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。

是一種對web文檔添加樣式的簡單機制，屬于表現(xiàn)層的布局語言。

1.基本語法規(guī)范

分析一個典型CSS的語句：

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

?其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；

?樣式聲明寫在一對大括號"{}"中；

?COLOR和BACKGROUND稱為"屬性"(property)，不同屬性之間用分號";"分隔；

?"#FF0000"和"#FFFFFF"是屬性的值(value)。

2.顏色值

顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子color:#FF0000。如果十六進制值是成對重復(fù)的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重復(fù)就不可以簡寫，例如#FC1A1B必須寫滿六位。

3.定義字體

web標(biāo)準(zhǔn)推薦如下字體定義方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

字體按照所列出的順序選用。如果用戶的計算機含有Lucida Grande字體，文檔將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推，；

?Lucida Grande字體適合Mac OS X；

?Verdana字體適合所有的Windows系統(tǒng)；

?Lucida適合UNIX用戶

?"宋體"適合中文簡體用戶;

如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用;

4.群選擇器

當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔，：

p, td, li { font-size : 12px ; }

5.派生選擇器

可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：

li strong { font-style : italic; font-weight : normal；}

就是給li下面的子元素strong定義一個斜體不加粗的樣式。

6.id選擇器

用CSS布局主要用層"div"來實現(xiàn)，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層

div id="menubar"/div

然后在樣式表里這樣定義：

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。

id選擇器也同樣支持派生，例如：

#menubar p { text-align : right; margin-top : 10px; }

這個方法主要用來定義層和那些比較復(fù)雜，有多個派生的元素。

6.類別選擇器

在CSS里用一個點開頭表示類別選擇器定義，例如：

.14px {color : #f60 ;font-size:14px ;}

在頁面中，用class="類別名"的方法調(diào)用：

span class="14px"14px大小的字體/span

這個方法比較簡單靈活，可以隨時根據(jù)頁面需要新建和刪除。

7.定義鏈接的樣式

CSS中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時、點下鼠標(biāo)時"的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。

如何用css美化表單

解決方法：用普通標(biāo)簽?zāi)M，背景圖設(shè)置在普通標(biāo)簽里面，表單功能還是用input來實現(xiàn)，交互功能得用JavaScript來實現(xiàn)。換句話說，CSS控制普通標(biāo)簽的樣式來美化表單，JavaScript實現(xiàn)表單交互功能。

案例分析：

移動端兼容 - 調(diào)用相冊的按鈕樣式處理

具體情形：input type="file" accept="image/*;capture=camera"或者input type="file" capture="photo"設(shè)背景圖無效。在我們的移動端網(wǎng)頁當(dāng)中，會有上傳照片的操作需求。此時會使用到文件類型的input文本框，但是不同的系統(tǒng)不同的瀏覽器在樣式上均不相同，而且，設(shè)置背景圖也沒有效果。

解決方法：通過設(shè)置opacity為0來進行模擬，背景圖設(shè)置在其他標(biāo)簽里面。換句話說樣式用普通標(biāo)簽?zāi)M，功能用input來實現(xiàn)。

測試效果圖：

《CSS美化表單大集錦》

當(dāng)前名稱：樣式美化css,圖片美化設(shè)計
分享網(wǎng)址：http://sd-ha.com/article36/dsedhsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站建設(shè)、小程序開發(fā)、品牌網(wǎng)站制作、手機網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)