【CSS】文本样式和列表样式_列表css美观-CSDN博客

文本属性

文本属性概览：
color 为字体指定颜色
font-style 用于打开和关闭斜体文本
font-weight 为字体设置粗细程度
font-size 为文字指定大小
font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
text-decoration 设置或者取消文本修饰（上划线、下划线、删除线）
text-align 文字排列方式
text-indent 文本缩进属性
text-transform 设置或者取消字体改变（大写、小写等）
text-shadow 设置或者取消文本阴影

颜色属性color

设置文本颜色的四种方法：
1、关键字（英文单词）

示例：
color:red;

2、rgb

r 指的是red；g指的是green；b指的是blue

rgb取值为 0-255

示例：
color：rgb(123,0,255);

3、rgba

r 指的是red；g指的是green；b指的是blue；a指的是透明度（取值为 0-1）0表示透明，1表示不透明

示例：
color：rgba（255，0，0，0.6）

4、十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是rgb，十六进制中是通过每两位表示一个颜色。

示例：
color：#ff00ff；

font-style 属性

设置文本倾斜

取值：
normal ：正常的（默认值）
italic : 倾斜的

font-weight 属性

设置文本加粗

取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线（默认值）

数字取值：
100-900之间整百的数字
400 （默认值）
700 等同于 bold
900 等同于 bolder

font-size属性

设置字体大小

font-size：20px；

字体默认大小为16px

font-family 属性

浏览器依次检索电脑自带的字体，如果有就会使用它。

font-family: '楷体','微软雅黑',serif;

当我们的电脑上没有某些字体时，我们可以到https://www.ziti163.com/webfont/这里找
选择我们想要的字体，点击进去之后就有以下内容：
在这里插入图片描述
我们使用的方式也很简单：

<style>
    @font-face{font-family:'ZoomlaMarathon-A069'; /*逐浪马拉松跑步体育运动综艺体*/
    src: url('https://code.z01.com/font/ZoomlaMarathon-A069.eot?#iefix'); /* IE9 */
    src: url('https://code.z01.com/font/ZoomlaMarathon-A069.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://code.z01.com/font/ZoomlaMarathon-A069.woff') format("woff"), /* chrome、firefox */
    url('https://code.z01.com/font/ZoomlaMarathon-A069.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url('https://code.z01.com/font/ZoomlaMarathon-A069.svg#ZoomlaMarathon-A069') format("svg"); /* iOS 4.1- */
    font-style: normal; font-weight: normal;}
    p{
      font-family: 'ZoomlaMarathon-A069';
    }
</style>

<body>
  <p>我是一个段落标签</p>
</body>

font–缩写形式

缩写格式:
font:style weight size family;

示例：
font:italic bold 10px "楷体";

注意：
1、style和weight可以省略，它俩位置也可以调换；
2、size和family不可以省略，它俩位置也不可以调换。

字体图标的使用

目前比较流行的开源字体图标库有：
Iconfont：http://www.iconfont.cn/
Font-awesome：http://fontawesome.dashgame.com/

Iconfont的使用：
1、单色图标的使用
在这里插入图片描述

在这里插入图片描述
下载了代码后，解压缩，将文件夹放到我们的项目当中，然后在head标签中使用link标签引入iconfont.css文件

<link rel="stylesheet" href="./download/font_rngins8a4lg/iconfont.css">

然后在body部分写 i 标签进行使用：

<!-- 一定要添加类名iconfont，第二个类名可以到iconfont.css文件中查看-->
<i class="iconfont icon-jiankangzhibiaojiance"></i>

2、多色图标的使用

同样是选择想要的图标，添加到购物车中
在这里插入图片描述
然后在购物车中点击添加至项目，接下来下载压缩包

同样的，将压缩包解压后放到我们的项目当中，接下来，我们需要在head中使用script标签引入iconfont.js 文件：

<script src="./download/font_3537021_jrxw43cl/iconfont.js"></script>

然后在body标签中：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-hetao"></use>
</svg>

font-awesome 的使用

在这里插入图片描述

然后在body标签中：

<!-- 前面要添加类名fa 第二个类名就是刚刚复制的图标粘贴过来即可 -->
  <i class="fa fa-snowflake-o"></i>

text-decoration 属性

取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

text-align 属性

取值:
left 左对齐
right 右对齐
center 居中对齐

注意：该属性只能用来设置文本的对齐

text-indent 属性

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

text-indent：2em；设置文本首行缩进两个字符

text-transform 属性

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

text-shadow 属性

/* 设置文本阴影  水平偏移方向 垂直偏移方向 阴影模糊距离 颜色*/
text-shadow: 5px 5px 1px red;

浏览器坐标的方向如下图所示：
在这里插入图片描述

列表样式

默认样式

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

list-style-type 属性

设置列表项标志类型

<style>
    /* 设置列表标志项 (前面的小圆点))*/
    ul{
      list-style-type: square;
      /* 设置列表标志项位置 outside默认值*/
      list-style-position: inside;
      /* 自定义列表项 */
      list-style-image: url('./images/03.png');
      /* 缩写 */
      list-style: circle url('./images/01.png') inside;
      /* 取消标志项 */
      list-style: none;
    }
</style>

<body>
  <ul>
    <li>第1个li标签</li>
    <li>第2个li标签</li>
    <li>第3个li标签</li>
  </ul>
</body>