今天我们接着整理css:
CSS
使用方式
(3
种
)
1.
行内样式
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<title>
This is title
</title>
</head>
<body>
<p
style
=
"font-size: 16px; color: red;"
>
大家好
</p>
</body>
</html>
行内样式需要写到标签的
style
属性值中。
2.
内部样式表
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<title>
This is title
</title>
<style>
p
{
font-size
:
16px
;
color
:
red
;
}
</style>
</head>
<body>
<p>
Hello everyone
</p>
</body>
</html>
内部样式需要写到
<style>
标签中。
3 .
外部样式表
链接式
将样式写到单独的文件中,文件的扩展名为
.css
。例如,
index.css
文件中有如下样式:
p
{
font-size
:
16px
;
color
:
red
;
}
然后通过
<link>
元素将
index.css
文件引入到页面中:
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<title>
This is title
</title>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"./css/index.css"
>
</head>
<body>
<p>
我是优秀的开发工程师
</p>
</body>
</html>
多学一招
:
在
css
中引入公共样式
@import url("global.css");
@import url(global.css);
css
使用方式总结
定义在外部文件(外链样式):开发中主要是通过这种形式定义样式。(推荐)
在页面的头部定义(内联样式):通过这种形式定义的样式只在本页面内生效。
定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。(不推荐)