CSS基础入门

1.官方文档

1.CSS 指的是层叠样式表* (Cascading Style Sheets)

2.地址: https://www.w3school.com.cn/css/index.asp

2.为什么需要 CSS

1.在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。

2.使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)

3.CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面

3.CSS快速入门

1.应用实例 simple_css.html, 使用 css 完成下面页面

1. 需求: 创建simple_css.html 完成如下网页显示

hello, 北京


hello, 上海


hello, 天津

4.CSS 语法

1.CSS 语法可以分为两部分： (1)选择器 (2)声明

2.声明由属性和值组成，多个声明之间用分号分隔

3.说明：最后一条声明可以不加分号(建议加上)

4.一般每行只描述一个属性

5.CSS 注释：/*注释内容*/, 类似 java

5.常用样式-字体颜色

1.介绍

颜色可以写颜色名 比如 green，也可以写 rgb 值(三原色) 比如 rgb(200,200,200)和十六进制表示
值 比如 #708090

2.应用实例 color.html

1.修改 color.hml, 完成如下页面.

css 颜色字体

6.常用样式-边框 border

1.应用实例 border.html

1.修改 border.html, 完成如下页面.

css border

7.常用样式-宽度 width/高度 height

1.介绍

宽度/高度像素值：100px； 也可以是百分比值：50%；

2.应用实例，看前面案例

css border

8.常用样式-背景颜色

1.应用实例 bg.html

1.需求: 编写代码，修改 bg.html 显示如下网页.

css backgroundcolor

9.常用样式-字体样式

1.介绍

1. font-size: 指定大小，可以按照像素大小
2. font-weight : 指定是否粗体
3. font-family : 指定类型

2.应用实例 font-style.html

1. 需求, 修改 font-sytle.html , 显示如下网页

2. 代码实现

css 字体样式

10.常用样式-DIV 居中

1.应用实例 div-center.html

1. 需求，修改 div-center.html, div 居中效果

css 字体样式 div居中显示

11.常用样式-文本居中

1.应用实例 text-center.html

1.需求，修改 text-center.html , 显示如下网页

2.代码实现

文本内容居中显示

12.常用样式-超链接去下划线

1.应用实例 link_none.html

1.需求，修改 link_none.html, div 居中效果

2.代码实现

点击到百度

13.常用样式-表格细线

1.应用实例 table-collapse.html

1.需求，修改 table-collapse.html, 实现如下效果

2.代码实现

星期一菜谱
素菜
青草茄子
花椒扁豆
小葱豆腐
炒白菜
荤菜
油闷大虾
海参鱼翅
红烧肉
烤全羊

14.常用样式-列表去修饰

1.应用实例 ul-none.html

1.需求，修改 ul_none.html, 完成如下网页显示

2.代码实现

三国演义
红楼梦
西游记
水浒传

15.CSS 使用三种方式

1.方式 1：在标签的 style 属性上设置 CSS 样式

1.应用实例 修改 1.use-css-style.html , 看使用效果

hello, 北京


hello, 上海


hello, 天津

2. 问题分析

• 标签多了。样式多了，代码量庞大
• 可读性差
• CSS 代码没有复用性

2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式

1.应用实例 修改 2.use-css-style.html , 看使用效果

hello, 北京


hello, 上海


hello, span

问题分析

• 只能在同一页面内复用代码维护不方便，
• 实际项目中会有很多页面，需要到对应页面去修改。工作量大

3.方式 3：把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

1.应用实例 创建 test.css 和 修改 3.use-css-style.html , 演示使用

div {width: 200px;height: 100px;background-color: red;
}
span {border: 2px dashed blue;
}

hello, 北京~


hello, 上海


hello, span

2.第三种方式是我们推荐使用的.

16.CSS 选择器

1.CSS 元素选择器

1. 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
2. CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等
3. 比如:

4. 应用实例 修改 element-selector.html

2.ID 选择器

1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
2. id 选择器以 “#” 来定义。
3. 比如:

4. 应用实例 修改 id-selector.html, 演示使用

   

llp
hello, world~

3.class 选择器（类选择器）

1. class 类选择器，可以通过 class 属性选择去使用这个样式
2. 基本语法

3. 应用实例 修改 class-selector.html,演示如何使用

llp
llp1110
hello, world~

4.组合选择器

1. 组合选择器可以让多个选择器共用同一个 css 样式代码
2. 语法格式

3. 应用实例 修改 all-selector.html, 演示如何使用

llp1110
hello, world~

5.优先级说明

行内样式 > ID 选择器 > class 选择器 > 元素选择器