一 在网页中使用CSS有3种方法:
1 元素内部的CSS
语法:<元素名称 style = "属性:属性值"></元素名称>
示例:<image src = "images/org.jpg" style = "border:5px solid #333333;width:400px;height:500px" />
说明:该样式定义图片的边框为5px的实线边框,颜色为深灰色,同时定义了图片的大小。
2 页面头部的CSS
语法:
<style>
选择符{属性:属性值;}
</style>
注意:
1) 从页面头部调用CSS是将CSS写在页面的head元素中
2)使用头部调用CSS时,在页面中国必须有相应的调用代码,
a. 类选择符的调用代码:<元素名称 class = "类选择符名称"></元素名称>
b. ID选择符的调用代码: <元素名称 id = "id选择符名称"></元素名称>
示例:
<head>
<style>
.font{
font-size:72px;color:#333333;
position:absolute;top:50px;left:50px;
border:2px solid #000;}
</style>
</head>
<body>
<div class = "font">头部调用CSS></div>
</body>
3) 外部的CSS
A. 通常有两种写法:
a. 使用link元素调用CSS
语法:<link rel = “stylesheet”href = "css文件路径" type = "text/css" />
其中rel = "stylesheet"指的是调用的相关文件的样式为样式表文件,type = "text/css"指的是文件的类型为样式表文本
b. 使用@import调用CSS
语法:<style type = "text/css">@import url(css文件路径);</style>
说明:@impor的调用方法可以也可以写在CSS文件中,用来调用其他的CSS
B. 两种方法的区别:
@import的调用方法只能在样式文件中或者在style元素中才能正常使用,而在link元素调用的样式文件中依然可以使用@import来再次调用其他的样式文件
C. 示例:
<link href = "style/mai.css" rel = "stylesheet" type = "text/css"/>
main.css文件中的代码:
.@import url(css1.css);
.main{
border:1px solid #666666;margin:100px auto;
font-size:20px;}
二 样式的优先级
在元素中直接定义CSS的优先级最高,其次是在头部调用CSS样式,最后是从外部文件中调用CSS样式
元素中直接定义CSS --> 在头部调用CSS样式 --> 从外部文件中调用CSS样式