(四).CSS的基础知识与基本语法

5 CSS 的基本语法

5.1 HTML 和 CSS 的关系

1. HTML 实现页面结构，CSS 实现页面样式
2. CSS 样式一定是作用于某个 HTML 元素上

5.2 HTML 元素树（元素和元素之间的关系）

子元素
后代元素
父元素
祖先元素
兄弟元素

5.3 在 HTML 中使用 CSS

① 行内式

<div style="css代码..."></div>
<p style="width: 600px; border:1px solid #999; padding: 10px;"></p>

② 内嵌式

<style>
    div {
        width: 600px;
        padding: 10px;
        background-color: aquamarine;
        color: blue;
    }
</style>

1. style 标签写在 html 文件中的任意位置，都会生效
2. 建议将 style 标签写在 head 标签中

③ 外链式

将CSS代码写在独立的CSS文件中，HTML中使用link标签进行关联

rel：表示关系 ，href：表示地址
<link rel="stylesheet" href="css文件的位置">

5.4 CSS 基本语法结构

① 内嵌式和外链式的语法结构

选择器：用于选择要设置样式的元素。

声明块：由大括号包裹，由多条声明组成，每条声明用分号结束。

声明：一条声明就对应一个CSS样式，声明有CSS属性和属性值组成后

选择器 {
  属性名:属性值;
  属性名:属性值;
}

② 行内式的语法结构

<标签名 style="css属性名:属性值; css属性名:属性值;"></标签名>

③ HTML 属性 和 CSS 属性

<!-- 使用html属性设置图片大小 -->
<img src="./images/01-小乐.jpg" alt="小乐老师" width="400px" height="400px">
<!-- 使用css属性设置图片的大小 -->
<img src="./images/01-小乐.jpg" alt="小乐老师" style="width: 400px; height: 400px;">

5.5 CSS 的层叠性

通过不同方式为某个元素设置的样式会叠加到一起，称为 CSS 的层叠性

5.6 CSS 注释

    /*
        CSS的注释
    */