CSS基本语法规则

CSS基本语法

1. 语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

 选择器{
 
         声明1；
         声明2；
         声明3；
         ......
}

关于选择器可以这样理解：谁选择用这个CSS样式

2. CSS选择器有哪些呢？

==###（1）标签选择器：==选择器写法和标签是一致的。
用上标签选择器就表示所选标签会使用统一的CSS样式。那么问题来了：如果有些标签不想使用这个样式怎么办？ 如果有些段落也想用这个样式怎么办？——>肯定要换一个选择器了

==###（2）类选择器:==描述一组元素的样式

可以应用多个class于一个元素中，只需要在多个class之间用空格分开即可。例如<img class="class1 class2">

###（3）id选择器

#green{
color:#00ff00
}
<p></p>
<p id=”green”></p>

id选择器与类选择器的区别：id选择器只能被一个地方引用，类选择器可以被多处引用。

3. CSS怎么用？

###（1）内部样式表：整个HTML页面都可以用这个样式

<style>
p{
font-size:12px;
color:red;
}
</stye>

###（2）内联样式：哪里需要样式就用在哪里

<p style=”color:blue;front-size:30px;”>……</p>

弊端：样式与标签不分离
###（3）外部样式表
创建一个外部的css文件：*css，把全部样式写在这个文件中
在有需要的HTML页面中在引入这个文件即可。

<注>怎么创建？
以Webstorm为例：
先创建一个css文件夹，在创建*css文件


<引入>
链接式<link rel=”stylesheet”href=”样式文件的路径”/>★★★★推荐使用

导入式：

<style>
@import”css/types.css”;(这里的斜杠跟路径的斜杠是相反的)
</style>

link和@import的区别：

• 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

4. CSS选择器优先级

对于同一种样式来说，优先级：
内联样式>内部样式>外部链接样式
ID选择器>类选择器>标签选择器