今天开始进入css的学习啦,css是cascading style sheet 的缩写,指层叠样式表。 说得这么深奥的样子,其实就是用来给之前我们写的很low的HTML文档添加样式的一种标记性语言。通过css我们可以美化HTML,对整个文档内容,或者说网页实现布局和美化。
对于css的使用,第一步当然是使用方式啦。下面将介绍css的4种引用方式,分别是内联样式,内嵌样式,链接外部样式和导入外部样式。
内联样式又称为行内样式,它的使用示例如下:
<p style="color: red;font-size: 20px">今天心情美丽</p>
运行效果是这样的:
内联样式效果
内联样式是直接将样式定义到HTML元素的style属性,这款样式仅对该元素起作用,仅供内部使用的,私有财产,emmm
内嵌样式又称为内部样式,使用示例如下:
<head>
<title>css引入方式</title>
<style type="text/css">
p{
color: blue;
font-size: 10px;
}
</style>
</head>
他的使用方式是将style定义在head部分,以上样式是对该HTML文档中所有p标签元素起作用。这种引用方式可供整个文档使用,相当于整个文档中所有标签的公有财产,而不是某个标签的私有财产。
链接外部样式的使用方式如下:
<head>
<title>css引入方式</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
同样是在head中定义,使用link标签将外部的单独一个名叫1.css的文档引用进来,类似于c语言中引库文件,这种方式就实现了css文档和HTML文档的分离,一方面实现了代码服用,该css文档可供多个HTML文档使用;另一方面也便于维护修改代码。
最后一种方式是使用不多的导入外部样式,其类似与第三种,只是使用的方法略有不同,其示例如下:
<head>
<title>css引入方式</title>
<style type="text/css">
@import url(1.css);
</style>
</head>
同样是在head部分进行引入。
这几种引入方式在同时使用时,具有一定的优先级别,内联样式>内嵌样式>import引用方式>link引用方式。
今天的学习总结就到此啦,坚持!
记得微笑呀