CSS 的基本语法

HTML 和 CSS 的关系

1. HTML 实现页面结构，CSS 实现页面样式
2. css 样式作用于 html 标签（html 元素）上

 

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

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

 

在 HTML 中使用 CSS

行内式

<div style="CSS代码..."></div>
<p style="CSS代码..."></p>

内嵌式

<style>
	CSS 代码...
</style>

1. style 标签写在任何位置都会生效
2. 建议写到 head 中

 

外链式

<link rel="stylesheet" href="CSS文件地址">

1. 将CSS代码写在独立的css文件中
2. 在HTML中使用 link 标签关联 css 文件

 

CSS 基本语法结构

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

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

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

声明： 一条声明就是一个CSS样式；声明由CSS属性和属性的值组成。

选择器 {
    CSS属性名:属性的值;
    CSS属性名:属性的值;
    CSS属性名:属性的值;
    CSS属性名:属性的值;
    ...
}

选择器 {CSS属性名:属性的值; CSS属性名:属性的值; CSS属性名:属性的值; CSS属性名:属性的值;...}

行内式的语法结构

 

<标签名 style="CSS属性名:属性的值; CSS属性名:属性的值;..."></标签名>

 

 

HTML 属性 和 CSS 属性

 <!-- 使用 HTML 属性设置图片的宽高 -->
<img src="images/05-小乐.jpg" alt="小乐" width="400" height="300">

<!-- 使用 CSS 属性设置图片宽度 -->
<img src="images/05-小乐.jpg" alt="小乐" style="width:400px;height:300px">

 

CSS 的层叠性

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

 

CSS 注释

/* CSS 的注释 */

/* 
    CSS 注释
    CSS 注释
    CSS 注释
    CSS 注释
*/