1、CSS 的作用是通过结构语言来实现的,通过结构做桥梁,控制页面内容的显示效果(即表现)
2、CSS语法
包括3个方面,即选择符、属性、属性值
选择符 { 属性:属性值;}
说明:
(1)属性必须包括在{ }中
(2)属性和属性值之间用“:”分隔
(3)当有读个属性时,用“;”进行辨别
(4)在书写属性时,属性之间使用空格、换行等并不影响属性的显示
(5)如果1个属性有几个值,则每一个属性值之间用空格分隔开
3、在网页中使用CSS的3种方法:
(1)元素内部的CSS
<元素名称 style="属性:属性值"></元素名称>
说明:在元素中直接使用CSS,是通过使用style属性实现的。其中style属性定义的CSS样式的语法结构和独立样式表中的完全相同。
补:border边框是加在图片外部,即居外
(2)页面头部的CSS
<style>
选择符{ 属性:属性值;}
</style>
说明:
(1) 使用头部调用CSS时,在页面中必须有相应的调用代码.根据调用内容的不同,调用代码的写法也有区分,比如:
类选择符的调用代码: <元素名称 class="类选择符名称"></元素名称>
ID选择符的调用代码: <元素名称 id="id选择符名称"></元素名称>
(2) 页面所有样式都可以写在 <style>和</style> 之间
(3)外部的CSS(推荐使用)
采取链接的情势调用CSS的两种写法:
(1) 使用link元素调用CSS
<link rel="stylesheet" href="css文件路径" type="text/css">
说明:
rel="stylesheet" 指调用的相干文件的样式为样式表文件
type="text/css" 指文件类型为样式表文本
(2) 使用@import调用CSS
<style type="text/css"> @import url(css文件路径); </style>
说明:
@import 的调用方法也能够写在CSS文件中,用来调用其他的CSS。
同时使用link和@import调用样式的示例以下:
<link href="style/main.css" rel="stylesheet" type="text/css" />
mian.css中的代码:
.@import url(css1.css);
.main {
border:1px solid #666666;
margin:100px auto;
font-size:200px;
}
通过使用@import实现了从样式表中再次调用样式文件