CSS的使用

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 或 XML ）添加样式的计算机语言，文件扩展名为".css"

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS中的最小单元为CSS规则，我们编写若干css规则来控制页面中的各种元素格式

CSS文件编码

@charset属性指定CSS文件中使用的字符编码

@charset "utf-8"
    @charset和值之间必须也仅可以有一个空格，无空格或2个以上是无效的
    编码必须使用双引号，使用单引号或不使用引号都是无效的
    编码是字符串对大小写不敏感

必须是样式表中的第一个元素，而前面不得有任何字符
如果有多个@charset规则，只有第一个会被使用
不能在HTML页面的中使用，只能在CSS文件中使用

CSS规则

由两个主要的部分构成：选择器和若干条声明

选择器通常是需要改变样式的HTML元素
多条声明之间使用分号";"隔开
每条声明由一个属性和一个值组成，属性和值用冒号分隔
所有的声明用大括号 {} 括起来

为了提高可读性，可以每行只描述一个声明
p {
    color:red;
    text-align:center;
}

CSS注释

CSS注释以 / 开始, 以 / 结束，不限制行数

/*这是单行注释*/
/*
    这是多行注释1
    这是多行注释2
*/
p {text-align:center;}

CSS文件的引入

外部样式：使用link单标签

<link rel="stylesheet" type="text/css" href="path/style.css">

内部样式：使用style双标签

<style>
    p {margin-left:20px;}
    ...
</style>

内联样式：在要改变样式的元素标签中使用style属性

<span style="color:red;"></span>

@import属性引入

用于导入外部样式
@import url(uri) media_queries;

url中可以是一个相对路径，也可以是一个绝对的url地址
当使用相对路径时可以简写为
    @import "path/style.css"
    省略url方法，但是路径必须使用双引号包含
media_queries为媒体查询语句，表示根据不同条件导入不同的样式文件
    @import url('style.css') screen and (orientation:landscape);

该属性之前仅允许出现@charset规则，不允许有其他规则
该属性的最后必须使用分号
支持媒体查询，可以根据不同条件导入不同的样式文件

CSS规则优先级

不同级别中：内联样式 > 内部样式 >外部样式 > 浏览器默认样式

同一级别中：靠后的规则 > 靠前的规则

当使用了@import时，会有一个特殊情况，内部样式和外部样式不区分优先级，哪个在下面哪个优先级高