龙空技术网

「测试开发全栈-HTML」(18)css的引入方式-内部样式表

蛋蛋杂谈 265

前言:

今天看官们对“html外部样式表”可能比较关心,小伙伴们都需要知道一些“html外部样式表”的相关知识。那么小编也在网摘上网罗了一些对于“html外部样式表””的相关资讯,希望同学们能喜欢,我们一起来了解一下吧!

上午已经说完了CSS文本样式,接着说下CSS的引入方式,包含内部样式表(嵌入式),行内样式表(行内式)和外部样式表(链接式)。

内部样式表(内嵌样式表)是写道HTML页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>​标签中。

以前的语法展示:

<style>

​ ​div {

​ ​color:pink;

font-size:12px;

​}

</style>

将所有的样式,都放到<style>标签中

展示如下:

对应的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS引入方式-内部样式表</title>

<!-- 将所有的样式都放在一个<style>标签中 -->

<style>

div {

/* 文本颜色属性 */

color: blue;

/* 文本行间距 */

line-height: 32px;

/* 让文本在中间展示 */

text-align: center;

}

p {

/* 段落首行收缩2个字 */

text-indent: 2em;

}

a {

/* 文本不展示下划线 */

text-decoration: none;

}

</style>

</head>

<body>

<div>战无不胜,攻无不克,横刀立马,千秋万代</div>

<p>10月15日晚,甘肃省天水市妇女联合会官方微博发布通报称,经过多方劝解,孩子父亲毛某已于10月14日将孩子送到母亲范某身边。目前孩子健康状况良好,范某情绪稳定,毛某也认识到因自己一时冲动造成的严重后果,并保证不再有过激行为。</p>

<div>一片祥云,我自横刀向天笑</div>

<!-- 下划线展示 -->

文本不展示下划线<br/>

<a href=";>跳转到百度页面</a>

</body>

</html>

<style>标签理论上可以放到HTML文档的任何地方,但一般会放在文档的<head>​标签中。通过此种方式,可以方便控制当前整个页面中的​元素样式设置。代码结构非常清晰,但是并没有实现​结构与样式完全分离。使用内部样式设定CSS,通常也被成为嵌入式引入,​这种方式是我们练习时的常用方式。

标签: #html外部样式表