首页 > 其他分享 >Web前端开发入门学习笔记之CSS 39-40 --新手超级友好版- 文本颜色字体篇

Web前端开发入门学习笔记之CSS 39-40 --新手超级友好版- 文本颜色字体篇

时间:2024-10-12 23:21:52浏览次数:9  
标签:Web 39 颜色 -- text 缩进 对齐 属性

    Foreword写在前面的话:

  大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便我能不断学习和进步。同时,我也会在文章中注明参考的资料,以示对原作者的尊重。

PS:本帖以记录学习心得和课堂笔记为主,没有其他大博主那么专业,但是简单易懂^-^

本贴的其他相关学习笔记资料可以通过订阅专栏获取,喜欢的小伙伴可以多多点赞+关注呀!后续会 持续更新相关资源的~

  课程学习资源:根据b站‘前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址:前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员_哔哩哔哩_bilibili

第三十九课:

文本缩进效果

应用:中文段落开头

属性名:text-indent

属性值:1. 数字+px

                2. 数字+em ( 推荐:1em=当前标签的字号大小)即当字号发生变化时em值也会变化,强调一个适配度。

第二种方法是最常用的!!(反正就记住,之后只要是缩进空格,几个em就是几个空格即可,反正也自动适配)

实现首行缩进两个字的空格:

p{

        text-indent: 2em;

}

然后改变文本的字号,发现空格的缩进仍然适配改变字号后的文本:

所以改变缩进就以em为缩进单位最好。

控制文字的对其方式:文本对齐

属性名:text-align(即横向对齐方式)

属性值:left 左对齐(默认效果不用记)

center 居中对齐

right 右对齐

实际运用中center是最常用的属性值

注意:text-align属性调整的是其内容的对齐方式,并不会影响标签的位置。假如是和

标签,使用网页端的inpsect+鼠标图案功能就会发现,h1标签位置其实并未发生改变。

本质:改变的是内容位置,标签不会被改变。

图片对齐:也是text-align--其属性本质就是改变内容的对齐方式

注意height和width是调整图片的大小尺寸。

控制文字的修饰线:

text-decoration

应用:网页中有下划线的部分一般都是可以网页跳转的部分。

属性值:

none 去掉效果/无效果

underline 下划线

line-through 删除线

overline 上划线

启用文字修饰效果后:

none去掉修饰线和underline加下划线是常用的

第四十课:文字控制属性color

改变文字颜色-四种颜色值写法(不需要记)

应用:网页上的颜色不是通常的red green等

属性名:color

1. 颜色关键字:颜色英文单词--red,green,blue   --学习测试用

2. rgb表示法:rgb(r, g, b)  ---rgb表示红绿蓝三原色,取值0-255 --了解即可

3. rgba表示法:rgba(r, g, b, a) ---a表示透明度,取值0-1 --开发使用

4. 十六进制表示法表示颜色:#RRGGBB ---#000000,#ffcc00, 简写:#000, #fc0 --开发使用

真正工作中使用后三种写法。

rgb写法:

如何看出透明度?给网页加个背景颜色background-color就可以更好地看出color用rgba表示法设定了透明度之后的效果。

rgba写法,最后一个参数值越大越不透明

十六进制表示法(#加上六个字母或数字)表示颜色:0~f之间,颜色从浅到深,每两个未知表示红-绿-蓝

如果每组中字母或者数字相同,可以化简。

#00ff00---可以化简成#0f0

一般从设计师手上拿到的设计稿额颜色都是十六进制表示法的

最后,感谢每一位阅读这篇文章的朋友,你们的反馈对我来说非常宝贵。如果有任何问题或建议,请随时告诉我。让我们一起学习和进步吧!如果您喜欢我的内容,别忘了点赞和关注哦,我会定期分享更多有价值的信息。

标签:Web,39,颜色,--,text,缩进,对齐,属性
From: https://blog.csdn.net/2302_80218188/article/details/142747311

相关文章

  • 线性系统性能分析方法2——根轨迹法
    反馈控制系统的性质取决于闭环传递函数,只要求解出闭环系统的特征根,便能得到系统响应的变化规律。但对于3阶以上的系统求根比较困难。如果系统中有一个可变参数时,求根就更困难了。1948年,伊凡思提出了一种确定系统闭环特征根的图解法——根轨迹法。在已知开环零极点分布的基础上......
  • 线性系统性能分析方法1——时域分析法
    1.典型输入信号2.阶跃响应的时域性能指标c(t)=ct(t)+css(t)=暂态响应+稳态响应2.1暂态性能指标2.2稳态性能指标稳态误差ess:稳定系统误差的终值。即:3.一阶系统的时域分析凡是可用一阶微分方程描述的系统,称为一阶系统。T=RC,为时间常数。其典型传递函数......
  • PostgreSQL学习笔记十二:灾难防范与数据恢复
    在PostgreSQL中可以采取以下方法进行灾难恢复:一、定期备份物理备份使用pg_dump进行逻辑备份,它可以将数据库以SQL文本的形式导出。例如:pg_dump-Uusernamedbname>backup.sql。可以使用工具将备份文件存储到远程位置,如网络存储或云存储。使用pg_basebackup进......
  • android试题编号:2-2-8车载媒体播放 App
    (1)任务描述中控大屏仪表屏幕中间显示媒体组件,组件内上方显示正在播放的媒体信息例如“歌曲名称”“音视频名称”信息栏、“音量显示”。信息栏下方显示播放控制按钮,“播放/暂停”“上一曲下一曲”“音量滑块”“静音”,在操控设备中点击“播放/暂停”,仪表屏中的按钮随之切换“......
  • B. 全排列问题
    时间限制:1s 空间限制:256MB输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字。(注意输出格式)输入n(1<=n<=9)输出由1~n组成的所有不重复的数字序列,每一行一个序列,每个数字前4个空格。样例样例输入13样例输出11......
  • C语言之printf的解析
    一、前言我们学习程序开发的第一个编程基本就是输出。下面我们学习一下的输出函数printf并学习。二、项目实践1.引入库文件#include<stdio.h>2.标准输出标准格式:printf(格式控制字符串,输出列表);#include<stdio.h>intmain(){ printf("helloworld\n"); return0;}执行程......
  • 基于JSP家用电器销售网站的设计与实现
    摘   要利用B/S架构的家用电器电商平台加速了其产品安全的推广和快速发展的步伐。过去的手工操作方式使得管理工作效率极度低下,而当客户数量不断增加时,现有的以手动为主导的管理方法已经不能满足消费者的需求。随著信息化的时代来临,对家用电器电商平台的发展具有深远的意......
  • 彩灯数控音乐盒
    一、项目内容及要求:(1)用数码管显示当前被按下的按键(2)LED流水灯(3)通过按键实现歌曲的切换设计方案阐述:(图1—蜂鸣器)蜂鸣器部分:利用AT89C51的内部定时器使其工作在计数器模式MODE1下,改变计数值TH0及TL0以产生不同频率的方波,驱动喇叭发出不同的音调的音乐,再利用......
  • 在qemu添加基于ast2600的设备
    公司的设备基于aspeed的ast2600.和ast2600-evt还是有不小差距,需要为了多模拟一些数据,需要添加新machine,修改部分设备.修改文件hw/arm/aspeed.c1.添加新的machinepf12, 基于ast2600-evb,提供一个classinit函数staticconstTypeInfoaspeed_machine_types[]......
  • 《csp-j2024初赛真题》 解析
    温馨提醒,以下解析为个人观点,还是得请大佬多多指教(可以喷,但不能说我是复制粘贴!)这篇文章的背景故事:我的那些朋友去给另一个朋友过生日聚会,现在刚刚走回来。那你们知道我为啥不去吗给你们看张珍贵无比的图片: 当然,不止这两张。至于原因,我要回来赶(肝)(干)解析(哭脸)1.32位int......