CSS样式思维导图
WEB前端基础语言CSS层叠样式表——六大样式
树图思维导图提供 CSS样式 在线思维导图免费制作，点击“编辑”按钮，可对 CSS样式 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：40a1a3794d9a3a8e7d7fefb4fe87846b
思维导图大纲
CSS样式思维导图模板大纲
超链接样式
默认样式：
默认情况下：字体为蓝色，带有下划线
鼠标点击时：字体为红色，带有下划线
鼠标单击后：字体为紫色，带有下划线
超链接伪类（要按照顺序进行定义）
a:link 定义a元素未访问的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过a元素的样式（适用于任何元素）
a:active 定义鼠标单击激活的样式
鼠标样式
浏览器鼠标样式
使用cursor属性定义：cursor：数值；
常用：default pointer text
自定义鼠标样式
cursor：url（图片地址），属性值；
图片是.cur文件
属性值取值：default pointer text
背景样式
背景图片样式属性
background-image 背景图片地址
语法：background-image url（图片地址）；
background-repeat 定义背景图片重复方式，如纵向重复、横向重复
repeat 在水平方向和垂直方向上同时平铺（默认值）
repeat-x 在水平方向平铺
repeat-y 在垂直方向平铺
no-repeat 不平铺
background-position 定义背景图片位置
语法：background-position：水平距离 垂直距离；
取值
像素值
关键字
top left
top center
top right
left center
center center
right center
bottom left
bottom center
bottom right
background-attachment 定义背景图片是否随元素滚动
scroll 随元素滚动（默认值）
fixed 固定不动
背景颜色属性 background-color
简写：background
图片样式
图片大小 width，height
图片边框 border
图片对齐
水平对齐 text-align（在图片的父元素定义）
left
right
center
垂直对齐 vertical -align （定义：vertical-align 属性定义周围的行内元素或文本相对与该元素的垂直方式）
top 顶部对齐
bottom 底部对齐
baseline 基线对齐
middle 中部对齐
文字环绕 float
left
right
表格样式
caption-side 表格标题位置（在table元素中定义）
top 标题在顶部（默认值）
bottom 标题在底部
border-collapse 表格边框合并（在table元素中定义）
separate 边框分开，有空隙（默认值）
collapse 边框合并，无空隙
border-spacing 表格边框间距（在table元素中定义）
列表样式
列表项符号：list-style-type
取值---有序列表
decimal 阿拉伯数字：1、2、3...（默认值）
lower-roman 小写罗马数字：i，ii，iii...
upper-roman 大写罗马数字：I、II、III...
lower-alpha 小写英文字母：a，b，c...
upper-alpha 大写英文字母：A，B，C...
取值---无序列表
disc 实心圆 ●
circle 空心圆○
square 正方形■
取值---none
去除列表项符号
列表项图片：list-style-image
list-style-image:url（图片路径）
边框样式
整体样式
想要为一个元素定义边框样式，必须同时设置border-width，border-style，border-color才会有效果
border-width 定义边框的宽度
border-style 定义边框的外观
none 无样式
dashed 虚线
solid 实线
border-color 定义边框的颜色
简写：border:1px solid red；
局部样式
border-top
border-bottom
border-left
border-right
文本样式
text-indent 首行缩进
text-indent ：像素值；
text-align 水平对齐
left 左对齐
right 右对齐
center 居中对齐
text-decoration 文本修饰
none 去除所有的划线效果
underline 下划线
line-through 中划线
overline 下划线
text-transform 大小写转换
none 无转换（默认值）
uppercase 转换为大写
lowercase 转化为小写
capitalize 只将每个英文单词首字母转换为大写
line-height 行高
letter-spacing 字母间距
word-spacing 词间距（针对于英文单词）
字体样式
font-family 字体类型
可以指定多个字体；不定义默认是宋体
font-size 字体大小
font-weight 字体粗细
取值
100-900的数值（不建议）
关键字
normal 正常（相当于数值400）
lighter 较细（相当于数值100）
bold 较粗（一般只用这个）（相当于数值700）
bolder 很粗（相当于数值900）
font-style 字体风格
normal 正常
italic 斜体
oblique 斜体
有的字体有italic 属性，有的字体没有。oblique让没有italic 属性的字体也能有斜体效果
color 字体颜色
相关思维导图模板
树图思维导图提供 优化思维导图布局的方法 在线思维导图免费制作，点击“编辑”按钮，可对 优化思维导图布局的方法 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：5b5d5789ba294d7ea1380c84d77562d4
树图思维导图提供 Photoshop图层样式思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 Photoshop图层样式思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f61c1d38880d71944392214d091e0ca4
沪公网安备 31011502019485号
上海工商