CSS字体、文本、列表属性样式
2024-05-14 16:15:45
字体样式
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 1lower-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
CSS字体、文本、列表属性样式相关推荐
- CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
- CSS 字体文本样式
文章目录 CSS字体文本样式 字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格 综合简写 ...
- CSS字体的font-family属性和@font-face使用方法
CSS字体的font-family属性: font-family属性一共有5个字体系列,分别是: sans-serif: 包括没有衬线的字体,与serif相比,通常认为sans-serif在计算机屏幕 ...
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- CSS修改默认列表元素样式(1.修改默认元素样式 2.伪元素选择器)
CSS修改默认列表元素样式 1. 修改默认元素样式 <!DOCTYPE html> <html lang="en"><head><meta ...
- CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性 虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
- css字体的分类及样式
一.分类 在网页中将字体分成五大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) ...
- css英文文本转化属性的是,css文本属性_CSS教程_郭隆邦技术博客
CSS文本属性 字体font属性针对的是单个字的字体格式font-family.大小font-size.粗细font-weight等样式, 文本text属性针对的是文本,不是单个字符,比如文本的字符间 ...
- CSS 字体 文本 过渡 盒子初步
12.17 学习笔记 主要内容: 1.CSS字体样式 2.CSS文本样式 3.CSS使用过渡 4.盒子初步 一.CSS字体 1 font-size :字体大小 2.font-family:样式(后加字 ...
- css教程之列表属性
列表属性(相关css教程) CSS属性: 7.列表属性: 这里的属性用来描述列表(list)的一系列属性. list-style-type属性描述用于列表每一项前使用的符号: 属性名称: 'lis ...
最新文章
- windows下DOS命令关闭占用的端口
- Image classification with deep learning常用模型
- nyoj 61 传纸条（一） （双线动归）nyoj 探寻宝藏
- android studio 初次使用Kotlin（环境准备篇）
- 隐藏esp_仅需一分钟教你看懂汽车内的隐藏功能，哪些功能是你不知道的？
- 我的新发现:AVL树旋转的一个特性
- mysql索引级别快慢_面试小点-MySQL 的两种索引方法如何提高查询速度
- python中布尔变量的值为_python 布尔操作实现代码 python是如何定义并使用变量的...
- 访问修饰符 public private protected default
- 第四届中国云计算大会——123
- latex 目录层次设置
- ExtJS视频教程 ExtJS入门到精通教程下载
- 设计三极管放大电路有哪些技巧？尤其是假设
- JAVA面试宝典2018-2019
- 怎样对流媒体进行压力测试_loadrunner流媒体压力测试
- SitePoint播客＃108：Kevin的最后一场演出
- HTML5 实现拼图游戏
- Thinkphp仿众图网图片素材下载站源码+自适应手机端
- 【单片机毕业设计】【mcuclub-jj-035】基于单片机的保险柜的设计
- 台式计算机usb口不能用,电脑usb接口不能用怎么办【图文教程】