CSS----字体、文本样式/列表样式

color 为字体指定颜色

颜色取值可以是对应颜色单词、rgb（0，0，0）里面对应分别是红绿蓝、rgba（255，0，0，0.2）a对应的是后面0.2，这个值的取值范围是0~1。

<style>
//颜色对应的英文单词
color:"red";
//rgb的取值范围0~255
rgb(125,125,125)
//rgba和rgb一样，就多了一个透明度的调节a
rgba(255,255,255，0.2)
</style>

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

格式：font-style: italic;

取值： normal ：正常的，默认就是正常的 italic : 倾斜的

<style>p {font-style:italic;}</style>
<body><p>我是一个段落标签</p>
</body>

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

格式： font-weight: bold;

取值: bold 加粗 bolder 比加粗还要粗 lighter 细线，默认就是细线

数字取值： 100-900之间整百的数字 400 等同于 normal 700 等同于 bold

style>p {/* 设置文字的粗细 */font-weight: bold;      }</style>
<body><p>我是一个段落标签</p>
</body>

font-size 为文字指定大小

格式：font-size: 30px;

单位：px（像素 pixel）

注意点：通过font-size设置大小一定要带单位，也就是一定要写px

<style>p {/* 设置字体大小 */font-size: 20px;}</style>
<body><p>我是一个段落标签</p>
</body>

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

格式：font-family:"楷体";

通用字体 (直接使用，不需要加引号)

serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线

sans-serif:无衬线的字体，笔画结尾是平滑的字体

monospace:等宽字体，用于代码，字体中每个字宽度相同

cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。

fantasy:装饰字体，具有特殊艺术效果的字体

注意点：

1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加

2.设置的字体必须是用户电脑里面已经安装的字体

3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体

 <style>p {  /* 字体设置 */font-family: serif;}</style>
<body><p>我是一个段落标签</p>
</body>

text-decoration 设置或者取消文本修饰

格式:text-decoration: underline;

取值:

underline 下划线

line-through 删除线

overline 上划线

none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

<style>a{text-decoration: none;}</style><body><a href="">点我</a>
</body>

text-align 文字排列方式

格式: text-align: right;

取值: left 左 right 右 center 中

<style>div {text-align: center;}</style>
<body><div><h2>Hello text-align</h2></div>
</body>

text-indent 文本缩进属性

格式: text-indent: 2em;

取值: 2em, 其中是em单位, 一个em代表缩进一个文字的宽度

<style>div p {text-indent: 2em;}</style>
<div><p>hellohellohellohellohellohellohellohellohellohellohellohellohellohello</p></div>

text-transform 设置或者取消字体改变

用于使文本显示为全大写或全小写

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

none: 防止任何改变

uppercase: 将文本转换为大写

lowercase: 将文本转换为小写

capitalize: 将所有单词第一个字母转换为大写

full-width: 转换为类似于一个等宽字体

<style>div p {text-transform: uppercase;}</style><div><p>hellohellohellohellohellohellohellohellohellohellohellohellohellohello</p></div>

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

格式: text-shadow: h-shadow v-shadow blur color;

取值:

none:取消所有阴影

h-shadow :必需。水平阴影的位置。允许负值。

v-shadow :必需。垂直阴影的位置。允许负值。

blur:可选。模糊的距离。

color:可选。阴影的颜色。

<style>div p {text-shadow: 2px 2px rebeccapurple;font-size: 20px;text-align: center;}</style><div><p>hello</p></div>

列表样式

list-style-type 设置列表项标志类型

取值:

none : 没有样式

disc :实心圆

circle :空心圆

square : 方块

 <style>div ul {list-style: circle;}</style><div><ul><li>1</li><li>2</li><li>3</li></ul></div>

list-style-position 设置列表项标志出现的位置

取值:

outside : 列表项标志出现在主块框的外部

inside : 列表项标志出现在主块框的内部

<style>div ul li {border: 1px solid rebeccapurple;list-style: circle;list-style-position: inside;}</style>
<div><ul><li>1</li><li>2</li><li>3</li></ul></div>

list-style-image 自定义设置列表项标志

取值: url() : 指定图标位置

<style>div ul li {list-style-image: ul("图片路径");}</style>
<div><ul><li>1</li><li>2</li><li>3</li></ul></div>

其他样式

-line-height

设置文本的行高取值为绝对单位或者相对单位

<style>div {border: 1px solid rebeccapurple;height: 100px;text-align: center;background-color: aqua;line-height: 100px;}</style>
<div><p>hello 其他样式</p></div>

- display

显示方式的切换

inline 行内显示，宽高无效

block 块级显示，宽高有效

inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素，行内显示同时宽高有效

none 不显示，不占据屏幕空间

flex 伸缩盒布局

<style>.div1 {border: 1px solid rebeccapurple;height: 100px;width: 100px;background-color: aqua;display: inline-block;}.div2 {display: inline-block;border: 1px solid red;height: 200px;width: 200px;background-color: tomato;}</style>
<body><div class="div1"></div><div class="div2"></div>
</body>

- visibility

显示与隐藏

hidden 隐藏，占据屏幕空间

visible 显示

<style>.div1 {border: 1px solid rebeccapurple;height: 100px;width: 100px;background-color: aqua;display: inline-block;visibility: hidden;}.div2 {display: inline-block;border: 1px solid red;height: 200px;width: 200px;background-color: tomato;}</style><body><div class="div1"></div><div class="div2"></div>
</body>

- opacity

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

 <style>.div1 {border: 1px solid rebeccapurple;height: 100px;width: 100px;background-color: aqua;display: inline-block;}.div2 {display: inline-block;border: 1px solid red;height: 200px;width: 200px;background-color: tomato;opacity: 0.2;}</style>
<body><div class="div1"></div><div class="div2"></div>
</body>

- overflow 溢出处理

hidden 超出内容隐藏

auto 超出产生滚动条

scroll 滚动条

<style>.div1 {border: 1px solid rebeccapurple;height: 100px;width: 100px;background-color: aqua;overflow: auto;}.div1>div {width: 50px;height: 50px;background-color: brown;}</style>
<body><div class="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>

- cursor

指定光标的样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS----字体、文本样式/列表样式相关推荐

CSS 字体文本样式
文章目录 CSS字体文本样式字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格综合简写 ...
css字体的分类及样式
一.分类在网页中将字体分成五大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) ...
CSS入门七：列表样式（主要是列表前面序号的样式，圆圈、方框，罗马序号，图片等等）
目录 1.列表样式的属性: ● 1.list-style-type:序号变成,空心圆.方框.数字,拉丁字母等等 ● 2.list-style-position:列表位置的"看起来像缩进的&q ...
CSS 字体文本过渡盒子初步
12.17 学习笔记主要内容: 1.CSS字体样式 2.CSS文本样式 3.CSS使用过渡 4.盒子初步一.CSS字体 1 font-size :字体大小 2.font-family:样式(后加字 ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
2.css字体文本属性
一.字体风格 font-family 字体(比如宋体,微软雅黑) font-size 字体大小 font-weight 字体粗细(700加粗,400正常) font-style 字体风格(normal ...
WEB安全之DIV CSS基础（二）：文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性文字属性文本属性列表样式和伪类超链接项目符号列举设置列表项标记超链接文字和文本的属性文字 ...
HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性在CSS中如何通过color属性来修改文字颜色英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...

CSS----字体、文本样式/列表样式

列表样式

CSS----字体、文本样式/列表样式相关推荐

最新文章

热门文章