首页 » 编程语言 » html » 正文

HTML样式:网页CSS设置的三种方式

HTML样式,就是指的CSS,是能对html元素进行各种修饰装扮,就好比一个人,需要通过穿衣搭配和化妆打扮等形式改变外表,使其显得更加美观和好看!所以,HTML样式的作用也是这个道理!

什么是CSS样式

  • CSS是英文Cascading Style Sheets的简称缩写,它是用于渲染HTML元素标签的样式,我们经常称作CSS样式;

  • 通过设置CSS样式,我们就可以控制html元素按照自己设置的外观样式,使其在浏览器中显示得更加美观和好看。比如用css样式控制各种html元素的颜色、文字大小、字体、宽度、高度、布局,浮动等样式。

  • 样式是从HTML4开始引入的,通过使用style属性直接将样式添加到HTML元素内,或者使用间接地独立CSS样式表进行定义。

  • 有了CSS样式,你可以把所有格式化的代码移出HTML网页文档,然后,移入一个或多个独立的样式表中即可。

如何使用CSS样式

当浏览器在读取一个样式表时,它会按照这个样式表来对html文档进行格式化。

CSS可以通过以下三种方式添加到HTML中:

  • 内联样式表—在HTML元素中的开始标签内使用"style" 属性;

  • 内部样式表—在HTML网页文档的<head>头部区域使用<style>标签来包含CSS;

  • 外部样式表—在HTML网页文档的<head>头部区域使用<link>标签来引用外部独立的CSS文件;

1、内联样式表

内联样式表,可以在每个html元素的开始标签中设置style属性,内联样式属性可以包含任何CSS属性

以下实例表达的是设置一个<p>段落的文字颜色为红色、左边的外边距是15像素

<p style="color:red;margin-left:15px;">这是内联样式演示的段落。</p>

以上代码图示分析如下

内联样式表写法分析图

在浏览器中显示的效果如下

内联样式表效果图

HTML样式实例 - 设置背景颜色

设置背景颜色,可以使用属性:background-color,它就是用来定义一个元素的背景颜色的:

背景颜色属性background-color现在已经取代了早期使用的bgcolor背景颜色属性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式表:使用style属性设置背景颜色</title>
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这个H2标签标题</h2>
<p style="background-color:green;">这个P标签段落。</p>
</body>
</html>

以上实例图示分析如下

内联样式表:使用style属性设置背景颜色

HTML样式实例 - 设置字体, 字体颜色 ,字体大小

我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式表:设置文本字体,颜色,大小</title>
</head>
<body style="background-color:yellow;">	
    <h1 style="font-family:verdana;">刘代码博客</h1>
    <p style="font-family:arial;color:red;font-size:20px;">	
	学习各种计算机编程语言,就来刘代码博客。	
    </p>
</body>
</html>

以上实例图示分析如下

HTML样式实例 - 设置字体, 字体颜色 ,字体大小

现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。

HTML样式实例-设置文本对齐方式

使用text-align(文字对齐)属性指定文本的对齐方式有三个属性值:center(居中),left(左对齐),right(右对齐)

文本对齐属性text-align已经取代了旧标签 <center> 。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式表:设置文本对齐方式</title>
</head>
<body style="background-color:yellow;">	
    <h1 style="text-align:center;">刘代码博客</h1>
    <h1 style="text-align:left;">刘代码博客</h1>
    <h1 style="text-align:right;">刘代码博客</h1>
</body>
</html>

以上实例图示分析如下

HTML样式实例-设置文本对齐

内联样式,这种方式控制虽然精确,但当一个HTML网页文档中,拥有多个相同HTML标签的话,使用这种内联样式来设置style属性,就会显示重复而冗长,样式既不统一,又显得复杂。

于是,我们可以使用内部样式表进行简化和统一

2、内部样式表

内部样式表,就是在一个html网页文档中的<head> 头部区域,通过<style>标签定义内部样式表;

<style>标签定义的样式表,必须写在<head>头部区域之内。

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

3、外部样式表

首先,要新建一个样式表文件mystyle.css,这个文件就是用来存放CSS样式的。

然后,在HTML网页文档的<head>头部区域使用<link>标签来连接外部的mystyle.css样式文件;

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

当有很多页面需要应用CSS样式的时候,就需要通过外部样式表的方式来控制多个页面的样式,你可以通过改变这一个被连接的独立CSS样式表,就能改变整个站点中的所有网页的外观。

被CSS样式取代的标签和属性

有些标签和属性在旧HTML4版本中是被支持的,但从HTML5开始就已被弃用。

下面这些标签是已被HTML5弃用的标签和属性:

已被弃用的标签: <font>, <center>, <strike>,<basefont>

已被弃用的属性: color、 bgcolor



欢迎您发表评论或留言