HTML 样式

这章除了了解 HTML 样式,还将简单介绍 CSS 选择器CSS 继承和几个 CSS 样式

css 用于渲染 HTML 元素的样式,用3种方式加入 HTML:

注:最好的方式是通过外部引用 css 文件,方便项目维护。

HTML - 内联样式

内联样式直接写在开始标签里面。以下样式设置文本颜色为 blue。

<p style="color: blue;">这是内联样式,使用style属性</p>

HTML - 内部样式

内部样式在文档头部,使用 <style> 元素。以下样式设置文本颜色为 red。

<head>
	<style type="text/css">
		p {
			color: red;
		}
	</style>
</head>

HTML - 外部引用

外部引用要先创建一个css文件(*.css),然后在 html 文档里面引用。

css.css 文件 :

p{color: brown;}

index.html :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> pangugle 教程</title>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>
		<p>第一个段落。</p>
	</body>
</html>

查看 样式完整实例 了解样式的优先级。

HTML - css 选择器简单介绍

下面将简单介绍 css 常用选择器:元素选择器、类选择器、id选择器。

1.元素选择器:这是最普通的用法。如以下,p是要改变样式的 HTML 元素,color(文本颜色)是属性,red(颜色值)是值。

p{ color: red; }

2.类选择器:也叫 class选择器,以一个点号开始,后面是用户自定义。如以下,.txt 为选择器,表示 class="txt" 的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style type="text/css">
			.txt { text-align: center; }
		</style>
	</head>
	<body>
		<p class="txt">这是一个段落。</p>
		<div class="txt">这是块元素</div>
	</body>
</html>

3.id 选择器 :id 选择器以 # 开始,后面为用户自定义。id 选择器具有唯一性。在同一个页面,一个id只能给一个元素定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			#bgcl { background-color:yellow; }
		</style>
	</head>
	<body>
		<p id="bgcl">这是一个段落。</p>
	</body>
</html>

4.* 通配符:这里的 * 代表所有的元素。

*{ color: red; }

css命名规则

HTML - css 继承

css的继承:就是给父级设置一些属性,子元素继承了父级的该属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			div{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<div>
			<p>第二个段落。</p>
		</div>
	</body>
</html>

以上实例中,第二个 <p> 是 <div> 的子元素,<div> 是父元素。子元素会继承父元素的 css 属性,所以第二个 <p> 的内容会水平居中。

HTML - CSS 样式

这里简单了解下几个 CSS 样式。

1.背景颜色

<p style="background-color: beige;">这是个一段落。</p>

background-color 设置背景颜色。background-color 的值有 :

  • 颜色名称(如 red)
  • HEX也就是 十六进制(如 #3F3F3F)
  • rgb()/rgba() (如 rgb(255,0,0) )
  • transparent 设置背景色为透明

2.背景图

body{
	background-color:#b2bad5;
	background-image:url(img/bg.png);
	background-size:100%;
	background-attachment:fixed;
}

背景图常用的是设置在 <body>。
background-image 设置背景图。同时设置了背景颜色时,当这个背景图太大,加载很慢时,页面将先显示背景颜色,提高用户体验。
background-size 设置背景图宽度 100%。
background-attachment 设置背景图固定,不随页面滚动。

3.文本的样式

<p style="font-family:KaiTi">这是一个段落。</p>	
<p style="font-family:SimSun">这是一个段落。</p>			
<p style="font-size: 14px;color: red;">这是个一段落。</p>

font-family(字体),color(颜色),和font-size(字体大小)。KaiTi为楷体,SimSun为宋体。color 的设置跟背景色一样。

4.文本对齐方式

<p>这是一个段落。</p>		
<p style="text-align: left;">这是一个段落。</p>		
<p style="text-align: center;">这是一个段落。</p>		
<p style="text-align: right;">这是个一段落。</p>

text-align(文字对齐)属性指定文本的水平,默认为left。