CSS字体、文本、列表属性样式

最新推荐文章于 2024-06-13 23:39:38 发布

fsym_amo

最新推荐文章于 2024-06-13 23:39:38 发布

阅读量369

点赞数

分类专栏： CSS 学习笔记

本文链接：https://blog.csdn.net/weixin_42977865/article/details/108753024

版权

学习笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

字体样式

color 为字体指定颜色

字体颜色的取值 
	关键字 
	RGB 
	6位16进制 
	RGBA 
	HSL 
		H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色 。取值为：0 - 360 
		S：Saturation(饱和度)。取值为0.0% - 100.0%，0% 意味着灰色，而 100% 是全彩，越来越饱和 
		L：Lightness(亮度)。取值为：0.0% - 100.0%，0% 意味着黑色，而 100% 是白色,越来越亮 • 
	HSLA 
		A：Alpha(透明度)。 取值 0~1 之间

font复合属性顺序

按照font-style font-variant font-weight  font-size/line-height font-family顺序来写；
可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
先写字体大小再写字体；
font-size/line-height作为一组使用，中间用斜杠区分；
多个值之间用空格分开；
多个字体之间用逗号分开。

font-variant 把段落设置为小型大写字母字体

p.small
{
font-variant:small-caps;
}

font-size 字体的大小可以被继承

为字体指定文字大小，取值可以为绝对单位或者相对单位

font-weight 为字体设置粗细程度

normal 【默认】正常,400 
bold 加粗字体,700 
lighter 设置当前元素字体比父元素更细 
bolder 设置当前元素字体比父元素更粗 
100–900 数值类型的粗细程度（值越大字体越粗）

font-style 用于打开和关闭斜体文本

normal 【默认】正常字体，关闭斜体
italic 斜体 
oblique 模拟斜体

font-family 字体库，自定义字体库，网络在线字体库

为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体。

取值：通用字体

serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体，笔画结尾是平滑的字体 
monospace 等宽字体，用于代码，字体中每个字宽度相同 
cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。 
fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体

常用字体

Microsoft YaHei 
微软雅黑 
宋体

字体栈

由于我们不能保证我们的字体有效，可以一次性指定多个字体，如果第一个字体无效则使用下一个
字体，以此类推。一般将字体栈中最后一个字体设置为通用字体.
p {font-family: "Microsoft YaHei",arial,sans-serif;}

WebFont 当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。

@font-face { font-family: myfont; 
			src: url(“/fonts/浅浅の奈雪体.woff”),
			 url("/fonts/浅浅の奈雪体.ttf"); }
 .myfont { font-family: myfont; }

  <div class="myfont"> 浅浅の奈雪体 </div>

字体图标

在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那
么我们可以直接使用开源的字体图标库，这些字体图标库使用webFont原理，我们加载一个图标就
好像加载一个字体一样简单，通过控制字体大小，字体颜色来控制图标的大小与颜色。
目前比较流行的开源字体图标库有 
font-awesome http://fontawesome.dashgame.com
iconfont http://www.iconfont.cn/

碎碎念

英语的样式加在汉字上，没有很明显的改变	 
多个用,(逗号)隔开
有汉字，空格所以加单引号（双引号）
谁先写谁生效，谁生效就用谁

line-height 设置文本的行高

取值为绝对单位或者相对单位

文本样式

text-align 文字排列方式

left 左对齐 
center 居中 
right 右对齐

text-transform 允许字体改变，文本变形

none 防止任何改变 
uppercase 将文本转换为大写 
lowercase 将文本转换为小写 
capitalize 将所有单词第一个字母转换为大写 
full-width 转换为类似于一个等宽字体

text-decoration 设置或者取消文本修饰速写属性 line style color

text-decoration-line线的种类

none  取消所有文本修饰 
underline  为文本添加下划线 
overline  为文本添加上划线 
line-through 为文本添加删除线

text-decoration-style 线的样式

solid(实线) 、wavy(波浪线)、dashed(虚线)、dotted(点状线)、double(双实线)

text-decoration-color 颜色

text-shadow 设置或者取消文本阴影

语法： text-shadow: h-shadow v-shadow blur color; 
取值: 
	none   取消所有阴影 
	h-shadow   必需。水平阴影的位置。允许负值 
	v-shadow  必需。垂直阴影的位置。允许负值 
	blur  可选。模糊的距离 
	color  可选。阴影的颜色。
字体加阴影,会看起来立体，but老花眼看阴影，会眼花

列表样式

列表的默认样式

list-style-type 设置列表项标志类型 
list-style-image  自定义设置列表项标志 
list-style-position 设置列表项标志出现的位置 
list-style 列表样式的速记写法  [<type>][<image>][<position>]

list-style-type

设置列表项标志类型 
取值: 
	none No item marker is shown. 
	disc A filled circle (default value) 
	circle A hollow circle 
	square A filled square 
	decimal  Decimal numbers，Beginning with 1
	lower-roman  Lowercase roman numerals，E.g. i, ii, iii, iv, v… 
	upper-roman Uppercase roman numerals，E.g. I, II, III, IV, V… 
	decimal-leading-zero : Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99

list-style-position

设置列表项标志出现的位置 
outside 【默认】列表项标志出现在主块框的外部 
inside 列表项标志出现在主块框的内部

list-style-image

自定义设置列表项标志 
url() 指定图标路径

list-style

列表样式的速记写法 
[<type>][<image>][<position>]

其他样式

cursor

调整光标悬浮到链接上的时候光标的形状 
url 需使用的自定义光标的URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由URL定义的可用光标。鼠标样式栈 url('./images/zhankai.png'),help 
default 默认光标（通常是一个箭头） 
auto 默认。浏览器设置的光标 
pointer 手型 
crosshair十字交叉 
wait 等待 
help 帮助 
move 移动 
text 文本

outline 调整环绕链接的框，

速写属性 类似border,但是不占据屏幕空间 
outline-width  边框线的宽度 
outline-style 边框线的样式 
outline-color 边框线的颜色 
outline-offset 边框线的偏移

display 显示方式

inline 行内显示，宽高无效 
block 块级显示，宽高有效 
inline-block 行内显示同时宽高有效 
none 不显示，不占据屏幕空间

visibility 显示与隐藏

hidden 隐藏，占据屏幕空间 
visible 显示

opacity 透明度

0-1之间的取值，取值为0的时候隐藏，占据屏幕空间

overflow 溢出处理

hidden 超出内容隐藏 
auto   超出产生滚动条 
scroll 滚动条

一些默认样式

ul,ol 元素的margin-top，margin-bottom均为16px(1em) ，padding-left为 40px(2.5em) 
li 元素没有设置默认的空白（行间距） 
dl 元素的margin-top，margin-bottom均为16px(1em)，但是没有内边距 l dd 元素的margin-left为40px(2.5em) 
p 元素的margin-top，margin-bottom为16px(1em) 
body元素 margin-top, margin-bottom, margin-left, margin-right为8px