Css入门思维导图
语言概述，语言基础，样式属性相关内容讲解
树图思维导图提供 Css入门 在线思维导图免费制作，点击“编辑”按钮，可对 Css入门 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：ba88887385339d8f67786a8b4a44493a
思维导图大纲
Css入门思维导图模板大纲
Css概述
认识Css
以html为基础，对网页进行多种样式的操作，例如字体颜色，背景的控制及网页的整体布局和排版等等。
Css发展史
发展至今经历了四个版本
Css基础
Css样式规则
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
引入Css样式表
1、行内式
<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；>
2、内嵌式
<style>选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}</style>
3、链入式
<head><link herf="css 文件的路径" type="text/css" rel="stylesheet">
4、导入式
<style>@import url{css文件路径}；</style>
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爬虫入门 在线思维导图免费制作，点击“编辑”按钮，可对 Python爬虫入门 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：06f561dd6963bedc948259d62b99f312
树图思维导图提供 Python爬虫入门 在线思维导图免费制作，点击“编辑”按钮，可对 Python爬虫入门 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：b1ef0c63bb39e2fbc40d88eef8e0c0b3
Copyright©2022-2025 树图网shutu.cn 版权所有|上海聚石塔网络科技有限公司|网站备案号：沪ICP备2021036420号-3|
沪公网安备 31011502019485号|
上海工商