CSS基础：选择器和声明样式
CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表
CSS用于HTML文档中元素样式的定义
使用css让网页具有美观一致的页面
语法
CSS 规则由两个主要的部分构成：选择器和声明样式
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值，以键值对的形式组成
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
<style>h1{color: blue;font-size: 12px;}
</style>
CSS样式的引入方式
内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
缺乏整体性和规划性，不利于维护，维护成本高
<p style="background: orange; font-size: 24px;">CSS<p>
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表
单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱
<head><style> h1 { background: red; } </style>
</head>
外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部
<link rel="stylesheet" type="text/css" href="xxx.css">
选择器
全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化
*{margin: 0;padding: 0;}
元素/标签选择器
HTML文档中的元素，如p、b、div、a、img、body等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
p{font-size:14px;
}
<p>学完了<span>java</span>，继续学前端</p>
span{color: red;
}
类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用
<h2 class="oneclass">你好</h2>/*定义类选择器*/
<style>.oneclass{width:800px;}
</style>
class属性的特点
- 类选择器可以被多种标签使用
- 同一个标签可以使用多个类选择器。用空格隔开
<h3 class="classone classtwo">我是一个h3啊</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3> // 错误
ID选择器
针对某一个特定的标签来使用，只能使用一次，即id是唯一的。
css中的ID选择器以 # 来定义
<h2 id="mytitle">你好</h2><style>#mytitle{border:3px dashed green;}
</style>
合并选择器
语法：选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码
.header, .footer{height:300px;
}
选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低：
行内样式 > ID选择器 > 类选择器 > 元素选择器