什么是样式？什么是HTML样式？

html-css014

什么是样式？什么是HTML样式？,第1张

你好，看这个简单的html代码，你就明白了，样式就是表示“外观”，而html样式就是“使html页面显示达到一定效果”的辅助代码或文件。

比如这段代码里，<style>...</style>中间的内容就是html样式，它是为了实现使当前页面中id值为myLink的元素，在鼠标移动到上面时显示黄色背景，而鼠标离开时显示白色背景，就是这样。

<html>

<head><title>主页</title>

<style>

#myLink:hover{background:yellow}

#myLink:out{background:white}

</style>

</head>

<body>

<a id="myLink" href="hi.baidu.com/lylegend13">我的百度空间</a>

</body>

CSS是样式层叠表，有三种引入方式。下面，我们来看看HTML样式CSS的三种写法吧。

行内样式

CSS可以直接放到行内样式中引入即可，比如代码如下图：

<p style="color: bluebackground: red">

hello world！

</p>

嵌入式

还可以采用潜入方式引入CSS，就是把CSS写到<style>标签中，这种方式比较实用，如下图所示：

<style type="text/css">

h1 {color: red}

</style>

<h1>helloworld</h1>

外部样式表

还有一种叫做外部样式，也就是把CSS写在另外一张页面上，然后再引用到指定页面就可以了，这种也很常见。

@import url(main.css)

你想问的应该是，在搭建一个HTML文件时，基本的文件结构是什么样子吧？

标准的HTML文件由“文档声明、文件头、文件体”组成。

对于HTML5，文档声明也应该采取HTML5.0的声明方式，具体代码如下：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5学堂（码匠） & 言成科技 联合出品</title>

<meta name="viewport" content="width=device-width,user-scalable=no">

<link rel="stylesheet" href="../css/reset.css">

</head>

<body>

<div>具体内容</div>

</body>

</html>

在html标签当中包含head标签和body标签两种，而head标签表示的是文件头，body标签表示文件体，文件头当中需要包含“字符编码”（head标签中的第一行）、“标题”（title标签）、“其他元信息”（除了字符编码外的其他meta），而文件体当中书写的具体代码就是在网页当中会显示的内容。

此外，在文件头部或文件体当中还可以使用link标签引入CSS文件，或者使用script标签引入JS文件。

关于文档声明，在传统的HTML4当中，有另外三种声明方法，请详见《文档声明 DOCTYPE常见的文档类型》