如何添加css樣式

小編給大家分享一下如何添加css樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為灤南企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，灤南網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

添加css樣式的方法：1、通過html的style屬性實(shí)現(xiàn)添加；2、在style標(biāo)簽中寫css樣式；3、通過鏈接式實(shí)現(xiàn)添加；4、通過導(dǎo)入式實(shí)現(xiàn)添加，代碼如“@import url(demo.css)”。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

怎么添加css樣式？

如何插入css樣式？下面本篇文章就來給大家介紹一下插入css樣式的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對大家有所幫助。

準(zhǔn)備

首先準(zhǔn)備一個(gè)html文件：test.html，不建議使用記事本創(chuàng)建文件，建議使用Notepad++來創(chuàng)建并編輯文件，注意編碼格式為：以UTF-8無BOM格式編碼，否則會出現(xiàn)中文亂碼，內(nèi)容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        hello
    </body>
</html>

保存文件至桌面，右鍵選擇谷歌瀏覽器（或其他瀏覽器打開）打開，發(fā)現(xiàn)頁面上出現(xiàn)了hello這幾個(gè)英文字母。

如何添加css樣式

四種引入方式

行內(nèi)式

通過html的style屬性實(shí)現(xiàn)，如下所示

//寫在body標(biāo)簽中
<span style="color:red;">行內(nèi)式</span>

嵌入式

在style標(biāo)簽中寫css樣式，在body中引用

//寫在style標(biāo)簽中的css樣式
p{
    color:blue;
}
//寫在body標(biāo)簽中
<p>嵌入式</p>

鏈接式

一般都使用這種方式，在桌面上新建一個(gè)css文件：test.css，內(nèi)容為一個(gè)css樣式

//寫在test.css文件中
div{
    color:yellow;
}

在test.html引入test.css文件

//寫在head標(biāo)簽中引入css文件，href屬性中的為絕對路徑，當(dāng)前在同一級目錄下
<link href="test.css" type="text/css" rel="stylesheet" />
//寫在body標(biāo)簽中
<div>鏈接式</div>

導(dǎo)入式

@import(url(demo.css))

基本不使用，因?yàn)轫撁鏁燃虞dhtml，然后再去加載css，這樣就會造成頁面樣式的延遲。

創(chuàng)建一個(gè)demo.css文件，寫上一個(gè)css樣式

//寫在demo.css文件中
h3{
    color:green;
}

使用@import方式導(dǎo)入demo.css文件

//試驗(yàn)了一下，需要單獨(dú)寫在一個(gè)style中，
<style>
  @import url(demo.css)
</style>
//寫在body標(biāo)簽中
<h3>導(dǎo)入式</h3>

html頁面代碼

如何添加css樣式

頁面效果圖

如何添加css樣式

以上是“如何添加css樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：如何添加css樣式
本文網(wǎng)址：http://muchs.cn/article46/gjgshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站改版、虛擬主機(jī)、域名注冊、網(wǎng)站策劃

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

猜你還喜歡下面的內(nèi)容