时间:2023-09-26 07:12:01 | 来源:网站运营
时间:2023-09-26 07:12:01 来源:网站运营
CSS 三种样式:本节我们要学习一下 CSS 样式的几种形式,在实际应用中向 HTML 中引入 CSS 样式的方法有三种,分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景,本节我们先来讲一下行内样式。style
属性设置 CSS 样式。例如像下面这样的:<p style="font-size: 18px;">行内样式</p>
HTML 中的 style
属性提供了一种改变所有 HTML 元素样式的通过方法,语法格式如下所示:<标签 style="样式声明1;样式声明2;样式声明3"></标签>
要记得用在每个样式声明之间使用分号 ;
分隔哟,否则样式会失效的。<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> </head> <body> <p style="font-size: 20px;color: red;font-weight: bold;">侠课岛欢迎你!</p> <p style="font-size: 16px;color: green;font-style: italic;">侠课岛欢迎你!</p> </body></html>
在浏览器中演示效果:<head>
标签中的 <style>
标签内。因为它与 HTML 内容位于同一个文件中,所以叫做内嵌样式表。<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <style> h2{ color: lightsalmon; } p{ color:limegreen ; font-size: 18px; line-height: 20px; } span{ color: mediumpurple; font-weight: bold; } </style> </head> <body> <h2>《木兰花令 拟古决绝词》</h2> <p>人生若只如初见,何事秋风悲画扇</p> <p>等闲变却故人心,却道故人心易变。</p> <p>骊山语罢清宵半,泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎,<span>比翼连枝当日愿。</span></p> </body></html>
在浏览器中的演示效果:<style>
标签中,否则无效。.css
,然后在 HTML 页面中引入这个 CSS 文件即可。<link/>
标签链接外部样式表,且 <link/>
标签必须放到 HTML 中的 <head>
标签内。在一个 HTML 页面中可以链接多个 CSS 文件,一个 CSS 文件也可以被多个 HTML 页面引用。<link rel="stylesheet" type="text/css" href="css文件路径">
其中 rel="stylesheet"
是指在页面中使用这个外部样式表,type="text/css"
是指文件的类型是样式表文本,href
属性用于指定 css
文件的路径。css
文件可以应用到多个 HTML 页面中。当改变 css
文件中的样式时,所有应用这个 css
文件的页面中的样式都会随之改变。index.css
的文件,将需要用到的 css 代码保存到这个文件中:h2{ color: lightsalmon; }p{ color:limegreen ; font-size: 18px; line-height: 20px;}span{ color: mediumpurple; font-weight: bold;}
然后可以在 HTML 文件中通过 <link/>
标签引用这个文件:<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="./index.css"> </head> <body> <h2>《木兰花令 拟古决绝词》</h2> <p>人生若只如初见,何事秋风悲画扇</p> <p>等闲变却故人心,却道故人心易变。</p> <p>骊山语罢清宵半,泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎,<span>比翼连枝当日愿。</span></p> </body></html>
在浏览器中演示效果:@import
导入外部样式表,导入样式表的语法需要放置到 <style>
标签中。<style> @import url("css文件路径");</style>
@import
表示导入文件,前面的 @
符号必须写哟,url
中的则是样式表文件的路径。css
文件的方式改为导入外部样式表:<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <style> @import url("index.css"); </style> </head> <body> <h2>《木兰花令 拟古决绝词》</h2> <p>人生若只如初见,何事秋风悲画扇</p> <p>等闲变却故人心,却道故人心易变。</p> <p>骊山语罢清宵半,泪雨零铃终不怨。</p> <p>何如薄幸锦衣郎,<span>比翼连枝当日愿。</span></p> </body></html>
演示效果是不变的,因为 css
文件中的内容并没有改变。导入式除了可以在同一个页面中导入多个样式文件,还可以在 css
样式文件中使用 import
进行导入。<p>
标签的行内样式中定义了字体大小为16px,在嵌套样式中定义字体大小18px,在外部样式中定义了字体大小为20px。最终会应用哪个字体大小呢?这里我不演示,大家自己来试一下。关键词:样式