全栈：前端第二周 CSS的开端

目录

什么是CSS

css的语法

外部样式表：

CSS的选择器

css选择器的优先权/权重（优先显示哪种选择器的样式）

---

在第一篇的时候提过前端的三层结构为：结构层，表现层，行为层。分别对应HTML，CSS,JS

我们在前四篇的五天中已经对于结构层，即html阶段已经完成了基本的概述和理解，在此对于前端方面的知识进行一次小小的补充。内容的修改已经在第一篇中，截止目前为止已经完成修改。

全栈：第一天HTML的补充

本篇开始就是三层结构中的表现层，即CSS层叠样式表，该篇较多的是对于CSS的基础和语法的讲解，并不涉及CSS的应用。

同时作为一个承上启下的篇章，该篇的内容页会进行减少。

什么是CSS

CSS的全称为层叠样式表，即层叠（cascading）+样式（style）表（sheets），主要用于定义如何显示html元素。

样式通常储存在样式表中，即在html文件的同级目录下创建一个  XXX.css 文件，通过link去引用该表对html文件进行样式定义，该表的作用是为了将内容和表现分离，方便进行维护。

注：多个样式可以层叠为一个。

css的语法

css有三种用法，分别是：

1.内部样式：通过在head标签中插入style标签使用

2.内部/内联样式：在标签行内通过style属性添加样式

3.外部样式表：通过head标签中插入link标签进行引用外部的css文件

通过选择器指定给某个元素添加样式，每个不同的选择器都有不同的符号来进行选择。

使用通配符选择器的内部样式为： 标签名{ 属性1：属性值；属性2：属性值；}

p
{
    color:red;
    font-size:50px;
 }

除开内部样式还有一个写在html文件下的行内样式（内联样式）

<p style："color:red ； font-size:50px">

外部样式表：

创建一个.css文件，通过link来引用文件

     <link rel="stylesheet" type="text/css" href="样式表.css" >

link标签（链接）中：

 rel属性 （relationship）：定义当前文档与被链接文档之间的关系

 type属性：规定被链接文档的类型

 href属性：定义链接文档的位置

CSS的选择器

1、标签选择器：通过标签名选择元素

2、class（类名）选择器：通过class名选择器

        标签的class属性：给标签/元素通过class属性进行分类，通过  . + 类名 来选择。

        <p class=" 类名">     </p>

3.id选择器：通过id名选择元素

        标签的id属性：给元素/标签添加id属性，id是唯一的，通过 # + id名 来选择。

        <p id=" id名">   </p>    

css选择器的优先权/权重（优先显示哪种选择器的样式）

1、相同类型的选择器：代码自上而下加载，后面的样式会覆盖前面的样式，离被定义样式的元素越近的样式越会优先显示，

2、不同类型的选择器：

！important（10000）>行内样式（1000）>id选择器（100）>class选择器（10）>标签选择器（1）

（ 注：！important 和行内样式在编写大量代码，样式不好进行修改）