Css入门思维导图

🐱呆呆

2025-04-27

浏览量: 0

开发语言

开发基础

属性介绍

语言概述，语言基础，样式属性相关内容讲解

树图思维导图提供《Css入门》在线思维导图免费制作，点击“编辑”按钮，可对《Css入门》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：ba88887385339d8f67786a8b4a44493a

思维导图大纲

Css概述

认识Css

以html为基础，对网页进行多种样式的操作，例如字体颜色，背景的控制及网页的整体布局和排版等等。

Css发展史

发展至今经历了四个版本

Css基础

Css样式规则

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

引入Css样式表

1、行内式

<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；>

2、内嵌式

3、链入式

4、导入式

Css基础选择器

1、标签选择器

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

2、类选择器

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

3、ID选择器

#id{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

4、通配符选择器

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

5、交集选择器

用于为某些标签单独指定样式，是一种复合选择器

6、并集选择器

使用并集选择器可以为多个标签统一设置相同样式，从而避免代码冗余

7、后代选择器

可以用来控制内部嵌套标签的样式

字体样式属性

字号

p<font-size:12px>

字体

body<font-family:"微软雅黑"，"宋体","黑体",Arialrial>

文字粗细

normal

默认属性值，用于定义标准样式的文字

bold

用于定义粗体文字

holder

用于定义更粗的文字

lighter

用于定义比粗体更粗的文字

100-900(100的整数倍）

用于定义由细到粗的文字

变体

normal

默认值，用于显示浏览器显示的标准字体

small-caps

用于浏览显示小型大写字母

字体风格

normal

默认值，用于显示浏览器显示的标准字体

italic

斜体样式

oblique

显示倾斜的字体样式

综合设置字体样式

选择器{font：font-style font-weight font-size/line-height font-family;}

@font-face规则

@font-face{font-family:字体名称；src：字体路径；}

文本外观属性

文本颜色

使用颜色的英文名称

十六进制颜色值

rgb颜色值

字间距

h2{letter-spacing:20px;}

单词间距

<p class="word">word spicing word spicing(单词间距)</p>

行间距

一般用于类选择器后面 .one{font-size:16px; line-height:18px}

文本转换

none

不进行准换，为默认值

capitalize

首字母转化为大写字母

uppercase

全部字母转换为大写

lowercase

全部字母转化为小写

文本装饰

none

默认值

underline

下划线

overline

上划线

line-through

删除线

水平对齐方式

left

左对齐

right

右对齐

centerj

居中

首行缩进

.one{text-indent:2em;}

空格处理

normal

默认值

pre

按照原书写格式显示，保留空格换行

noerap

空格，换行无效，强制文本不换行，除非使用<br/>标签

阴影效果

选择器{text-shadow：h-shadow v-shadow blur color;}

处理溢出的文本

选择器{text-ovewflow:属性值；}

word-wrap属性

normal

默认值，只允许断字点换行

break-word

在长单词或URL内部换行

列表样式属性

type属性

用于控制列表项目符号类型

image属性

为各个列表项设置列表项目图表，使项目列表更加美观

position属性

inside

使列表项目位于列表内部

outside

使项目列表项目符号位于列表文本外，为默认值

list-style属性

list-style：列表项目符号列表项目符号的位置列表项目图表；

Css的层叠性和继承性

层叠性

css样式具有相互叠加的特性

继承性

子标签会继承父标签的某些特性

Css优先级

继承样式的权重为0

行内样式优先

当权重相同时，css优先级遵循就近原则

使用“！impirtant”命令的标签会被赋予最高优先级

Python爬虫入门思维导图

U275279747

4.09

树图思维导图提供《Python爬虫入门》在线思维导图免费制作，点击“编辑”按钮，可对《Python爬虫入门》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：06f561dd6963bedc948259d62b99f312

Python爬虫入门思维导图

U275279747

1.81

树图思维导图提供《Python爬虫入门》在线思维导图免费制作，点击“编辑”按钮，可对《Python爬虫入门》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：b1ef0c63bb39e2fbc40d88eef8e0c0b3

思维导图模板

IT互联网

产品结构

正文

相似思维导图模版

思维导图模版推荐

2025年市、区分配民微经费1398.6万截至4月25日，街道整体支出531.66万，支付进度38.01%_副本思维导图

2025-04-27 13:23:34

首页

我的文件

我的团队

个人中心

Css入门思维导图

思维导图大纲

相关思维导图模版

Css概述

Css基础

字体样式属性

文本外观属性

列表样式属性

Css的层叠性和继承性

Css优先级

相似思维导图模版

思维导图模版推荐