html学习以及CSS第一天的学习(3)

简介: html学习以及CSS第一天的学习


3. CSS字体属性

c551da24c10243bb85c2a1bf3950ee03.png

如果属性中有多个字体,那么系统会默认第一种,如果第一种不存在,那么使用第二种,如果设置字体均不存在,那么使用系统自带的字体

085a9974054a4efd92a1a1109e1bcffa.png6378bba00fdb4e85b7830263ad47e0bf.pngf06243ef2be44330b60ca72485994644.png27f79a253ee847d29d10e5d708017fd8.png36ffe3197d6b4a479b2ede465da67ef2.png3e5c2d5940104ac9921914e0fe725ff6.png


4. CSS文本样式

13bf50192fdf4220a8eb513a97eed1d6.png5b9803baceba469f8c3f60036d0c2b35.pngd0744a328f534add9effd6e624fcbdb5.png

注意:文本缩进这个属性只针对文本的第一行而言。具体案例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
</head>
<body>
        <p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城市轨道交通系统。</p>
       <p> 可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤——对很多人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p>
       <p> 那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
</html>

71fdd3a6f57f4ac1b3a2bb0bfa838f33.png

注意:默认情况下,文本高度是16px29df37b03d884b85a3e493451e962931.png

相关文章
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
164 0
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
123 0
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
50 3
|
2月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
70 5
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day01
阿铭学习HTML基础,包括VSCode快捷生成代码、常用标签如head、title、body、img、a、p等的使用,以及CSS选择器的优先级和基本样式设置,适合前端入门学习。
152 12
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
63 2
|
3月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置,如中文语言包、路径提示、Vue开发工具等,同时介绍了通义灵码AI编程助手的使用方法,提升开发效率。
54 1
|
2月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
75 0
|
2月前
|
JavaScript 前端开发 Java
HTML/CSS/JavaScript基础学习day03
本内容为阿铭学习JavaScript的第三天笔记,涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容,适合初学者了解JavaScript编程语言的核心知识点。
73 0
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中