看书《DIV+CSS商业案例与网页布局开发精讲》_CSS语法_随手笔记

1、CSS 的作用是通过结构语言来实现的，通过结构做桥梁，控制页面内容的显示效果（即表现）

2、CSS语法

包括3个方面，即选择符、属性、属性值

选择符
{ 属性：属性值；}

说明：

（1）属性必须包含在{ }中

（2）属性和属性值之间用“：”分隔

（3）当有读个属性时，用“；”进行区分

（4）在书写属性时，属性之间使用空格、换行等并不影响属性的显示

（5）如果一个属性有几个值，则每个属性值之间用空格分隔开

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实现了从样式表中再次调用样式文件