CSS基本语法与基本选择器

CSS

什么是CSS?
CSS的基本语法
- 行内样式
- 内部样式表
- 外部样式表
- 样式优先级
CSS基本选择器
- 标签选择器
- 类选择器
- ID选择器
- 三种选择器的优先级

什么是CSS?

css全称为层叠样式表或级联样式表。
用于HTML中，对元素设置样式。

CSS的基本语法

CSS规则由两个部分构成，即选择器和声明。
声明必须放在一对大括号“{ }”中，可以是一条或多条。
每条声明由属性和值的组成，属性和值之间用冒号分开，每条声明以英文分号结尾。选择器 {属性1:值1; 属性2:值2; …}
例如

h1{font-size: 12px;color: black;
}

在html中引入css样式需要用到<style>标签。
<style>标签位于<head>标签中。
在HTML中引入CSS有三种引入方式

行内样式
内部样式表
外部样式表

行内样式

就是直接把CSS代码添加到HTML标签中。使用style属性是改变所有HTML元素样式的通用方法。用法如下：

<h1 style="color: yellow;font-size: 30px;">行内样式</h1>

这种方式仅对当前的HTML标签起作用,并且是写在HTML标签中的，因此这种方式不能使内容与表现相分离，本质上没有体现CSS的优势，因此不推荐使用。

内部样式表

如前面讲到的示例一样，把CSS代码写在<head>的<style>标签中，与HTML内容位于同一个HTML文件中，这就是内部样式表。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内部样式表</title><style>h1{font-size: 12px;color: black;}</style></head><body><h1>内部样式表</h1></body></html>

这种方式便于在同页面中修改样式，但不利于在多页面间共享及维护复用代码，对内容与样式的分离也不够彻底。

外部样式表

链接外部样式表就是在HTML页面中使用 <link> 标签链接外部样式表， <link> 标签要放在页面的 <haed> 标签内，语法如下：

    <head>......<link rel="stylesheet" href="css/base.css" type="text/css">......</head>

其中，rel=“stylesheet” 是指在页面中使用这个外部样式表。type=“text/css” 是指文件的类型是样式表文本，这个属性其实是可以省略的。href=“css/base.css” 是指文件所在的位置。

外部样式表实现了样式和结构彻底分离，一个外部样式可以应用于多个页面。当改变这个外部样式表文件时，所有页面的样式都会随之改变。这样不仅减少了重复的工作量，也利于保持网站的统一样式和网站维护。同时减少了用户浏览网页时的代码下载量，提高了网站的运行速度。

代码示例如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>链接外部样式表</title><link rel="stylesheet" href="css/base.css"></head><body><h2>清平乐</h2><hr><p>年年雪里,常插梅花醉,尽梅花无好意,赢得满衣清泪!</p><p>今年海角天涯,潇潇两鬓生华.</p><p>看取晚来风势,故应难看梅花.</p></body></html>

base.css文件代码如下

h2 {font-size: 20px;color: red;
}
p {font-size: 16px;color: black;
}

浏览器中的效果：

样式优先级

CSS的全称是层叠样式表，对于页面中的某个元素，允许同时应用多个样式（即叠加），页面元素的最终样式即为多个样式的叠加效果。但这存在一个问题——当同时应用上述三类样式时，页面元素将同时继承这样的样式，如果样式之间存在冲突，应该继承哪种样式呢？

这里只需要记住优先级是遵循 “就近原则” 哪种样式离修饰的标签近，就继承哪种。行内样式一定优先于内部样式表、外部样式表，因为行内样式就写在标签里。而内部、外部样式表就看谁离标签近就继承谁。

CSS基本选择器

在CSS中，有三种最基本的选择器，分别是标签选择器、类选择器和ID选择器。

标签选择器

顾名思义就是直接选择HTML中的标签名称，如<h1>~<h6>、<p>、<img>等。对其进行声明。
例如，h2选择器用于声明页面中所有<h2>标签的样式风格。同样，p选择器用于声明页面中所有<p>标签的样式风格。
例如：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>标签选择器的用法</title><style>h2{color: red;}p{color: blue;font-size: 16px;}</style></head><body><h2>清平乐</h2><hr><p>年年雪里,常插梅花醉,尽梅花无好意,赢得满衣清泪!</p><p>今年海角天涯,潇潇两鬓生华.</p><p>看取晚来风势,故应难看梅花.</p></body></html>

以上示例中的CSS代码声明了HTML页面中的所有<h2>标签和<p>标签。每个CSS标签选择器都包含选择器本身、属性和值，其中属性可以设置多个。

类选择器

标签选择器一但声明，页面中所有该标签都会相应的发生变化。以上文的代码为例，当声明了<p>标签为蓝色时，页面中的所有<p>标签都将显示为蓝色。如果希望其中一个<p>标签不是蓝色，而是绿色，仅靠标签选择器是不够的，还需要引入类（class）选择器。
语法如下：

.color{font-size: 25px;color: green;}

定义

以点（.）开头，类名可自定义
使用

在需要该样式的HTML标签中，通过class="类名"来应用

类选择器是网页中最常用的一种选择器，设置了类选择器后，只要页面中某个标签需要相同的样式，直接使用class属性调用即可。类选择器在同一个页面中可以频繁使用，应用起来非常方便。

ID选择器

ID选择器的使用方法于类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强。ID就相当于身份证，不可重复且唯一。当然，你给两个标签设置相同的ID属性也不犯法，它也会相对于的显示，但是为了规范，防止出错，一个ID只用一次，不要重复使用，且名字也不要重复。

#index{font-size: 25px;color: green;
}

定义

以井号（#）开头，ID可自定义
使用

在需要该样式的HTML标签中，通过id="ID"来应用

注意！ CSS选择器命名以及使用规范：

使用小写英文字母；

不要和ID选择器同名；

使用具有语义化的单词命名；

长名称或词组可以使用驼峰命名方式；

ID选择器在页面中只能使用一次，也就是说在同一个页面中同一个id属性只能设置一次；而类选择器可以在页面中多次使用。

三种选择器的优先级

选择器的优先级和样式优先级不同，不遵循“就近原则”，无论使用哪种方式引入CSS样式，一般都遵循：ID选择器 > class类选择器 > 标签选择器。