CSS基礎知識點全面解析（轉(zhuǎn)載）

基本

在圖木舒克等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站設計、網(wǎng)站建設、外貿(mào)網(wǎng)站建設 網(wǎng)站設計制作定制網(wǎng)站制作,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,全網(wǎng)整合營銷推廣,外貿(mào)網(wǎng)站制作,圖木舒克網(wǎng)站建設費用合理。

常識與實踐

鏈接方式

基本

最基本的方式就是直接在html文件中指定元素樣式，這種方式不推薦，因為將表現(xiàn)層和結構層混起來了

"style="background-image:url({{user.avatar}})"

內(nèi)部鏈接

要為html直接增加css樣式，需要在元素中增加開始和結束style標記，css規(guī)則放在里面

style

p {

color: gray;

}

/style

css文件外置

另一種方式將css文件外置，如style.css,作為樣式表(stylesheets),然后從html眾創(chuàng)建一個到這個文件的外部鏈接,用元素,用外部樣式表的好處是要修改整個網(wǎng)站的樣式，只要進入這個樣式表，對css進行幾處修改即可。如:

link type="text/css" rel="stylesheet" href="lounge.css"

多樣式表

使用多個樣式表,順序很重要，一個樣式表會覆蓋在它上面鏈接的樣式表中的樣式,有時會有一個樣式表作為頁面的基礎樣式，要修改樣式，鏈接這個樣式表，然后在下面提供自己的樣式表，指定要修改的樣式,如下所示:

link rel="stylesheet" href="corperate.css"http://總公司樣式

link rel="stylesheet" href="beverage-division.css"http://部門對總公司的樣式做了一些補充，甚至可以覆蓋公司的樣式

link rel="stylesheet" href="lounge-seattle.css"http://西雅圖休閑室對樣式表做了自己的調(diào)整

簡寫

css屬性太多，能不能不費吹灰之力就指定這些屬性呢？可以把同一屬性的值結合起來寫成一句,即簡寫。

簡寫格式

padding

padding: 0px 40px 30px 20px;,順序是上右下左,順時針有木有,如果都相同可以用padding: 20px;

padding-top: 0px;

padding-right: 40px;

padding-bottom:30px;

padding-left: 20px;

margin

上面的padding格式同樣對margin也適用,還有另一種方法,如果上下一樣，左右一致,可以這樣寫:margin: 0px 20px,前面指定上下，后面指定左右。

border

邊框?qū)傩院唽?border: thin solid #007e73;,可以用你喜歡的任何順序。

background

背景簡寫 background: white url(images/cocktail.gif) repeat-x;，同樣順序隨便

字體

字體簡寫的格式稍微復雜一些:

font : font-style font-variant font-weight font-size/line-height font-family

選擇

子孫選擇器

父元素和子孫元素名之間有一個空格,子孫選擇器會選擇所有子孫，包括這個元素中嵌套的所有,不管嵌套多深,例如

color: black;

}

直接孩子

如果要選擇直接的孩子,用

color: black;

}

復雜選擇

更復雜的選擇,方法還是一樣

color: blue;

}

規(guī)則添加

類

當我們用選擇器選擇元素使用一個規(guī)則時,會對所有該元素應用這個樣式，所以如何單獨地選擇這些元素呢?這里就需要類class,class可以定義一類元素，對屬于該類的所有元素應用樣式.要將一個元素加入一個類，只需要增加屬性”class”,并提供類名,如”greentea”:

p class="greentea"

...

/p

類元素選擇器

先選擇這個類中的元素,再用”.”指定一個類,最后是類名,如:

p.greentea {

color: green;

}

添加類元素

如果想對所有blockquote也做同樣的處理，可以:

blockquote.greentea,p.greentea {

color: green;

}

blockquote class = "greentea"

類選擇器

如果想把h1,h2,h3,p和blockquote都增加到greentea呢？要對類中的所有元素都用同一樣式可以用:

.greentea{

color: green;

}

/ 省略所有元素名,只有一個點,則會應用到所有成員 /

多類元素

元素可以有多個類,例如:

p class="greentea raspberry blueberry"

特定元素選擇器

如果多個選擇器都選擇了一個元素呢？例如上面的3個類都與p元素匹配，并且都定義了color屬性，那么那個會勝出?

id

id的作用

id屬性用來唯一地命名元素,通常你想對多個元素重用某些樣式，才能真正發(fā)揮類的作用。但是如果只有一個元素需要樣式，或者頁面上只有一個元素，那就應該使用id,每個元素只能有一個id，頁面中只能有一個元素擁有特定id,一個元素有一個id，同時可以屬于一個或多個類,id中不允許出現(xiàn)空格或其他特殊字符,如

p id="footer".../p

選擇元素

用id選擇一個元素,需要在id前面使用一個#字符(類是[.]),id選擇器只與頁面中的一個元素匹配

color: red;

}//選擇id為footer的任意元素

p#footer{

color: red;

}//選擇id為footer的p元素

實踐建議

繼承

樣式繼承

層疊

媒體查詢

link媒體查詢

你可能想針對將要顯示頁面的設備調(diào)整頁面的樣式，可以用media屬性,在link元素中增加這個屬性.如

link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"

link rel="stylesheet" href="lounge-print.css" media="print"

css媒體查詢

可以直接在css中增加媒體查詢,使用@media規(guī)則,把對所有媒體類型都通用的規(guī)則放在@media規(guī)則下面,例如

@media screen and (min-device-width: 481px){//當設備屏幕寬度大于480px時使用

margin-right: 250px;

}

}

@media screen and (max-device-width: 480px){//當設備屏幕小于等于480px時使用

margin-right: 30px;

}

}

@media print { // 如果要打印頁面，使用該規(guī)則

body {

font-family: Times, "Times New Roman", serif;

}

}

實踐建議

屬性

盒模型

盒模型是css看待元素的一種方式，css將每個元素看作由一個盒子表示,每個盒子由一個內(nèi)容區(qū)以及可選的內(nèi)邊距，邊框和外邊距組成。由內(nèi)而外分別是:

border 邊框

color 顏色

文本元素的字體顏色

body{

background-color: rgb(80%, 40% , 0%)//橙色

}

還可以指定0-255之間的一個數(shù)值,例如:

body{

background-color: rgb(204, 102, 0)//和上面顏色一致,255*80% = 204...

}

font-family 字體

大多數(shù)計算機上通常只安裝了部分字體,所以選擇字體時要當心,通常指定的font-family包含一個候選字體列表,他們都來自同一個字體系列,候選字體用逗號分隔,大小寫字母必須一致,最后總是放一個通用的字體系列名,如果一個字體名中包含多個單詞,比如Courier New，如何指定？用引號,”Courier New”,如:

body{

font-family: Verdana, Geneva, Arial, sans-serif; 一一首選字體呈降序

}

字體系列

每個font-family包含一組有共同特征的字體。共有5個字體系列:

body { font-size : small; }

h1 { font-size : 150%; }

h2 { font-size : 120%; }

注意老版IE不支持用像素指定的文本縮放

瀏覽器默認字體大小

其他屬性

left 指定一個元素的左邊所在位置

top 控制一個元素頂部的位置

background-image 在元素后面放置一個圖像,如

background-image: url(images/background.gif);

//用url括起來,注意沒有引號

background-repeat 背景圖像是否重復

line-height: 1;//代表elixirs中的所有元素的行間距為其自己字體大小的1倍

}

width: 200px;

float: right;

}

background-color: #675c47;

color: #efe5d0;

text-align: center;

padding: 15px;

margin: 10px;

font-size: 90%;

clear: right;

}

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

}

那么頁面的寬度將被限制為800px，無論瀏覽器寬度如何變化都不會移動,但這會導致瀏覽器很寬時，右邊有很多空白空間

凝膠布局 Jello

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

margin-left: auto;

margin-right: auto;

}

絕對定位

position: absolute;

top: 100px;

right: 200px;

width: 280px;

}

display: table;

border-spacing: 10px;//于是不再需要div中的外邊距

}

display: table-row;

}

display: table-cell;

background: #efe5d0 url(images/background.gif) top left;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;//確保表格兩個單元格中的所有內(nèi)容相對于單元格上邊對齊，默認為中間對齊,可以設置為top,middle,bottom

}

display: table-cell;

background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;

}

css要怎么學

CSS可以說是一門技術，但是他更是一門藝術

我一直在做MIS，有時候也做點頁面，這個時候用點CSS，我發(fā)現(xiàn)，如果要我照著別人的樣式做，比如用戶用VISIO畫好了，我可以做出來，但是，要我憑空想一個效果，并且用CSS做好，真的很難。

如果你是新手，建議你先從CSS語法學起，去書店買本CSS的書，很多的，不過要買專一點的，很多書都是什么js+html+css，這樣的不適合你

我記得有本書就叫DIV+CSS，很不錯的。

等你掌握了大多數(shù)標簽的使用后，就能夠做一些效果了，然后就靠的是藝術了。

另外，CSS標簽有點多，建議你每天學一個模塊的，比如今天學字體，明天學文本，后天學背景，然后要多練習，每個標簽都有很多屬性值的，要每個都玩下，這樣以后能夠靈活運用，因為我不是專業(yè)做CSS或者前臺的，所以我的CSS也只是略懂，但是我也是這么學過來的。

網(wǎng)上有本CSS2中文手冊， 蘇沈小雨寫的，非常適合學會之后用來查詢。

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)

十、外部樣式表

外部樣式表是把各種樣式單獨存在一個文件里，供其他多個網(wǎng)頁調(diào)用，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“l(fā)x10.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內(nèi)容；

2、外部樣式表

1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

2）在里面輸入下面的內(nèi)容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注釋，注明作者版權用途等，根據(jù)自己的需要，

下面的內(nèi)容跟內(nèi)部樣式表相同，各個標簽和它的樣式，保存一下文件；

4）回到 lx10.html 文檔中，在 head 區(qū)內(nèi)加上下面一行外部引用標識；

5）然后在 body 區(qū)內(nèi)，輸入下面的內(nèi)容；

1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

6）保存一下文件，回到自己文件夾中，打開 lx10 網(wǎng)頁，看一下效果；

7）在多個網(wǎng)頁具有相同樣式時，使用外部樣式表可以節(jié)省空間和減小網(wǎng)頁大?。?/p>

本節(jié)學習了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續(xù)學習本站的其他課程！

本教程由86團學校TeliuTe制作

（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網(wǎng)）

CSS標簽大全(一)

字體屬性：(font)

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位：PX、PD、EM

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性：(background)

色彩background-color: #FFFFFF;

圖片background-image: url();

重復background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動)

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;

區(qū)塊屬性： (Block)

字間距l(xiāng)etter-spacing: normal; 數(shù)值

對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進text-indent: 數(shù)值px;

垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數(shù)值

空格white-space: pre;(保留) nowrap;(不換行)

顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題)

方框?qū)傩裕?Box)

width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左

邊框?qū)傩裕?(Border)

border-style: dotted(點線); dashed(虛線); solid(實線); double(雙線); groove(槽線); ridge;(脊狀) inset;(凹陷) outset;

border-wid

th:; 邊框?qū)挾?/p>

border-color:#;

簡寫方法border：width style color;

列表屬性： (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css屬性代碼大全

一 CSS文字屬性：

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

text-decoration:line-through; /*加刪除線*/

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白*/

三、CSS符號屬性：

list-style-type:none; /*不編號*/

list-st

yle-type:decimal; /*阿拉伯數(shù)字*/

list-style-type:lower-roman; /*小寫羅馬數(shù)字*/

list-style-type:upper-roman; /*大寫羅馬數(shù)字*/

list-style-type:lower-alpha; /*小寫英文字母*/

list-style-type:upper-alpha; /*大寫英文字母*/

list-style-type:disc; /*實心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實心方形符號*/

list-style-image:url(/dot.gif); /*圖片式符號*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*縮進*/

四、CSS背景樣式：

background-color:#F5E2EC; /*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重復排列-網(wǎng)頁默認*/

background-repeat : no-repeat; /*不重復排列*/

background-repeat : repeat-x; /*在x軸重復排列*/

background-repeat : repeat-y; /*在y軸重復排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*鼠標轉(zhuǎn)到鏈接*/

鼠標光標樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}

六、CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc;

/*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:

border-top-color : #369 /*設置上框線top顏色*/

border-top-width :1px /*設置上框線top寬度*/

border-top-style : solid/*設置上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內(nèi)凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運用：

文字方塊

按鈕

復選框

選擇鈕

多行文字方塊

下拉式菜單 選項1選項2

八、CSS邊界樣式：

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

CSS 屬性： 字體樣式(Font Style)

序號 中文說明 標記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數(shù)值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數(shù)值|inherit|normal;}

9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}

10 單詞間距 {word-spacing:數(shù)值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉(zhuǎn)換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號 中文說明 標記語法

1

行 間 距 {line-height:數(shù)值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數(shù)值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號 中文說明 標記語法

1 背景顏色 {background-color:數(shù)值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

框架樣式(Box Style)

序號 中文說明 標記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補 白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數(shù)值

4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊 框 {border:border-width border-style color}

上 邊 框 {border-top:border-top-width border-style color}

右 邊 框 {border-right:border-right-width border-style color}

下 邊 框 {border-bottom:border-bottom-width border-style color}

左 邊 框 {border-left:border-left-width border-style color}

7 寬 度 {width:長度|百分比| auto}

8 高 度 {height:數(shù)值|auto}

9 漂 浮 {float:left|right|none}

10 清 除 {clear:none|left|right|both}

分類列表

序號 中文說明 標記語法

1 控制顯示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制換行的。使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認情況，英文單詞不被拆開。break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。為了解決長串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（ie下也是）。目前主要的問題存在于 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。即英文單詞應不應該被斷開那？那問題很明顯了，顯然不應該被斷開了。對于長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS樣式表代碼布局基礎教程—課程9：鏈接樣式

九、鏈接樣式

使用偽類可以設置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－打開”命令，打開自己文件夾里的lx7.html

3）再點菜單“文件－另存為”命令，保存文件名為 “l(fā)x9.html”

2、設置偽類

1）在 head 區(qū)內(nèi)，輸入內(nèi)部樣式表，設定各個 的錨標記樣式，如下；

2）第一個 a 設定全局錨點的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來是錨點 a 的成員：

link 是鏈接，設定頁面中的鏈接樣式，顏色藍色，不帶下劃線，

visted 是訪問過的鏈接，設定樣式為栗色、不帶下劃線，

active 是按下鼠標時的鏈接，設定顏色為綠色、無下劃線，

hover 是鼠標移過來懸停，設定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個成員的后面；

3）保存一下文件，回到自己的文件夾中，打開 lx9 網(wǎng)頁，試著用鼠標點擊、拖動鏈接，看一下效果；

本節(jié)學習了設置鏈接樣式的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；

CSS樣式表代碼布局基礎教程—課程8：內(nèi)部樣式表(一)

八、內(nèi)部樣式表

內(nèi)部樣式表放在網(wǎng)頁的...區(qū)內(nèi)，集中在一起方便管理，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內(nèi)容；

2、內(nèi)部樣式表

1）對系統(tǒng)標簽使用樣式，這會影響所有的這種標簽，在 head 區(qū)輸入下面的代碼；

2）第一行是樣式表開始，最后是樣式表結束， 是注釋標簽，

首先是對 body 標簽設置樣式，這樣凡是在 body 區(qū)里的內(nèi)容，都會使用這個樣式，設置背景色和文字大小

然后對 span 標簽設置樣式，設置內(nèi)容的顏色，以后凡是用到 span 的地方，都使用這個顏色；

3）接著在 body 區(qū)里輸入下面的內(nèi)容；

1）對系統(tǒng)標簽使用樣式，這會影響所有的這種標簽，在 head 區(qū)輸入下面的代碼；

4）保存一下文件，回到自己的文件夾里，打開 lx8 網(wǎng)頁，看一下效果；

5）自定義樣式選擇符，除了系統(tǒng)的標簽外，也可以自己定義需要的樣式標記，在 head 的.樣式表里加入下面的代碼；

.myblue {

color:blue;

前面的點，表示這是一個通用的樣式，可以重復使用，如果是 #號，表示是一個標識符，是專用唯一的 id，myblue 是自定義的樣式名稱；

6）在 body 區(qū)里加入下面的代碼，加在上一行的前面，再加上

標簽分成兩段；

7）這兒使用的是 span，里面的 class 套用的是 myblue 樣式，替換了前面設的樣式，

保存一下文件，到瀏覽器中看看效果；

本節(jié)學習了使用內(nèi)部樣式表的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；

CSS樣式表代碼布局基礎教程—課程7：ul列表(一)

七、ul 列表

對于排列有序的條目，可以使用列表來實現(xiàn)，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內(nèi)容；

2、使用列表（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網(wǎng)）

1）在后面接著輸入下面的代碼；

第一課

第二課

第三課

2）前面的

建立一個列表，里面的各個

是列表項，各個列表項排列對齊縮進，前面有一個圓點列表符號，

保存一下文件，到自己文件夾里，打開 lx7 網(wǎng)頁，看看列表的效果，這兒加了 超級鏈接；

3）如果要去掉前面的圓點，可以在 ul 的樣式里設定，前面的縮進也可以設定內(nèi)邊距為 0，輸入下面的代碼；

第一課

第二課

第三課

4）保存一下，再到瀏覽器里看一下，三個列表都排到了左邊對齊；

5）如果要排列成橫向水平的菜單樣式，可以在每個列表項里加上 float 屬性，防止重疊再設定一個寬度，代碼如下；

6）保存一下，再到瀏覽器里看一下，三個列表項都水平排列了；

本節(jié)學習了列表的基本使用方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；

CSS樣式表代碼布局基礎教程—課程6：div布局(一)

六、div 布局

默認 div 占據(jù)一行，第二個 div 到下一行去，怎樣用 div 進行分欄布局，我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－打開”命令，打開上次的 lx5 網(wǎng)頁，再點“文件－另存為”，以“l(fā)x6.html”為文件名，保存到自己的文件夾；

3）按照兩列并排來進行布局；

2、定位布局

1）在下面加一個

標簽，作為主框架，在標簽里加入下面的樣式；

2）前面的 id 是這個 div 的標識符，用來標記這個 div 容器，

在里面的樣式里設置了顏色、邊框、內(nèi)邊距，

設定了固定寬度 604，高度 202，這個可以計算出來，根據(jù)下面兩列的寬度再加上內(nèi)邊距；

3）修改里面的古詩的 div 樣式，加上背景色、去掉內(nèi)外邊距，最后加上一個左浮動 float:left

4）在這個后面，再加上另一個 div，樣式相同，里面輸入另一首古詩 ；

5）這兒的 float:left; 讓這個 div 框，跟上一個框并排左對齊，而不是到下一行去，

最后再加一個標簽，結束最外面的大框架；

6）保存一下文件，回到自己文件夾里，打開 lx6 網(wǎng)頁看看效果；

本節(jié)學習了使用 div 布局的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；

;

css的基本語法

css的基本語法

cascading stylesheet(級聯(lián)樣式表)。為網(wǎng)頁提供外觀（也就是，網(wǎng)頁的表現(xiàn)形式）。將網(wǎng)頁的外觀寫在一個css文件里，方便頁面代碼的維護（將表現(xiàn)與數(shù)據(jù)分離）。為方便大家學習css，我為大家分享css的基本語法如下：

css的基本語法

選擇器{

屬性1:屬性值1;

屬性n:屬性值n;

符合選擇器要求的標記，會添加對應的樣式。

Chrome瀏覽器為SVG和CSS添加GPU加速功能

互聯(lián)網(wǎng)有消息透露，谷歌正在為Chrome瀏覽器增加新的GPU加速功能。Chrome18瀏覽器將內(nèi)建開關選項，讓消費者選擇使用GPU硬件加速基于矢量的SVG圖形和CSS過濾器，讓Chrome瀏覽器在未來網(wǎng)頁顯示上獲得突破性速度，并且達成驚人的視覺效果。

Chrome瀏覽器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系統(tǒng)，但目前這個功能仍然主要是實驗性質(zhì)，因為只有幾個少數(shù)網(wǎng)站部署了SVG和CSSGPU加速。

但也有信息表示，tomshardware測試發(fā)現(xiàn)Chrome這項功能在顯示目前網(wǎng)頁方面，顯示速度并沒有出現(xiàn)任何顯著增加，在WebVizHTML5基準測試當中出現(xiàn)了不穩(wěn)定和崩潰問題。

評論表示，雖然SVG和CSSGPU加速還有待完善，但是Mozilla火狐、微軟IE和其他版本瀏覽器之間的競爭，肯定會推動這種技術快速發(fā)展和完善。

設置容器中的內(nèi)容垂直居中css代碼

如實例1設置網(wǎng)頁整體居中的代碼中內(nèi)容是居容器的頂部的，而在表格布局時默認是垂直居中的，當我們需要垂直居中的時候該怎么辦呢？別害怕，跟我來，也是比較簡單的，只用設置容器內(nèi)的行高就行了。

line-height:500px;

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

head

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/

title標準之路;/title

style

#layout{width:778px;margin:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;}

/style

/head

bodypid="layout"標準之路 /p

/body

/html

提示：可以先修改部分代碼后再運行

這是一種方法，另外和種方法就是設置的`它內(nèi)邊距padding了，自己可以試試喲～～

CSS對不同瀏覽器的兼容性解決辦法

CSS 對不同瀏覽器的兼容性解決辦法由于CSS 在不同瀏覽器中存在兼容性問題，所以在使用 p+CSS 布局中，可能導致相同的內(nèi)容在不同瀏覽器中出現(xiàn)不同的顯示效果，為了解決這些方面的問題，以下針對CSS 某些屬性的用法提出相應的一些解決辦法。 1、頁面居中問題在IE 瀏覽器下，可以通過定義CSS 樣式body {text- align: center;}來實現(xiàn)頁面居中，但在FireFox（以下簡寫為FF）瀏覽器下此屬性就失效了。解決辦法：使用"margin- left: auto; margin- right : auto; " 、padding 屬性在不同瀏覽器的顯示問題當給p 設置padding 屬性后，在FF 瀏覽器中會導致 width 和height 增加(p 的實際寬度=p 寬+Padding), 但在 IE 瀏覽器中width 和height 不會增加，這就導致相同的內(nèi)容在不同瀏覽器中出現(xiàn)不同的顯示效果。解決辦法：給p 設定IE、FF 兩個寬度，在IE 的寬度前加上IE 特有標記" * " 號。例如： #pwidth{ padding:5px; width:100px; *width:110px; } 3、奇怪的間隙問題有的時候我們明明設好了高度，可在IE6 上卻看見一些奇怪的間隙。解決辦法：試試在有空隙的p 上加上"font- size:0px;" 4、關于手形光標要將頁面內(nèi)容的光標顯示為手形，通常的做法是使CSS 屬性cursor: hand; 但這于做法只適用于IE. 解決辦法：cursor: pointer; 5、浮動在IE6 產(chǎn)生雙倍距離問題例如： #box{ float:left; width:100px; margin:0 0 0 100px; } 這種情況之下IE6 會產(chǎn)生200px 的距離。解決辦法：在以上屬性的基礎上，加上display:inline，使浮動忽略。6、UL 和FORM標簽的padding 與margin ul 標簽在FF 中默認是有padding 值的, 而在IE 中只有 margin 默認有值。FORM標簽在IE 中,將會自動margin 一些邊距,而在FF 中margin 則是0；解決辦法：css 中首先都使用這樣的樣式ul,form{margin:0; padding:0;}。 7、截字省略號 .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 這個CSS 是定義當內(nèi)容溢出寬度后會自行的截掉超出部分的文字，并以省略號結尾，但注意Firefox 并不支持。

p+CSS 網(wǎng)頁布局的分類

p+CSS 網(wǎng)頁布局的分類1、一列固定寬度一列布局是所有布局的基礎，也是最簡單的布局方式，用 p+CSS 布局的代碼如下： XHTML 代碼： 一列固定寬度CSS 代碼： #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 2、一列自適應寬度自適應的布局能夠根據(jù)瀏覽器窗口的大小自動改變其寬度和高度值，是網(wǎng)頁設計中一種非常靈活的布局形式，用 p+CSS 布局的代碼如下： XHTML 代碼： 一列自適應寬度CSS 代碼： #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 3、一列固定寬度居中頁面整體居中是網(wǎng)頁布局中最常見到形式，在傳統(tǒng)的表格布局中，使用TABLE 的align="center" 屬性來實現(xiàn)，在p+CSS 布局中采用如下代碼來實現(xiàn)：XHTML 代碼： 一列自適應寬度CSS 代碼： p+CSS 網(wǎng)頁布局方法探析。如今的網(wǎng)頁設計考慮得更多的是搜索引擎以及給用戶帶來更多的便利，傳統(tǒng)的TABLE 網(wǎng)頁布局由于其龐大的HTML 代碼，使得其在搜索引擎方面顯得有些無能為力，而用p+CSS 進行網(wǎng)頁布局具有代碼精簡的優(yōu)點使得其在這方面又體現(xiàn)出更多的優(yōu)勢。但是又由于CSS 對不同瀏覽器存在兼容性問題，所以對于初學者來說，在使用p+CSS 進行網(wǎng)頁布局過程中可能會遇到各種問題，本文就給大家探討幾點p+CSS 布局的技巧。4、二列固定寬度在有一列固定寬度布局的基礎上，實現(xiàn)二列固定寬度也就很簡單了，用p+CSS 布局的代碼如下：XHTML 代碼： 左側右側CSS 代碼： #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 5、二列固定寬度居中從一列固定寬度居中的布局方法中，我們就不難完成二列固定寬度居中了，可以使用一個居中的p 作為容器，將二列分欄的p 放置在容器中，從而就實現(xiàn)二列的居中顯示。 p+CSS 的代碼如下： XHTML 代碼： 左側右側CSS 代碼： #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 這里僅列舉了一列、二列的布局方式，實際上三列、四列等多列的布局方式也和二列的布局方式的實現(xiàn)方法是一樣的。事實上不管多么復雜的頁面設計，在p+CSS 網(wǎng)頁布局中，均是以p 為基礎，通過一列、二列、三列這些基礎的布局方式的相互組合與嵌套來實現(xiàn)復雜的布局。

p+CSS網(wǎng)頁布局技巧：設置網(wǎng)頁整體居中的css代碼

以前用表格布局時設置網(wǎng)頁居中非常方便，把表格對齊方式設置為居中就行了，就這么簡單，現(xiàn)在呢，用p+CSS樣式表控制，好像不是那么容易了，其實也很簡單，只不過方式不同而已。

style

#layout { width:778px; margin:0 auto; text-align:center;}

/style

p id="layout"標準之路;/p

請看這段代碼，寬度為適合800×600分辨率瀏覽器的寬度，margin:0 auto; 這句代碼就是讓居中了，意思是外邊距上下設置為0，左右設為自動。這樣它就居中了。

那么可能你要問了，text-align:center;為什么還要讓內(nèi)容居中呢？呵呵，別著急，這句是為了適應IE6以下版本的瀏覽器而加的，IE6以下對margin:0 auto;不能解析為居中，所以用這種方式來補救，以下在設計內(nèi)容時再用 text-align:left;就可以了。

注：margin和padding的值的順序為順時針上右下左，如margin:1px 2px 3px 4px;還可以縮寫為上下、左右，如本例，如果為margin:0px;則是各邊都為0

提示：可以先修改部分代碼后再運行

;

網(wǎng)頁題目：css樣式基礎學習,css樣式的使用
URL網(wǎng)址：http://jinyejixie.com/article18/dssscgp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站導航、網(wǎng)站收錄、網(wǎng)站建設、商城網(wǎng)站、全網(wǎng)營銷推廣

廣告

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