CSS基础选择器与div布局

基础选择器一

全局选择器

可以与任何元素匹配，优先级最低，不推荐使用

*{
   margin: 0;
   padding: 0;
 }

元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{
  font-size:14px;
}

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择

<p>学完了<span>前端</span>，继续学Java</p>
span{
    color: red;
}

温馨提示

1. 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
2. 无论这个标签藏的多深，一定能够被选择上
3. 选择的所有，而不是一个

类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width:800px;
}

class属性的特点

1. 类选择器可以被多种标签使用
2. 类名不能以数字开头
3. 同一个标签可以使用多个类选择器。用空格隔开

<h3 class="classone  classtwo">我是一个h3啊</h3>

基础选择器二

ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle{
   border:3px dashed green;
}

特别强调

1. ID是唯一的
2. ID不能以数字开头

合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

.header, .footer{
  height:300px;
}

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

DIV+CSS布局

优点

1. 符合W3C标准
2. 使页面载入得更快
3. 保持视觉的一致性
4. 修改设计时更有效率
5. 搜索引擎友好

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
<style>
.header {
  height: 100px;
  background-color: #fcc;
}

.content {
  height: 400px;
  background-color: #ff9;
}

.footer {
  height: 100px;
  background-color: #ccf;
}
</style>

<div class="container">
  <div class="header"></div>
  <div class="nav"></div>
  <div class="content">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</div>
<style>
.header {
  width: 100%;
  height: 100px;
  background-color: red;
}
.nav {
  width: 100%;
  height: 50px;
  background-color: pink;
}
.content {
  width:100%;
  height: 300px;
  background-color: yellow;
}
.footer {
  width: 100%;
  height: 150px;
  background-color: deepskyblue;
}
.left {
  width: 33.33%;
  height: 300px;
  background-color: palegoldenrod;
  float: left;
}
.center {
  width: 33.33%;
  height: 300px;
  background-color: palegreen;
  float: left;
}
.right {
  width: 33.33%;
  height: 300px;
  background-color: palevioletred;
  float: left;
}
</style>