HTML样式CSS的三种写法

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 style标签的定义和用法：

style 标签用于为 HTML 文档定义样式信息。

在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的，定义 style 元素的内容。唯一可能的值是 text/css 。

style 元素位于 head 部分中。

HTML style 标签实例：html head style type= text/css h1 {color:red}p {color:blue} /style /head body h1 Header 1 /h1 p A paragraph. /p /body /html

必需的属性：

type ： text/css ： 规定样式表的 MIME 类型。

html style标签的使用方法详解：

/style 标签对中书写各种标签的样式,可以是body也可以是h1,即将行内样式全写在一块儿

比如10个标签都是同一个class的话，如果在行内样式中就需要写10条

而在style中写一条就成。

现在都是结构(html)、样式(css)、行为(js)相分离的设计模式p id= xxx === style #xxx{} /style p >

style标签在css样式表中按其所在位置分三种：

1.内嵌样式表

2.内部样式表

3.外部样式表

下面详细解释一下：

1.内嵌样式表是写在使用它的标签(Tag)内的，例如要在 p 标签中使用，

其语法为：p style font-size:20pt 这段文字使用了内嵌样式表，更改了字体大小为20 /p

2.内部样式表不同于内嵌样式表，其是写在html网页的 head /head 标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要注意，自己想在那个标签内使用这个样式表，再定义的时候也要写清楚，否则会造成整个页面的混乱。例如：html head p.mylayout style type= text/css {font-size:22ptcolor:blueborder-width:1pxborder:doubletext-align:center} /style /head body p >

可以看到，在定义内部样式表的时候， style 前面声明的时候应该首先声明在哪个标签里使用这个样式表，如果并不想在该网页所有的此标签中都使用这个样式表则在声明的标签后面加上自己定义的一个样式表名称，例如上面的p.mylayout，意为只能在该网页的 p 标签中使用此样式表，在要使用这个样式表的 p 标签中声明，声明方式为 标签 自定义样式表名称

利用样式表选择，你可以用同样的HTML标签构成不同的样式。比如说，你希望段落 p 有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：p.right {text-align:right}p.center {text-align:center}

其中right和center就是两个样式表。然后你就可以引用这两个样式表，示例代码如下：p >

也可以不用HTML 标签，直接用“.”加上样式表名称。示例代码如下：.center {text-align: center}

这种通用的样式表名称就没有标签的局限性，可以用于不同的标签。比如：h1 class = center 这个标题居中显示。 /h1 p class = center 这个段落居中显示。 /p

3.外部样式表

外部样式表就是将样式表的内容单独写到一个notepad中，并保存为后缀为.css的文件，在你写的想要调用的网页中加上如下的代码(当然还是加到 head /head 之间)：link href= 你css文件所在的文件夹 rel= stylesheet type= text/css

---