TreeMind树图在线AI思维导图
当前位置:树图思维导图模板IT互联网互联网干货CSS样式思维导图

CSS样式思维导图

  收藏
  分享
免费下载
免费使用文件
大灰 浏览量:322022-11-26 14:24:19
已被使用14次
查看详情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 字体颜色

相关思维导图模板

CSS揭秘思维导图

树图思维导图提供 CSS揭秘 在线思维导图免费制作,点击“编辑”按钮,可对 CSS揭秘  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:3a22e1a90e4669a38f53e6ba57d01970

CSS层叠样式表思维导图

树图思维导图提供 CSS层叠样式表 在线思维导图免费制作,点击“编辑”按钮,可对 CSS层叠样式表  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:d6c279c47e937d2b656601c1e1ef2a31