css字体和文本样式

最新推荐文章于 2024-09-28 19:02:23 发布

黑马程序员小张

最新推荐文章于 2024-09-28 19:02:23 发布

阅读量491

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/z000802/article/details/123909240

版权

本文详细介绍了CSS中的字体和文本样式，包括字体大小、粗细、样式、字体家族、样式的层叠问题，以及文本缩进、对齐、修饰和行高的设置。此外，还探讨了颜色和标签水平居中的方法。

摘要由CSDN通过智能技术生成

一.字体

1.字体大小

属性名：font-size
取值：数字+px
注意点：
- 谷歌浏览器默认文字大小是16px；
- 单位需要设置，否则无效

 <style>
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 默认字号是16px -->
    <p>段落文字</p>
</body>

2.字体粗细

属性名：font-weight
取值:

关键字：

正常	normal
加粗	bold

出数字：100~900的整百数：

正常	400
加粗	700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中以：正常、加粗两种取值使用最多

<style>
        div {
            font-weight: 700;
        }
        h1 {
            font-weight: 400;
        }
    </style>
</head>
<body>
    <div>这是div</div>
    <h1>这是1级标题</h1>
</body>

3.字体样式(是否倾斜)

属性名：font-style
取值:
- 正常(默认值)：normal
- 倾斜：italic

 <style>
        div {
            font-style: italic;
        }

        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <div>div文字</div>
    <em>张宇杰</em>
</body>

4.字体样式 font-family

属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4....字体系列
- 具体字体：‘Microsoft YaHei’、微软雅黑、黑体、宋体、楷体等.......
- 字体系列： sans-serif无衬线、serif衬线字体、monspace等宽字体等.......

渲染规则：
1. 从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体；
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
1. 如果字体名称中存在多个单子，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示

系统	默认字体
windows	微软雅黑
masOS	苹方

<style>
        div {
            /* font-family:宋体; */
            /* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */
            /* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <div>这是一个div标签</div>
</body>

5.样式的层叠问题

给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
给同一个标签设置了相同的属性，此时样式会层叠(覆盖)，写在最下面的会生效

TIP：

CSS(Cascading style sheets)层叠样式表
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

 <style>
        p {
            /* 层叠性：后面的覆盖前面的属性 */
            /* 覆盖的意思 */
            color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <p>张宇杰666</p>
</body>

6.字体font相关属性的连写

属性名：font(复合属性)
取值：
- font：style weight size family；
省略要求：
- 只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

 <style>
        p {
            /* font-size: ;
            font-style: ;
            font-weight: ;
            font-family: ; */
            /* font:style weight size family */


            /* font: italic 700 66px 宋体;
            font-style: normal; */
            font: 100px 微软雅黑;

            /* 一个属性冒号后面书写多个值的写法 -- 复合属性 */
        }
    </style>
</head>

<body>
    <p>这是一个p标签</p>
</body>

二.文本样式

1.文本缩进：text-indent

属性名：text-indent
取值：
- 数字+px
- 数字+em(推荐：1em = 当前标签的font-size的大小)

<style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进2个字的大小 */
            /* 浏览器默认字号：16px 两个字就是32px */
            /* text-indent: 40px; 
            font-size: 20px;  */

            /* em:一个字的大小 */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
    </p>
</body>

2.文本水平对齐方式

属性名：text-align
取值:

属性值效果
left 左对齐
center 居中对齐
right 右对齐

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：

如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

text-align:center能让哪些元素水平居中
1. 文本
2. span标签、a标签
3. input标签、img标签
注意点：
1. 如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置

    <style>
        h1 {
            /* text-align: left;左对齐 */
            /* text-align：right右对齐 */
            text-align: center;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>新闻标题</h1>
    <img src="./images/1.jpg" alt="">
</body>

3.文本修饰

属性名：text-decoration
取值：

属性值效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
注意点：
- 开发中会使用text-decoration：none；清除a标签超链接默认的下划线

属性值	效果
underline	下划线(常用)
line-through	删除线(不常用)
overline	上划线(几乎不用)
none	无装饰线(常用)

  <style>
        div {
            text-decoration: underline;
        }

        p {
            text-decoration: line-through;
        }

        h2 {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>div</div>
    <p>ppp</p>
    <h2>h2</h2>
    <a href="#">我是超链接，点我啊</a>
</body>

4.行高

作用：控制一行的上下行间距
属性名：line-height
取值：
- 数字+px
- 倍数(当前标签font-size的倍数)

应用：
1. 让单行文本垂直居中可以设置line-height：文字父元素高度
2. 网页精准布局时，会设置line-height：1可以取消上下间距

行高与font连写的注意点：
- 如果同时设置了行高和font连写，注意覆盖问题
- font：style weight size/line-height family；

  <style>
        p {
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>

<body>
<p>
        2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
    </p>
</body>

拓展颜色常见取值

属性名：
- 文字颜色：color
- 背景颜色：background-color

属性值：

颜色表示方法	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow.......
rgb表示法	红绿蓝三原色.每项取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0,0.3).......
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255,255,255,0.5)、rgba(255,0,0,0.3).........
十六进制表示法	#开头，将数字转换成十六进制表示	#000000，#ff0000,#e92322，简写：#000、#f00