整合營銷服務商

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

          免費咨詢熱線:

          Web前端入門新人必看,怎樣使用CSS修改HTML的

          Web前端入門新人必看,怎樣使用CSS修改HTML的樣式

          、CSS的起源

          當web開發還是一項新技術的時候,無論定義網頁內容還是定義網頁樣式,都是使用的HTML語言,HTML的內容和樣式沒有區分開,如古老的HTML樣式:

          <H3 COLOR=RED><CENTER>樣式</CENTER></H3>
          

          其中color表示顏色,center讓文字居中,不是目前規范的書寫形式,而且舊的HTML標簽都是大寫的,web開發人員還需要來回切換大小寫,所以很多人認識到了這種開發方式并不理想。

          Web開發人員想開發一種新的語言,把表示樣式的代碼從HTML中分離出來,并且創建一種規則來定義HTML標簽要顯示成什么樣子,這門語言叫做CSS,CSS是用來描述HTML標簽應該如何顯示的一個代碼。如:

          <h3>樣式</h3> 
          

          用CSS可以讓h3標簽顯示成綠色,讓h3字體在大一點,讓h3有一個下劃線,可以統一字體的顯示樣式等。

          CSS樣式

          二、CSS的工作方式

          CSS的全稱叫做 Cascading Style Sheets 級聯樣式表,CSS的工作方式依賴于"選擇器"可以選擇HTML標簽,并且修改這些標簽的樣子。

          選擇器的類型有:

          1、類型選擇器:不帶尖括號的標簽名,最簡單的選擇器

          類型選擇器

          定義了一個P標簽,如果想在CSS中選擇這個標簽,首先寫上字母P,然后選擇要定的屬性如text-decoration,并設置這個屬性的屬性值為underline下劃線,在瀏覽器中這個段落就會顯示下劃線。

          類型選擇器

          使用選擇器的時候我們必須要遵守選擇器的特殊語法規則:

          選擇器名字后面是一個開始的大括號,屬性和屬性值中間是冒號,屬性值后面是分號,這里面任何一部分都不能丟掉,否則CSS無法正常工作,并且要注意標點符號全部是英文半角的,最后在所有的屬性列表后面是一個結束的大括號,大括號的作用就是可以在里面寫很多屬性,如圖:

          類型選擇器

          顯示結果為帶下劃線的紅色字體段落:

          類型選擇器

          在CSS中使用標簽名選擇標簽的時候,類型選擇器會作用在所有同名標簽中。所以這里只定義額一CSS樣式,它會作用在所有的P標簽中。

          2、派生選擇器

          可以讓CSS標簽作用在很小的范圍內,如下圖,只讓CSS作用在li標簽中,所以選擇ul標簽中的li標簽即可。

          派生選擇器

          3、偽類選擇器

          1)在原有選擇器的基礎上添加一個限定條件,當某種情況發生時在選擇這個標簽。如下圖,首先定義個a的類型選擇器,讓頁面中所有的超鏈接下劃線都不顯示,然后通過派生選擇器控制鼠標的動作,當鼠標移上去的時候,超鏈接文字顯示下劃線并顯示為深藍色。

          偽類選擇器

          偽類選擇器

          這條規則只有當鼠標放到超鏈接上停留的時候才會被應用,因此當某種情況發生時候偽類選擇器才會被應用在某個標簽上。

          a的偽類選擇器一共有四種:

          :link 未被訪問的鏈接的樣式;和a標簽相同時,并且同時存在的時候會覆蓋a標簽

          :hover 鼠標移動到超鏈接上的時候

          :active 選擇器用于活動鏈接,被選定的超鏈接。

          :visited 已被訪問的超鏈接,

          注釋:在 CSS 定義中,:hover 必須位于 :link 和 :visited 之后(如果存在的話),這樣樣式才能生效。

          2)使用偽類選擇器縮小選擇范圍

          :first-child 縮小標簽的選擇范圍,如圖:

          如果一個標簽后面還接了一個子標簽,在子標簽后面冒號:first-child,說明這里只選擇了子標簽中的第一個標簽,可以看到瀏覽器中有序列表中的第一個li子元素"北京"顏色為紫色。

          偽類選擇器

          偽類選擇器

          CSS樣式

          三、CSS樣式表放在什么地方

          在head標簽中添加style子標簽,在style標簽里寫一個屬性type="text/css",這樣瀏覽器就知道當頁面顯示出來的時候,需要把style中的CSS代碼應用到HTML中,因此可以在style標簽中創建CSS規則。

          css樣式

          每天進步一點點,跟著教頭學開發。

          篇文章繼續為大家介紹html常用修飾標簽介紹。我們今天主要說下樣式標簽<span>、內容修飾標簽<b><i>等的語法以及使用技巧。

          1)樣式標簽<span>

          使用語法:<span>文章內容</span>

          <span>標簽是沒有語義的,它的作用就是為了設置單獨的樣式用的。如果現在我們想要修改一篇文章中的幾個字字體效果,為它設置和其它文字不同的樣式,所以這樣情況下就可以用到<span>標簽了。比如我們設置字體顏色為藍色,并設置字號大小為30px,代碼如下圖所示:

          代碼在瀏覽器中顯示的效果就如下圖所示:我們可以清楚的看到被span標簽包裹的文字內容已經變成了藍色,字體大小也變成了30px;

          2)內容修飾標簽

          內容修飾標簽有很多,這里我們簡單的來列舉一下標簽的名稱以及標簽的作用。

          文字斜體標簽: <i></i>、<em></em>

          文字加粗標簽: <b></b>、<strong></strong>

          文字下標標簽: <sub></sub>

          文字上標標簽: <sup></sup>

          文字下劃線標簽: <ins></ins>

          文字刪除線標簽: <del></del>

          具體的代碼如下所示:

          代碼在瀏覽器中顯示的效果就如下圖所示:每個被標簽包裹的內容都賦予了其獨立的效果。

          好了以上就是我們所說的修飾標簽,每個標簽都有單獨的意義,在以后練習的時候可以自己多實踐一下,只有自己親自動手去寫了才能明白其中的含義以及效果。

          附贈一句經典語錄:每一天,都要盡心盡力的工作,每一件小事情,都力爭高效的完成,不是為了看到老板的笑臉,而是為了自身不斷的進步。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          檔對象模型(Document Object Model,DOM)是一種抽象化表示網頁的方法,文檔是以樹形結構表示的。

          Document節點分為父節點(parentNode)、子節點(childNode)、兄弟節點(siblingNode)等。

          BOM(瀏覽器對象模型)因為沒有一個標準來定義瀏覽器的功能,所以不同的瀏覽器有不同的屬性和方法。DOM則不然,有專門定義HTML(或XML)頁面中的對象應該如何表示的標準。開發人員可以使用DOM操作或查找網頁中的某項內容,尤其是表單、圖片、定位元素。

          1 查詢或訪問的方法

          當HTML文檔加載完成后,瀏覽器將會將其表示成樹形結構,頁面上的所有元素都是對象樹中的對象。如JS在處理表單時,會根據其在文檔中出現的次序為所有表單創建一個數組。document.forms[0]用來表示第一個表單。同樣,頁面上所有的圖片、鏈接和錨點都會以其名字存儲在數組中,例如document.images、document.links、document.anchors[]等。

          1.1 數組通過名字或索引

          如文檔中有一個表單,名字是form1,那么就可以通過它的名字來訪問它,即document.forms["form1"],也可以使用索引值來訪問它,即document.forms[n].

          1.2 通過document方法的name屬性

          document.getElementByTagName();

          1.3 通過document方法的ID屬性

          document.getElementById();

          2 DOM的修改

          window.onload=function(){

          var divObj=document.getElementById("divtest");

          divObj.innerHTML="Inserting new text in the div container!";

          }

          3 DOM的追加

          window.onload=function(){

          var para=document.createElement("p");

          var divObj=document.getElementById("divtest");

          divObj.appendChild(para);

          var txt=document.createTextNode("Hope this work!");

          para.appendChild(txt);

          }

          4 DOM節點的插入

          document.body.insertbefore(newPara, firstPara);

          5 為DOM節點創建屬性

          var headings=document.getElementsByTagName("h4");

          headings[0].setAttribute("id", "firsth4");

          6 DOM的復制

          newPara=oldPara.cloneNode(true);

          7 DOM的刪除

          parentDiv1.removeChild(div2);

          補充:

          document.write()方法

          可以寫入全部的文檔代碼,包括HTML、CSS乃至JS。

          -End-


          主站蜘蛛池模板: 国模丽丽啪啪一区二区| 日韩精品一区二区三区视频| 熟女少妇丰满一区二区| 亚洲AV乱码一区二区三区林ゆな| 免费无码A片一区二三区| 人妻免费一区二区三区最新| 日韩一区在线视频| 亚洲精品精华液一区二区| 无码精品视频一区二区三区| 亚洲一区精品伊人久久伊人| 日韩三级一区二区| 日韩免费视频一区| 久久久无码精品人妻一区| 78成人精品电影在线播放日韩精品电影一区亚洲| 精彩视频一区二区| 日本一区视频在线播放| 国产伦精品一区二区三区在线观看| 无码中文字幕一区二区三区| 精品人妻AV一区二区三区| 国产香蕉一区二区在线网站 | av一区二区三区人妻少妇| 亚洲国产日韩一区高清在线| 亚洲成AV人片一区二区密柚| 国产区精品一区二区不卡中文| 成人国产一区二区三区| 亚洲一区二区三区无码影院| 一区二区精品久久| 久久精品综合一区二区三区| 中文字幕在线观看一区二区三区| 国产一区二区四区在线观看| 97久久精品午夜一区二区| 中文字幕VA一区二区三区 | 亚洲性日韩精品国产一区二区| 精彩视频一区二区| 色狠狠色噜噜Av天堂一区| 国产无套精品一区二区| 亚洲福利视频一区| 无码人妻av一区二区三区蜜臀| 国产精品熟女视频一区二区| 一区二区三区四区精品| 国产精品日本一区二区不卡视频|