篇文章我們簡單介紹了css的概念以及語法,本篇文章我們將為大家介紹下css的三種引入方式。
內鏈式css樣式表就是把css代碼直接寫在現有的HTML標簽中,具體的使用方法如下面所示:
<div style="color:red">設置文字的顏色為紅色</div>
這里要注意:樣式的內容寫在元素的開始標簽里,并且css樣式代碼要寫在style=""雙引號中,如果有多條css樣式代碼設置可以寫在一起,中間用分號隔開。多個css樣式寫在一起的效果如下面所示:
<div style="color:red; font-size:14px">設置字體顏色為紅色,并且字體大小為14px</div>
嵌入式樣式表與內鏈式不同的是可以很方便的同時修改多個相同元素的樣式屬性,比如我們想要將某個標簽內的內容字體都調整為紅色,并且加粗,字體大小都調整為14px;
我們如果使用內鏈式的方式,我們需要在每個標簽上都要加上樣式,代碼就如下圖所示:
從上邊可以看出,內鏈式會產生一堆的冗余代碼,而使用我們的嵌入式就比較簡單了,代碼如下圖所示:
由上圖可以看出,嵌入式我們只需要修改span標簽,那么所有的span標簽內內容的樣式都會跟著修改。
外部式css樣式就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css”為擴展名,一般放在<head>內(不是在<style>標簽內)使用<link>標簽將css樣式文件鏈接到HTML文件內。
使用語法:<link href="style.css" rel="stylesheet" type="text/css" />
詳細講解:
1、href=""內部的就為css文件的地址一般以英文命名,比如 base.css或者style.css等等。
2、rel="stylesheet" type="text/css" 這是w3c的標準,固定寫法不可修改。
3、<link>標簽位置一般寫在<head>標簽之內。
我們在網站建設中,一般都會使用外部式寫法,一來可以做到代碼分離,有助于后期的修改維護;二來可以減少頁面代碼的冗余,有助于優化。具體的頁面代碼就如下圖所示:
我們以上三種寫法,最后所得到的結果都是一樣的,在網頁中呈現的效果都如下圖所示:
對于css的三種引入方式我們今天就先介紹到這里,我們后期進行項目制作的時候主要還是使用第三種外部式寫法,大家在平時可以自己多加聯系聯系,熟練一下css的基本操作。
每日金句:有志者自有千計萬計,無志者只感千難萬難。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
<html>
<head>
<title>這是網頁標題</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="keywords" content="這是關鍵字"/>
<link href="css文件路徑" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
</body>
</html>
標簽 | 含義 | 常用屬性 |
a | 超鏈接 | href / target / title |
img | 圖片 | src / alt / title / width / heiht |
h1-h6 | ||
p | ||
br | ||
hr | ||
em | ||
strong | ||
i | ||
span | ||
div |
ID | CLASS | 標簽 |
100 | 10 | 1 |
樣式 | 含義 | 屬性值 |
ss是一種用來為Html文檔添加樣式(字體、間距、位置、顏色、角度等顯示效果)的計算機語言。學習網站W3school。
css的引用樣式:
一:style標簽(內聯樣式)
通過在head標簽中間新建一個style標簽,該標簽內部存放的就是網頁文件中的css代碼。
二:外部引用css文件(外聯樣式)
新建一個css文件
在head標簽中間新建一個link標簽,通過href屬性設置外部的css文件地址。rel=“stylesheet”表示我們引用的一個樣式表(css文件)。
三:標簽內部style屬性(行內樣式)
在開始標簽的內部可以設置一個叫做style的屬性,屬性的雙引號存放該元素代碼的css樣式(不推薦使用)。
一般用的就是通過link標簽來引入外部css文件來修改樣式,一般修改樣式有字體,顏色,大小,文本居中,間距等。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。