<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML_CSS</title>
<style type="text/css">
body {background-color: cornflowerblue;}
h1 {color: blue;}
h2 {color: red;}
p {color: yellow;}
</style>
<!-- <link rel="stylesheet" type="text/css" href="styles.css">-->
</head>
<body>
<h1>這是一個標(biāo)題</h1> <br>
<h2>這是另一個標(biāo)題</h2> <br>
<p>這是一個段落</p> <br>
<!--沒有下劃線的鏈接-->
<a style="text-decoration: none">訪問 runoob.com!</a> <br>
<h1>我使用了外部樣式文件來格式化文本 </h1>
<p>我也是!</p>
<p style="background-color: chartreuse">段落背景顏色</p>
<h2 style="background-color: red;color: green">標(biāo)題背景顏色</h2>
<h3 style="font-family: Arial;font-size: 20px;color:black;background-color: mediumslateblue">一個標(biāo)題</h3>
<p style="background-color: blue;color: red;font-family: 'Droid Sans Mono';font-size: 35px">一個段落</p>
<h3 style="font-size: 20px;color: red;background-color: aqua;text-align: center">對齊方式</h3>
</body>
</html>
1慕爬、如何使用CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性
內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style> 元素 來包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用CSS文件.
2、內(nèi)聯(lián)樣式
當(dāng)特殊的樣式需要應(yīng)用到個別元素時(shí)屏积,就可以使用內(nèi)聯(lián)樣式医窿。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性炊林。以下實(shí)例顯示出如何改變段落的顏色和左外邊距姥卢。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
3、HTML 樣式實(shí)例 - 字體, 字體顏色 渣聚,字體大小
我們可以使用font-family(字體)独榴,color(顏色),和font-size(字體大修戎Α)屬性來定義字體的樣式:
實(shí)例
<h1 style="font-family:verdana;">一個標(biāo)題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落棺榔。</p>
現(xiàn)在通常使用font-family(字體),color(顏色)隘道,和font-size(字體大兄啦颉)屬性來定義文本樣式,而不是使用<font>標(biāo)簽薄声。
4当船、HTML 樣式實(shí)例 - 文本對齊方式
使用 text-align(文字對齊)屬性指定文本的水平與垂直對齊方式:
實(shí)例
<h1 style="text-align:center;">居中對齊的標(biāo)題</h1>
<p>這是一個段落。</p>
文本對齊屬性 text-align取代了舊標(biāo)簽 <center> 默辨。
5德频、內(nèi)部樣式表
當(dāng)單個文件需要特別樣式時(shí),就可以使用內(nèi)部樣式表缩幸。你可以在<head> 部分通過 <style>標(biāo)簽定義內(nèi)部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
6壹置、外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候竞思,外部樣式表將是理想的選擇。使用外部樣式表钞护,你就可以通過更改一個文件來改變整個站點(diǎn)的外觀盖喷。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
7、HTML 樣式標(biāo)簽
<style> 定義文本樣式
<link> 定義資源引用地址
8难咕、CSS修飾標(biāo)簽的樣式课梳,有 "內(nèi)聯(lián)" 和 "外引" 兩種方式。
對于大部分標(biāo)簽余佃,以上兩種方法均可暮刃,且修改父級標(biāo)簽,子級標(biāo)簽特性也會改變爆土。但某些標(biāo)簽確無法通過修改父級標(biāo)簽來改變子級標(biāo)簽特性椭懊,
如a標(biāo)簽,修改其顏色特性步势,必須直接修改 a 標(biāo)簽的特性才可氧猬。
實(shí)例:
<a href="#" style="color:red;" rel="nofollow">只能使用"內(nèi)聯(lián)"方式</a>