CSS样式思维导图

大灰

2022-11-26

浏览量: 34

计算机基础语言

层叠样式表

互联网前端语言

WEB前端基础语言CSS层叠样式表——六大样式

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

思维导图大纲

超链接样式

默认样式：

默认情况下：字体为蓝色，带有下划线

鼠标点击时：字体为红色，带有下划线

鼠标单击后：字体为紫色，带有下划线

超链接伪类（要按照顺序进行定义）

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 字体颜色

优化思维导图布局的方法

U477745006

2.51

树图思维导图提供《优化思维导图布局的方法》在线思维导图免费制作，点击“编辑”按钮，可对《优化思维导图布局的方法》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：5b5d5789ba294d7ea1380c84d77562d4

Photoshop图层样式思维导图

U166704136

4.28

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

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

思维导图模版推荐

抖音玩法20200719-第三章内容生产框架：打造高质量高转化内容五大逻辑思维导图

首页

我的文件

我的团队

个人中心