整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          《CSS筆記》-W3C進階樣式(三)

          置表單的樣式

          屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用:

          input[type="text"]

          {

          width:150px;

          display:block;

          margin-bottom:10px;

          background-color:yellow;

          font-family: Verdana, Arial;

          }

          input[type="button"]

          {

          width:120px;

          margin-left:35px;

          display:block;

          font-family: Verdana, Arial;

          }

          如何插入樣式表

          當讀到一個樣式表時,瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種:

          外部樣式表

          當樣式需要應用于很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在(文檔的)頭部:

          <head>

          <link rel="stylesheet" type="text/css" href="mystyle.css" />

          </head>

          瀏覽器會從文件 mystyle.css 中讀到樣式聲明,并根據它來格式文檔。

          外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:

          hr {color: sienna;}

          p {margin-left: 20px;}

          body {background-image: url("images/back40.gif");}

          內部樣式表

          當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:

          <head><style type="text/css">

          hr {color: sienna;}

          p {margin-left: 20px;}

          body {background-image: url("images/back40.gif");}</style></head>

          多重樣式

          如果某些屬性在不同的樣式表中被同樣的選擇器定義,那么屬性值將從更具體的樣式表中被繼承過來。

          例如,外部樣式表擁有針對 h3 選擇器的三個屬性:

          h3 {

          color: red;

          text-align: left;

          font-size: 8pt;

          }

          而內部樣式表擁有針對 h3 選擇器的兩個屬性:

          h3 {

          text-align: right;

          font-size: 20pt;

          }

          假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接,那么 h3 得到的樣式是:

          color: red;

          text-align: right;

          font-size: 20pt;

          即顏色屬性將被繼承于外部樣式表,而文字排列(text-alignment)和字體尺寸(font-size)會被內部樣式表中的規則取代。

          背景色

          可以使用 background-color 屬性為元素設置背景色。這個屬性接受任何合法的顏色值。

          這條規則把元素的背景設置為灰色:

          p {background-color: gray;}

          如果您希望背景色從元素中的文本向外少有延伸,只需增加一些內邊距:

          p {background-color: gray; padding: 20px;}

          背景圖像

          要把圖像放入背景,需要使用 background-image 屬性。background-image 屬性的默認值是 none,表示背景上沒有放置任何圖像。

          如果需要設置一個背景圖像,必須為這個屬性設置一個 URL 值:

          body {background-image: url(/i/eg_bg_04.gif);}

          背景關聯

          如果文檔比較長,那么當文檔向下滾動時,背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時,圖像就會消失。

          您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性,可以聲明圖像相對于可視區是固定的(fixed),因此不會受到滾動的影響:

          body

          {

          background-image:url(/i/eg_bg_02.gif);

          background-repeat:no-repeat; background-attachment:fixed

          }

          background-attachment 屬性的默認值是 scroll,也就是說,在默認的情況下,背景會隨文檔滾動。

          縮進文本

          把 Web 頁面上的段落的第一行縮進,這是一種最常用的文本格式化效果。

          CSS 提供了 text-indent 屬性,該屬性可以方便地實現文本縮進。

          通過使用 text-indent 屬性,所有元素的第一行都可以縮進一個給定的長度,甚至該長度可以是負值。

          這個屬性最常見的用途是將段落的首行縮進,下面的規則會使所有段落的首行縮進 5 em:

          p {text-indent: 5em;}

          水平對齊

          text-align 是一個基本的屬性,它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接,不過第 4 個和第 5 個則略有些復雜

          text-align:center 與 <CENTER>

          您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣,但實際上二者大不相同。

          <CENTER> 不僅影響文本,還會把整個元素居中。text-align 不會控制元素的對齊,而只影響內部內容。元素本身不會從一段移到另一端,只是其中的文本受影響。

          字間隔

          word-spacing 屬性可以改變字(單詞)之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。

          字符轉換

          text-transform 屬性處理文本的大小寫。這個屬性有 4 個值:

          • none

          • uppercase

          • lowercase

          • capitalize

          默認值 none 對文本不做任何改動,將使用源文檔中的原有大小寫。顧名思義,uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后,capitalize 只對每個單詞的首字母大寫。

          作為一個屬性,text-transform 可能無關緊要,不過如果您突然決定把所有 h1 元素變為大寫,這個屬性就很有用。不必單獨地修改所有 h1 元素的內容,只需使用 text-transform 為你完成這個修改:

          h1 {text-transform: uppercase}

          處理空白符

          white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。

          使用 em 來設置字體大小

          如果要避免在 Internet Explorer 中無法調整文本的問題,許多開發者使用 em 單位代替 pixels。

          W3C 推薦使用 em 尺寸單位。

          1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素,那么對于該元素,1em 就等于 16 像素。在設置字體大小時,em 的值會相對于父元素的字體大小改變。

          瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。

          可以使用下面這個公式將像素轉換為 em:pixels/16=em

          (注:16 等于父元素的默認字體大小,假設父元素的 font-size 為 20px,那么公式需改為:pixels/20=em)

          實例

          h1 {font-size:3.75em;} /* 60px/16=3.75em */h2 {font-size:2.5em;} /* 40px/16=2.5em */p {font-size:0.875em;} /* 14px/16=0.875em */

          設置鏈接的樣式

          能夠設置鏈接樣式的 CSS 屬性有很多種(例如 color, font-family, background 等等)。

          鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。

          鏈接的四種狀態:

          • a:link - 普通的、未被訪問的鏈接

          • a:visited - 用戶已訪問的鏈接

          • a:hover - 鼠標指針位于鏈接的上方

          • a:active - 鏈接被點擊的時刻

          實例

          a:link {color:#FF0000;}/* 未被訪問的鏈接 */a:visited {color:#00FF00;}/* 已被訪問的鏈接 */a:hover {color:#FF00FF;}/* 鼠標指針移動到鏈接上 */a:active {color:#0000FF;}/* 正在被點擊的鏈接 */

          當為鏈接的不同狀態設置樣式時,請按照以下次序規則:

          • a:hover 必須位于 a:link 和 a:visited 之后

          • a:active 必須位于 a:hover 之后

          文本修飾

          text-decoration 屬性大多用于去掉鏈接中的下劃線:

          實例

          a:link {text-decoration:none;}

          a:visited {text-decoration:none;}

          a:hover {text-decoration:underline;}

          a:active {text-decoration:underline;}

          CSS 列表屬性允許你放置、改變列表項標志,或者將圖像作為列表項標志。

          要修改用于列表項的標志類型,可以使用屬性 list-style-type:

          ul {list-style-type : square}

          上面的聲明把無序列表中的列表項標志設置為方塊。

          列表項圖像

          有時,常規的標志是不夠的。你可能想對各標志使用一個圖像,這可以利用 list-style-image 屬性做到:

          ul li {list-style-image : url(xxx.gif)}

          只需要簡單地使用一個 url() 值,就可以使用圖像作為標志。

          列表標志位置

          CSS2.1 可以確定標志出現在列表項內容之外還是內容內部。這是利用 list-style-position 完成的。

          簡寫列表樣式

          為簡單起見,可以將以上 3 個列表樣式屬性合并為一個方便的屬性:list-style,就像這樣:

          li {list-style : url(example.gif) square inside}

          list-style 的值可以按任何順序列出,而且這些值都可以忽略。只要提供了一個值,其它的就會填入其默認值。

          CSS 表格屬性可以幫助您極大地改善表格的外觀

          表格邊框

          如需在 CSS 中設置表格邊框,請使用 border 屬性。

          下面的例子為 table、th 以及 td 設置了藍色邊框:

          table, th, td

          {

          border: 1px solid blue;

          }

          表格寬度和高度

          通過 width 和 height 屬性定義表格的寬度和高度。

          表格文本對齊

          text-align 和 vertical-align 屬性設置表格中文本的對齊方式。

          vertical-align 屬性設置垂直對齊方式,比如頂部對齊、底部對齊或居中對齊:

          表格內邊距

          如需控制表格中內容與邊框的距離,請為 td 和 th 元素設置 padding 屬性:

          td

          {

          padding:15px;

          }

          CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。

          CSS 框模型概述

          元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距默認是透明的,因此不會遮擋其后的任何元素。

          提示:背景應用于由內容和內邊距、邊框組成的區域。

          在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。

          假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素,就需要將內容的寬度設置為 70 像素,請看下圖:

          #box {

          width: 70px;

          margin: 10px;

          padding: 5px;

          }

          術語翻譯

          • element : 元素。

          • padding : 內邊距,也有資料將其翻譯為填充。

          • border : 邊框。

          • margin : 外邊距,也有資料將其翻譯為空白或空白邊。

          CSS padding 屬性

          CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值,但不允許使用負值。

          單邊內邊距屬性

          也通過使用下面四個單獨的屬性,分別設置上、右、下、左內邊距:

          • padding-top

          • padding-right

          • padding-bottom

          • padding-left

          定義單邊樣式

          如果您希望為元素框的某一個邊設置邊框樣式,而不是設置所有 4 個邊的邊框樣式,可以使用下面的單邊邊框樣式屬性:

          • border-top-style

          • border-right-style

          • border-bottom-style

          • border-left-style

          因此這兩種方法是等價的:

          p {border-style: solid solid solid none;}

          p {border-style: solid; border-left-style: none;}

          CSS margin 屬性

          設置外邊距的最簡單的方法就是使用 margin 屬性。

          一切皆為框

          div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即“塊框”。與之相反,span 和 strong 等元素稱為“行內元素”,這是因為它們的內容顯示在行中,即“行內框”。

          CSS 定位機制

          CSS 有三種基本的定位機制:普通流、浮動和絕對定位。

          CSS position 屬性

          通過使用 position 屬性,我們可以選擇 4 種不同類型的定位,這會影響元素框生成的方式。

          position 屬性值的含義:

          • static

          • 元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創建一個或多個行框,置于其父元素中。

          • relative

          • 元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。

          • absolute

          • 元素框從文檔流完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。

          • fixed

          • 元素框的表現類似于將 position 設置為 absolute,不過其包含塊是視窗本身

          歡迎關注公眾號(hongji8410)和加入QQ群一起交流(522342554)

          CSS3,你可以創建圓角邊框,添加陰影框,并作為邊界的形象而不使用設計程序,如Photoshop。

          在這里邊您將了解以下的邊框屬性:

          • border-radius

          • box-shadow

          • border-image


          CSS3 圓角

          在CSS2中添加圓角棘手。我們不得不在每個角落使用不同的圖像。

          在CSS3中,很容易創建圓角。

          在CSS3中border-radius屬性被用于創建圓角:

          這是圓角邊框!

          實例

          在div中添加圓角元素:

          div

          {

          border:2px solid;

          border-radius:25px;

          }

          CSS3盒陰影

          CSS3中的box-shadow屬性被用來添加陰影:

          實例

          在div中添加box-shadow屬性

          div

          {

          box-shadow: 10px 10px 5px #888888;

          }


          CSS3邊界圖片

          有了CSS3的border-image屬性,你可以使用圖像創建一個邊框:

          border-image屬性允許你指定一個圖片作為邊框! 用于創建上文邊框的原始圖像:

          在div中使用圖片創建邊框:

          實例

          在div中使用圖片創建邊框

          div

          {

          border-image:url(border.png) 30 30 round;

          -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

          -o-border-image:url(border.png) 30 30 round; /* Opera */

          }


          新邊框屬性

          屬性說明CSS
          border-image設置所有邊框圖像的速記屬性。3
          border-radius一個用于設置所有四個邊框- *-半徑屬性的速記屬性3
          box-shadow附加一個或多個下拉框的陰影3

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖,由JavaScript 接受用戶的交互請求,以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分,它負責控制DOM元素的頁面布局和顏色、大小的屬性。

          在CSS中有一著名的盒子模型理論,可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。

          雖然其十分好用,但是對于很多新手來說,卻很難搞清楚它幾個屬性和內容之間的聯系個區別。

          盒子模型概念

          所有頁面的元素都可以看做一個盒子,占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此,可以通過盒子的邊框和距離等參數來控制內容的位置。

          Div+CSS 盒子模型

          說明:

          1、Margin:中文叫外邊距,主要作用是控制邊框外(Border以外)的區域,外邊距是透明的

          2、Border:中文叫邊框,是圍繞在內邊距(Padding)和內容外的邊框。注意,它不是透明的

          3、Padding:中文叫內邊距,控制內容周圍的區域,內邊距是透明的

          4、Content:內容,盒子的內容,顯示文本和圖像。

          5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。

          6、盒子實際尺寸有可能大于內容尺寸:

          盒子模型的總寬度等于content(寬)+padding(左右)+border(左右)+margin(左右);

          盒子模型的總高度等于content(高)+padding(上下)+border(上下)+margin(上下);

          實例演示--原始樣式

          接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。

          頁面如圖所示:


          原始樣式

          代碼:

          HTML:
          <body>
              <div class="TsetUpper"></div>
              <div class="TsetMiddle"></div>
              <div class="TsetDown"></div>
          </body>
          CSS:
          .TsetUpper{
          	width: 400px;
          	height: 200px;
          	background-color: black;
          	position: relative;
          	margin: auto;
          	text-align: center;
          }
          .TsetMiddle{
          	width: 600px;
          	height: 200px;
          	background-color: red;
          	position: relative;
          	margin: auto;
          }
          .TsetDown{
          	width: 400px;
          	height: 200px;
          	background-color: black;
          	position: relative;
          	margin: auto;
          	text-align: center;
          }

          Border

          元素邊框:我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。

          按如下代碼設置Div(TsetMiddle)的Border(邊框):

          border-style:solid;
          border-width: 10px;
          border-color: aqua;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30+30了,而且可以設置其底色和線條樣式。

          Border

          Margin

          margin 控制周圍的元素區域。margin 沒有背景顏色,是完全透明的。通過margin可以控制元素與四周元素的空隙距離;

          按如下代碼設置Div(TsetMiddle)的margin(外邊距):

          margin: 30px auto;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30(Border)+30(Margin)+30(Border)+30(Margin)了。

          Margin

          Padding

          Padding:當元素的 padding(填充)內邊距被清除時,所釋放的區域將會受到元素背景顏色的填充。

          按如下代碼設置Div(TsetMiddle)的margin(外邊距):

          padding: 30px;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30(Padding)+30(Border)+30(Margin)+30(Padding)+30(Border)+30(Margin)了。

          Padding

          總結

          1、各屬性的值可以用px為單位,也可以用em,百分比等。

          2、可以利用盒子的各種屬性,調整其內容在父容器中的位置。


          主站蜘蛛池模板: 精品无码一区在线观看| 色噜噜狠狠一区二区三区| 免费在线观看一区| 爆乳熟妇一区二区三区霸乳| 久久亚洲一区二区| 日韩a无吗一区二区三区| 伊人久久大香线蕉av一区| 无码喷水一区二区浪潮AV| 亚洲日本va午夜中文字幕一区| 国产一区二区福利久久| 无码少妇A片一区二区三区| 精品黑人一区二区三区| 国产免费一区二区三区| 亚洲AV无码一区二区三区DV| 国产午夜精品一区二区| 国产一区二区免费视频| 国产一区二区三区久久| 国产另类TS人妖一区二区 | 国产一区三区二区中文在线| 亚洲高清成人一区二区三区| 亚洲一区日韩高清中文字幕亚洲 | 国产一区二区精品| 亚洲一区免费观看| 深田咏美AV一区二区三区| 精品一区二区ww| 波多野结衣在线观看一区二区三区 | 国产精品小黄鸭一区二区三区| 成人免费视频一区二区| 中文字幕无码一区二区免费| 久久精品无码一区二区无码 | 免费精品一区二区三区在线观看| 亚洲av乱码中文一区二区三区 | 一区二区高清在线观看| 亚洲日本乱码一区二区在线二产线| 国内自拍视频一区二区三区 | 中文字幕精品一区二区三区视频| 亚洲国产精品一区二区久久hs | 久久国产精品一区| 亚洲丶国产丶欧美一区二区三区 | 日本高清无卡码一区二区久久| 久久亚洲一区二区|