欢迎光临散文网 会员登陆 & 注册

CSS20230512

2023-05-13 09:50 作者:Biehmltym  | 我要投稿

# 什么是Css

如何学习

1.CSS是什么

2.CSS怎么用 (快速入门)

3.CSS 选择器(重点 + 难点)

4.美化网页 (文字,阴影,超链接,列表,渐变....)

5.盒子模型

6.浮动

7.定位

8.网页动画 (特效效果)

## 一、什么是CSS

### 1.1、CSS是什么

#### cascading style sheet  层叠级联样式表

html:内容层

css:表现层 美化网页

### 1.2、发展史

- CSS1.0

- CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

- CSS2.1 浮动,定位

- CSS3.0 圆角,阴影,动画.I.浏览器兼容性

### 1.3  css的优势:

#### 1、内容和表现分离

#### 2、网页结构表现统一,可以实现复用

#### 3、样式十分的丰富

#### 4、建议使用独立于html的css文件

#### 5、利用SEO,容易被搜索引擎收录! Vue

#### 6、样式表示例,style标签与css文件 

## 二、CSS怎么用-四种导入方式

 CSS的四种导入方式 

#### 层叠样式表(CSS)可以通过三种方式与 HTML 文档进行关联:

#### 1.内部样式。

在 HTML 的head标签中使用 <style> 标签,将 CSS 样式直接嵌入到 HTML 文件中。

#### 2.外部样式。

在 HTML 的head标签中中使用 <link> 标签,将 CSS 文件与 HTML 文件进行链接。

#### 3.行内样式。

在 HTML的body标签中使用style属性,直接在标签内部添加 CSS 样式。

#### 5、外部样式的第二种import导入方法

 

外部样式

外部样式的两种写法

1head 标签内写link 

2 @import方式导入

## 三、CSS选择器

选择器:选择页面上的某一种/个/类的元素 ,指定样式该应用到哪个元素上而已。

### 1.1、三种基本选择器

#### 1、标签选择器

#### 2、类选择器 class 

#### 3、ld 选择器

#### 4、优先级id>class>标签

   最小原则,id只能作用于一个元素,class是一组,标签是全部

不同优先级的选择器,是覆盖 。

同一优先级,选择器的组合使用示例:

后代选择器:选择所有嵌套在 div 元素内部的 p 元素,并将它们的颜色设置为橘色。

### 1.2层次选择器

#### 1、后代选择器

#### 2、子选择器

#### 3 、向下弟弟

#### 4、通用选择器

### 1.3结构伪类选择器

### 1.4属性选择器(常用)

## 如何学习

## 1.CSS是什么

## 2.CSS怎么用(快速入门)

## 3.CSS选择器(重点+难点)

## 4.美化网页(文字,阴影,超链接,列表,渐变....)

## 5.盒子模型

## 6.浮动

## 7.定位

## 8.网页动画(特效效果)


CSS20230512的评论 (共 条)

分享到微博请遵守国家法律