1、使用Dreamweaver等工具來新建
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的南岔網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
2、新建一個空白的記事本，后綴名修改為.css
3、引入，使用link/標(biāo)簽來應(yīng)用你的CSS，具體用法如下
link rel="stylesheet" type="text/css" href="你的CSS文件路徑"/
在制作一個網(wǎng)頁的時候，Css樣式的添加一共有四種方式，一起來看看這四種方式：
一、使用STYLE屬性： 將STYLE屬性直接加在個別的元件標(biāo)簽里。
元件(標(biāo)簽) STYLE="性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定值2; ...}
例如：
TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標(biāo)楷體"; line-height:150%
這種用法的優(yōu)點(diǎn) 是可靈巧應(yīng)用樣式於各標(biāo)簽中，但是缺點(diǎn)則是沒有整篇文件的『統(tǒng)一性』。
二、使用STYLE標(biāo)簽： 將樣式規(guī)則寫在STYLE.../STYLE標(biāo)簽之中。
通常是將整個的 STYLE.../STYLE結(jié)構(gòu)寫在網(wǎng)頁的HEAD /HEAD部份之中。這種用法的優(yōu)點(diǎn)就是在於整篇文件的統(tǒng)一性，只要是有聲明的的元件即會套用該樣式規(guī)則。缺點(diǎn)就是在個別元件的靈活度不足。
三、使用 LINK標(biāo)簽： 將樣式規(guī)則寫在.css的樣式檔案中，再以LINK標(biāo)簽引入。
假設(shè)我們把樣式規(guī)則存成一個example.css的檔案，我們只要在網(wǎng)頁中加入
LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"
即可套用該樣式檔案中所制定好的樣式了。 通常是將LINK標(biāo)簽寫在網(wǎng)頁的head/head部份之中。這種用法的優(yōu)點(diǎn)就是在於可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個樣式檔案即可。缺點(diǎn)也是在個別文件或元件的靈活度不足。
四、使用@import引入： 跟LINK用法很像，但必 放在STYLE.../STYLE 中。
要注意的是，行末的分號是絕對不可少的！這種方式也可以把
比如做一個導(dǎo)航條
首先搭建基本機(jī)構(gòu)：
div id="menu"
ul
lia href="#"首頁/a/li
lia href="#"年表/a/li
lia href="#"作品/a/li
lia href="#"文章/a/li
lia href="#"畫廊/a/li
lia href="#"留言/a/li
lia href="#"地圖/a/li
/ul
/div
這時候看到的一個縱列文字前帶圓點(diǎn)的列表
然后用css進(jìn)行美化：
#menu {
background-color: #6282ac;
height: 35px;
width: 570px;
position: relative;
}
定義菜單的寬，高，顏色及定位方式。
#menu ul {
list-style-type: none;
}
去掉文字下劃線。
#menu li {
float: left;
display: block;
width: 60px;
height: 31px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 2px;
margin-left: 6px;
line-height: 31px;
text-align: center;
background-repeat: repeat-x;
border: 1px solid #FFFFFF;
}
定義“float: left;”使列表項(xiàng)橫向排列，設(shè)置高與行高使鏈接文字垂直居中。
menu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-image: url(../images/b.gif);
display: block;
background-repeat: repeat-x;
}
定義鏈接的字體及背景
#menu a:hover{
background-image: url(../images/a.gif);
display: block;
background-repeat: repeat-x;
}
定義a的偽類實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊時的背景變化
一共有三種 形式存在
第一種為標(biāo)簽樣式，taglib為標(biāo)簽名，后面{}里面加屬性,這種樣式對頁面內(nèi)所有的標(biāo)簽名為taglibname的標(biāo)簽起作用。
第二種為css類樣式，需要在HTML開始標(biāo)簽 后綴 class="name"，name即類名，這類標(biāo)簽對HTML內(nèi)所有后綴同樣name的標(biāo)簽起作用 class="name" 可以設(shè)在多個開始標(biāo)簽后，表示這些標(biāo)簽具有同一類樣式。
第三種為cssID樣式，需要在HTML開始標(biāo)簽后綴 id="id",需要注意的是，ID樣式的話，每一個name都是獨(dú)立且不重復(fù)的，具有唯一性。
希望我的回答對你有幫助
今天小編要跟大家分享的文章是關(guān)于Web前端開發(fā)知識點(diǎn)之CSS的使用方式。本文章小編從與HTML的結(jié)合方式、CSS語法、選擇器以及盒子模型四個方面進(jìn)行講解。下面來和小編一起看一看吧！
一、與HTML的結(jié)合方式
CSS與HTML的結(jié)合方式一共有三種，分別是：外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式。
①外部樣式
當(dāng)樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點(diǎn)的外觀。每個頁面使用標(biāo)簽鏈接到樣式表。標(biāo)簽在文檔的頭部：
_
或者可以像下面這樣在標(biāo)簽import一個樣式表，不過不建議使用。
___
@import"main.css";_
②內(nèi)部樣式
當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
_
___
_r_color:_ienna;}_
③內(nèi)聯(lián)樣式
要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式(style)屬性。
_
Thisisaparagraph
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個元素上應(yīng)用一次時。
二、CSS語法
CSS語法規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的HTML元素。
每條聲明由一個屬性和一個值組成。兩條聲明之間被分號分開。
屬性是您希望設(shè)置的樣式屬性。每個屬性有一個值。屬性和值被冒號分開。
在下面這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。
三、選擇器
CSS的選擇器主要分為兩大類，一類基本選擇器；一類擴(kuò)展選擇器。
①基本選擇器
基本選擇器包括id選擇器，元素選擇器和類選擇器。
id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。例如下面代碼指定id為red的標(biāo)簽中文本為紅色。
#red{color:red;}
元素選擇器可以為相應(yīng)的HTML元素指定特定的樣式。元素選擇器前面沒有任何字符。例如下面代碼指定div標(biāo)簽中文本為紅色。
div{color:red;}
類選擇器可以為標(biāo)有特定class的HTML元素指定特定的樣式。類選擇器以一個點(diǎn)號顯示。例如下面代碼指定class為center的標(biāo)簽中文本居中對齊。
.center{text-align:center}
②擴(kuò)展選擇器
擴(kuò)展選擇器是在基本選擇器的基礎(chǔ)上擴(kuò)展出來的，下面介紹幾種常見的。
*選擇器(*
{})可以為HTML的所有元素指定特定的樣式。例如下面代碼指定HTML頁面中所有文本為紅色。
*{color:red;}
并集選擇器(選擇器1,選擇器2{})可以為多個選擇器指定特定的樣式。例如下面代碼指定div和span兩種標(biāo)簽中文本為紅色。
div,span{color:red;}
子選擇器(選擇器1選擇器2{})可以為選擇器1中的選擇器2指定特定的樣式。例如下面代碼指定div中span標(biāo)簽文本為紅色。
divspan{color:red;}
父選擇器(選擇器1選擇器2{})可以為含有選擇器2的選擇器1指定特定的樣式。例如下面代碼指定含有span的div標(biāo)簽文本為紅色。
divspan{color:red;}
屬性選擇器(元素[屬性="屬性值"])可以為含有該屬性且屬性值等于該值的元素指定特定的樣式。其中，元素和屬性值可以省略。例如下面代碼指定align屬性等于center的div標(biāo)簽文本為紅色。
div[align="center"]{color:red;}
偽類選擇器(元素:狀態(tài){})可以為該元素處于該狀態(tài)時指定特定的樣式。例如下面的代碼指定鼠標(biāo)懸浮在超鏈接上時文本為紅色。
a:hover{color:red;}
四、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box
model"這一術(shù)語是用來設(shè)計(jì)和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型：
Margin(外邊距)-清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框)-圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距)-清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容)-盒子的內(nèi)容，顯示文本和圖像。
默認(rèn)情況下，標(biāo)簽的width和height屬性指的是content(內(nèi)容)的寬和高，我們在設(shè)置邊框和邊距的時候一定要注意。如果想要讓width和height是最終盒子的大小，可以設(shè)置下面的代碼：
box-sizing:border-box;
以上就是小編今天為大家分享的關(guān)于Web前端開發(fā)知識點(diǎn)之CSS的使用方式的文章，希望本篇文章能夠?qū)φ趶氖聎eb前端工作和學(xué)習(xí)的小伙伴們有所幫助，想要了解更多web前端知識記得關(guān)注北大青鳥web培訓(xùn)官網(wǎng)，最后祝愿小伙伴們工作順利，城市一名優(yōu)秀的web前端程序員。
文章來源：原創(chuàng)_緄墓適_
CSS的調(diào)用，按照CSS出現(xiàn)在頁面的不同位置，可以分為3種方法：
元素中直接使用；
從頁面頭部調(diào)用；
采用鏈接的形式調(diào)用。
不同的調(diào)用方法有不同的寫法和優(yōu)先級。下面分別做一下介紹。
一、元素中直接使用
這種調(diào)用方式的寫法如下：
元素名稱 style="屬性:屬性值;"/元素名稱
在樣式中直接使用CSS，語法是使用style標(biāo)簽，在雙引號中，樣式的語法結(jié)構(gòu)和獨(dú)立樣式表中完全相同。例如：
div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"
示例：元素中直接調(diào)用。/div
該樣式中定義了元素寬、高為360、80像素，背景色為灰色，字體大小為14像素。其應(yīng)用到頁面中的顯示如圖1。
二、從頁面頭部調(diào)用
從頁面頭部調(diào)用CSS是將CSS寫在頁面的head元素中，然后在頁面中調(diào)用。其語法結(jié)構(gòu)如下：
style
選擇符{屬性:屬性值;}
/style
頁面上的所有樣式都可以寫在style和/style中。使用這種方式調(diào)用CSS，在頁面中必須有相應(yīng)的調(diào)用代碼。
其中，類選擇符的調(diào)用代碼如下：
元素名稱 class="類選擇符名稱"/元素名稱
ID選擇符的調(diào)用代碼如下：
元素名稱 id="id 類選擇符名稱"/元素名稱
下面我們來用一個示例演示一下。
head
titleCSS調(diào)用方法/title
style
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
/style
/head
body
div class="content"示例：從頁面頭部調(diào)用。/div
/body
該樣式應(yīng)用到頁面的效果如圖2所示。
三、采用鏈接的形式調(diào)用
采用鏈接的形式調(diào)用CSS通常有兩種方法：
使用link元素
使用link元素調(diào)用CSS的語法如下：
link rel="stylesheet" href="css文件路徑" type="text/css"/
其中rel="stylesheet"指這個link和其href之間的關(guān)聯(lián)樣式為樣式表文件。type="text/css"指文件類型是樣式表文本。
使用@import
使用@import調(diào)用和使用link元素調(diào)用的區(qū)別在于，使用@import的調(diào)用方法只能使用在樣式文件中，即只能在調(diào)用的樣式文件，或style元素中才能正常使用
重慶分公司
重慶分公司
