02-CSS初识

1. CSS介绍

html决定了网页的结构 ，css美化我们的网页

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。

2. CSS引入方式

引入方式：就是我们要把css写在什么地方

2.1 行内样式

借助了所有标签都有的属性style，为当前的元素添加样式声明。

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成

CSS属性：你希望给HTML标签设置的样式名字

值：使用值来控制某个属性显示的效果

style="css属性名:值;css属性名:值;"

常用CSS属性 :

• 设置文本颜色 color:red;
• 设置字体大小 font-size:32px;
• CSS 标点符号都是英文状态下的
• 每一个样式写完之后，最后需要写分号

行内样式特点：

• CSS写在标签的style属性中
• 作用范围：当前标签
  • 不利于我们维护代码，写起来也是非常麻烦的
  • 我们写的样式只对一个标签生效

2.2 内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式

<style>
   	选择器{
   	 	css属性名:值;
        css属性名:值;
   	}
</style>

选择器：在HTML页面当中找到元素

特点：

• CSS写在style标签中
• 作用范围当前页面
• 多个页面上有相同的样式，我们还是要重新在写一边

2.3 外链样式表

创建外部样式表文件 后缀使用.css，在HTML文件中使用<link>标签引入外部样式表

<link rel="stylesheet" href="外部样式表的地址">

特点：

• css写在单独的css文件中，通过link标签引入
• 作用范围：多个文件
• 控制多个页面

三种方式的总结

样式表	优点	缺点	使用情况	使用场景
行内样式表	书写方便	没有实现结构与样式分离，不便于维护，不可以重复利用	极少	某个标签需要单独的样式设置时使用
内嵌样式	部分结构与样式分离，较便于维护	没有彻底实现结构与样式分离，不可以重复利用	一般	css代码量不多，且和当前页面联系紧密不需要复用时使用
外链样式表	完全实现结构与样式分离，可重复利用	如果代码量较少情况下，引入法更麻烦	最多，推荐	css代码量大时，或者需要重复利用时使用

3. CSS选择器

3.1 标签选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

p {
    color: blue;
}

3.2 类选择器

类选择器可以根据标签的class属性，找到具体的HTML标签。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值

.black {
    color: black;
}

3.3 ID选择器

ID 选择器用来找到HTML文档中具有指定ID属性的标签，ID 选择器的定义需要用到井号#，后面紧跟ID属性的值

#nav {
    color: red;
}

3.4 通配符选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML元素中默认的内外边距

* {
    margin: 0 auto;
    padding: 0;
}

3.5 交集选择器

• 结构：选择器1选择器2{css属性名:属性值;}

• 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

• 交集选择器中的选择器之间是紧挨着的，没有东西分隔

  p.box {
      color: red;
  }
  

3.6 分组选择器

• 结构：选择器1 ， 选择器2 {css属性名:属性值;}

• 同时选择多组标签，设置相同的样式

• 并集选择器中的每组选择器之间通过 , 分隔

• 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

  <style>
      p, 
      div, 
      span, 
      h1 {
          color: red;
      }
  </style>
  

3.7 元素关系选择器

子代选择器

• 结构：选择器1 > 选择器2 {css属性名:属性值;}

• 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

  div>a {
      color: red;
  }
  

后代选择器

• 结构：选择器1 选择器2 {css属性名:属性值;}

• 在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式

  div a {
      color: red;
  }
  

相邻兄弟选择器

• 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

  div + p {
      color: red;
  }
  

通用兄弟选择器

• 选中后面所有的兄弟，除了自己

  p ~ p {
      color: pink;
  }
  

1