国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

CSS樣式表代碼布局基礎(chǔ)教程

時間:2024-10-20 07:18:03 CSS 我要投稿
  • 相關(guān)推薦

CSS樣式表代碼布局基礎(chǔ)教程

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

  十、外部樣式表

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

  1、文本編輯器

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

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

  3)按照基礎(chǔ)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)第一行 /* ... */ 是注釋,注明作者版權(quán)用途等,根據(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)頁大小;

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

  本教程由86團學(xué)校TeliuTe制作 http://teliute.laxjyj.com

 。ㄓ嬎銠C基礎(chǔ)知識,電腦知識入門學(xué)習(xí),請到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();

  重復(fù)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%; /*設(shè)置行高*/

  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; /*阿拉伯?dāng)?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; /*重復(fù)排列-網(wǎng)頁默認*/

  background-repeat : no-repeat; /*不重復(fù)排列*/

  background-repeat : repeat-x; /*在x軸重復(fù)排列*/

  background-repeat : repeat-y; /*在y軸重復(fù)排列*/

  指定背景位置

  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 /*設(shè)置上框線top顏色*/

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

  border-top-style : solid/*設(shè)置上框線top樣式*/

  其他框線樣式

  solid /*實線框*/

  dotted /*虛線框*/

  double /*雙線框*/

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

  ridge /*立體浮雕框*/

  inset /*凹框*/

  outset /*凸框*/

  七、CSS表單運用:

  文字方塊

  按鈕

  復(fù)選框

  選擇鈕

  多行文字方塊

  下拉式菜單 選項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 字體風(fēng)格 {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 背景重復(fù) {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:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}

  框架樣式(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 邊框風(fēng)格 {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;。但是,此方式會導(dǎo)致,普通的英文語句中的單詞會被斷開(ie下也是)。目前主要的問題存在于 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。即英文單詞應(yīng)不應(yīng)該被斷開那?那問題很明顯了,顯然不應(yīng)該被斷開了。對于長串英文,就是惡意的東西,自然不用去管了。但是,也要想些辦法,不讓它把容器撐大。用:overflow:auto; ie下,長串會自動折行。ff下,長串會被遮蓋。所以,綜上,最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

  CSS樣式表代碼布局基礎(chǔ)教程—課程9:鏈接樣式

  九、鏈接樣式

  使用偽類可以設(shè)置鏈接的樣式,比如改變顏色、去掉下劃線等,下面我們來看一個練習(xí);

  1、文本編輯器

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

  2)點菜單“文件-打開”命令,打開自己文件夾里的lx7.html

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

  2、設(shè)置偽類

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

  2)第一個 a 設(shè)定全局錨點的樣式,用塊顯示、寬度是50像素、背景色是淺綠色,接下來是錨點 a 的成員:

  link 是鏈接,設(shè)定頁面中的鏈接樣式,顏色藍色,不帶下劃線,

  visted 是訪問過的鏈接,設(shè)定樣式為栗色、不帶下劃線,

  active 是按下鼠標時的鏈接,設(shè)定顏色為綠色、無下劃線,

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

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

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

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

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

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

  1、文本編輯器

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

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

  3)按照基礎(chǔ)02課的方法,輸入、和的內(nèi)容;

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

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

  2)第一行是樣式表開始,最后是樣式表結(jié)束, 是注釋標簽,

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

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

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

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

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

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

  .myblue {

  color:blue;

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

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

  標簽分成兩段;

  7)這兒使用的是 span,里面的 class 套用的是 myblue 樣式,替換了前面設(shè)的樣式,

  保存一下文件,到瀏覽器中看看效果;

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

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

  七、ul 列表

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

  1、文本編輯器

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

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

  3)按照基礎(chǔ)02課的方法,輸入、和的內(nèi)容;

  2、使用列表(計算機基礎(chǔ)知識,電腦知識入門學(xué)習(xí),請到http://電腦知識網(wǎng))

  1)在后面接著輸入下面的代碼;

  第一課

  第二課

  第三課

  2)前面的

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

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

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

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

  第一課

  第二課

  第三課

  4)保存一下,再到瀏覽器里看一下,三個列表都排到了左邊對齊;

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

  6)保存一下,再到瀏覽器里看一下,三個列表項都水平排列了;

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

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

  六、div 布局

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

  1、文本編輯器

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

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

  3)按照兩列并排來進行布局;

  2、定位布局

  1)在下面加一個

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

  2)前面的 id 是這個 div 的`標識符,用來標記這個 div 容器,

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

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

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

  4)在這個后面,再加上另一個 div,樣式相同,里面輸入另一首古詩 ;

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

  最后再加一個標簽,結(jié)束最外面的大框架;

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

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

【CSS樣式表代碼布局基礎(chǔ)教程】相關(guān)文章:

CSS-層疊樣式表基礎(chǔ)教程08-10

CSS基礎(chǔ)教程之背景圖片07-31

css網(wǎng)頁布局用Margin還是用Padding07-21

網(wǎng)頁程序設(shè)計之分享幾個css小眾代碼08-09

CSS最核心的概念03-10

css屬性定位教程07-23

CSS入門教程01-25

關(guān)于ps的基礎(chǔ)教程07-05

聲樂的入門基礎(chǔ)教程05-18

過濾HTML代碼08-29