外部樣式表css如何寫?寫在html哪里?


外部樣式表css如何寫?寫在html哪里?先看外部樣式表的用法:當樣式需要被應用到很多頁面的時候,先創建一個外部樣式表.css文檔,再通過link標簽引入到多個html網頁中即可。使用外部樣式表,可以讓你通過更改一個.css文檔來隨時改變整個站點的顯示效果,具體寫法如下:

首先我們要新建一個后綴為.css的文檔,為了網友們能夠簡單易懂,范如樂還是用dw軟件進行講解:

打開dw軟件,點擊【文件】按鈕:

打開dw軟件,點擊【文件】按鈕圖示

接著點擊【新建】按鈕,點擊【css】,再點擊【創建】按鈕:

點擊【新建】按鈕,點擊【css】,再點擊【創建】按鈕

這樣,一個默認的css文檔就創建好了:

默認的css文檔就創建

那么,我們要寫的外部樣式表的css代碼,就是寫在這個.css文檔里面的,范如樂舉例如下:

我隨便在一個html網頁里面寫上一個h1標簽p標簽,默認顯示效果如圖:

h1標簽和p標簽,默認顯示效果圖示

假設范如樂想把h1標簽和p標簽的字體都變成14像素,顏色為紅色,水平對齊方式為居中,則需要在新建的.css文檔里面寫入如下代碼:

外部樣式表css代碼寫法圖示

不過,這樣看著會好密集,不清晰,一般會通過換行寫成這樣:

css外部樣式表美觀寫法圖示

把每個聲明放在一行,這樣看著就很清楚了,這個習慣范如樂希望網友們一定要養成哦。

css代碼拆解:

網友們記住這個基本語法構成即可:選擇器{屬性: 值; },如果有多個屬性,在{}里面添加即可,比如:選擇器{屬性: 值;屬性: 值; 屬性: 值; },例圖如下:

css基本語法圖示:選擇器{屬性: 值; }

我們在之前的《html教程》中,學會了如何使用標簽來給html網頁添加內容,例如上圖的h1標簽,如果你想使用css對這個h1標簽的顯示效果進行修改,則需要先選擇h1,然后在{}里面添加相關的屬性和屬性對應的值即可,每個屬性和值為一條聲明,每條聲明用來修改一項內容。

我們回到案例中的代碼:

h1{font-size:14px;color:red;text-align:center;}

p{font-size:14px;color:red;text-align:center;}

第一個是控制字體大小的屬性font-size,對應的值是14px(大小為14像素),用英文小寫符號:連接,用英文小寫符號;結束。

第二個是控制顏色的屬性color,對應的值是red(紅色),用英文小寫符號:連接,用英文小寫符號;結束。

第三個是控制文本水平對齊方式的屬性text-align,對應的值是center(居中),用英文小寫符號:連接,用英文小寫符號;

符號{}前面的h1是告訴瀏覽器,當前html網頁中的h1標簽的顯示效果要更改為符號{}里面的樣式,同理,p{}也是一樣。

接著,在.css文檔里面寫完了代碼并保存后,當你需要在哪個html網頁中使用這個.css文檔里面的樣式,就把這個.css文檔引入到那個html網頁中即可。

引入的方法也很簡單,使用link標簽寫在<head>與</head>之間,寫法如下:

<link rel=”stylesheet” type=”text/css” href=”外部樣式表的地址” />

這個link標簽在之前的文章中有講解,范如樂這里就不贅述了,詳情點擊:《link標簽怎么引入css?》。

在html網頁中引入.css文檔后的效果如圖:

在html網頁中引入.css文檔后的效果圖示

網友們需要注意的是:這個.css文檔名稱可以隨意起,比如我寫成rulelaoshi.css,那么link標簽的href地址就要改成href=”rulelaoshi.css”,比如我把這個rulelaoshi.css文檔放在【新建文件夾】中,則link標簽的href地址就要改成href=”新建文件夾/rulelaoshi.css”

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/7889.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: