CSS简介、语法和书写方式

一、CSS简介

1、css （层叠样式表）：网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式而最终我们能看到的只有最上边的一层。

2、设置网页中元素的样式：如果要设置css样式，前提1、css书写位置，2、如何选中对应的结构

举个例子开个玩笑简单表述css作用（你要找的事，找对追求目标，然后各种花招追求她）

二、CSS语法

html和css是两种不同的语言，所以有不同的书写位置，也有不同的语法

CSS的语法：选择器 声明块

选择器：如何选中对应的html标签

声明块：就是对应的css样式 名值对结构

举个例子 那标签选择器来说 p { 属性：属性值 }

p就是选择器 花括号和内容就是声明块

三、CSS书写方式

内联样式/行内样式

内联样式/行内样式：在开始标签内，配置style属性，在style属性值里写css样式，可以写多组css样式，样式与样式之间用;隔开

缺点：1、结构和样式耦合 2、不容易修改

总结：不建议使用

例如：

<div style="color:pink;font-size: 50px; background-color: aqua;">
到谓了，切挟身生已。
</div>

内部样式表

内部样式表：在head标签里配置style标签，通过选择器选中对应html结构，在花括号里面设置css声明块，可以写多组样式，也是以;隔开

语法：选择器{css声明块}

缺点：1.不方便复用 2.html文件会变得很长，看起来也不好看

总结：比较大的项目，或者重复使用率比较高的部分，不建议使用

<style>
      div {
        color: pink;
        font-size: 50px;
        background-color: red;
      }
</style>

外部样式表

外部样式表：在html文件外新建一个.css文件，在css文件通过选择器选中对应的结构，设置相关的样式，在head标签内通过link标签，将html文件和css文件联系在一起

总结：大的项目，或者复用率高的，推荐使用

<link rel="stylesheet" href="./03peiqi.css" />

补充

css样式：名值对的结构 样式名:样式值;

font-size: 30px; 设置字体大小

color:red; 设置字体的颜色

background:black; 设置背景颜色