2024/1/28CSS学习:基础认知;选择器;文本样式

一、基础认知

1.1层叠样式表

作用:样式美观,给Html美化

1.2语法规则

写在style标签里面

选择器——找标签使用

属性名:属性值;

2.1CSS引入方式

1.内嵌式

CSS 写在style标签中

提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中

2.外联式

 CSS 写在一个单独的.css文件中

提示: 需要通过link标签在网页中引入

3.行内式

行内式: CSS 写在标签的style属性中

提示:基础班不推荐使用,之后会配合js使用

二、基础选择器

1.1 标签选择器

标签名{CSS属性名: 属性值;}

作用: 通过标签名,找到页面中所有这类标签,设置样式

注意点:

1.标签选择器选择的是一类标签,而不是单独某一个(选中所有的标签

2.标签选择器无论嵌套关系有多深,都能找到对应的标签

好处:可以一下弄一堆

课上简单的案例用内嵌式

1.2类选择器

.类名{CSS属性名:属性值;}

作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

注意点:

1. 所有标签上都有class属性,class属性的属性值称为类名 (类似于名字)

2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头

3.一个标签可以同时有多个类名,类名之间以空格隔开

4.类名可以重复,一个类选择器可以同时选中多个标签

1.3id选择器

结构:#id属性值{ css属性名: 属性值; }

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

1.所有标签上都有id属性

2.id属性值类似于身份证号码,在一个页面中是唯一的不可重复的!

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

1.4通配符选择器

结构:*(css属性名: 属性值;}

作用:找到页面中所有的标签,设置样式

常用于清除行间距(格式化)

注意点:

1.开发中使用极少,只会在极特殊情况下才会用到

2.在基础班小页面中可能会用于去除标签默认的margin和padding (后续讲解)

三、字体和文本样式

1.文字样式

1.1字体大小

属性名:font-size

取值:数字+px

注意点:

  • 谷歌浏览器默认文字大小是16px
  • 单位需要设置,否则无效

1.2字体粗细

属性名:font-weight

取值:

  • 关键字

正常:normal

加粗:bold

  • 纯数字:100~900的整百数

正常:400

加粗:700

注意点:

  • 不是所有字体都提供了九种粗细,因此部分取值页面中无变化
  • 实际开发中以:正常、加粗两种取值使用最多

1.3字体粗细

属性名: font-style

取值:

正常(默认值):normal

倾斜: italic

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/359915.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

交叉注意力融合时域、频域特征的FFT + CNN-Transformer-CrossAttention轴承故障识别模型

目录 往期精彩内容: 前言 1 快速傅里叶变换FFT原理介绍 第一步,导入部分数据 第二步,故障信号可视化 第三步,故障信号经过FFT可视化 2 轴承故障数据的预处理 2.1 导入数据 2.2 制作数据集和对应标签 3 交叉注意力机制 …

C++初阶:入门泛型编程(函数模板和类模板)

大致介绍了一下C/C内存管理、new与delete后:C初阶:C/C内存管理、new与delete详解 我们接下来终于进入了模版的学习了,今天就先来入门泛型编程 文章目录 1.泛型编程2.函数模版2.1概念2.2格式2.3函数模版的原理2.4函数模版的实例化2.4.1隐式实例…

新书速览|Python数据科学应用从入门到精通

系统教授数据科学与Python实战,涵盖线性回归、逻辑回归、决策树、随机森林、神经网 本书内容 随着数据存储、数据处理等大数据技术的快速发展,数据科学在各行各业得到广泛的应用。数据清洗、特征工程、数据可视化、数据挖掘与建模等已成为高校师生和职场…

教你如何轻松浏览OSGB倾斜摄影三维模型

倾斜摄影测量技术发展至今,已经属于一项成熟度很高的技术。但对于倾斜摄影三维模型数据如何展示,如何与业务进行结合一直是行业比较苦恼的事情。下面我会教大家通过四维轻云实现倾斜摄影三维模型数据的编辑、展示及分享。 一、平台登录 在四维轻云官网…

鸿蒙系统扫盲(七):勘误补充总结,收个尾

这是笔者鸿蒙扫盲系列的最后一篇了,准备对过去的六篇扫盲系列文章,错误的地方做一些勘误,并且补充更新一些朋友们感兴趣的知识,最后收个尾。 1.勘误,编译型语言和解释型语言 在鸿蒙系统扫盲(五&#xff0…

32GPIO输入LED闪烁蜂鸣器

一.GPIO简介 所有的GPIO都挂载到APB2上,每个GPIO有16个引脚 内核可以通过APB2对寄存器进行读写,寄存器都是32位的,但每个引脚端口只有16位 驱动器用于增加信号的驱动能力 二.具体…

如何将数据转化为可操作的业务洞察_光点科技

在数字化的商业环境中,企业被海量的数据所包围。从社交媒体互动、销售交易记录到客户反馈,每一项数据都蕴含着潜在的业务价值。然而,数据本身并不能直接为企业带来改变,它需要被转化为可行的业务洞察,才能指导实际的决…

来聊聊SSL证书申请流程

第一步:选择合适的SSL证书类型 在申请SSL证书之前,您需要选择适合您网站需求的SSL证书类型。一般分为单域名证书、多域名证书和通配符证书等。根据您的网站结构和需求选择合适的证书类型。 第二步:准备必要的证书申请材料 在申请SSL证书时&…

用Python库pillow处理图像

入门知识 颜色。如果你有使用颜料画画的经历,那么一定知道混合红、黄、蓝三种颜料可以得到其他的颜色,事实上这三种颜色就是美术中的三原色,它们是不能再分解的基本颜色。在计算机中,我们可以将红、绿、蓝三种色光以不同的比例叠加…

类和对象 第六部分 继承 第一部分:继承的语法

一.继承的概念 继承是面向对象的三大特性之一 有些类与类之间存在特殊的关系,例如下图: 我们可以发现,下级别的成员除了拥有上一级的共性,还有自己的特性,这个时候,我们可以讨论利用继承的技术,…

LeetCode.2670. 找出不同元素数目差数组

题目 题目链接 分析 一种暴力的方法,枚举数组所有数字,分别计算当前元素前面不同的元素和后面不同的元素,然后相减即可。这样的话太暴力,前缀和后缀也需要分别遍历:O(N*2)了。 我们来优化一下: 根据这种…

【HarmonyOS应用开发】UIAbility实践第一部分(五)

一、UIAbility概述 1、UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互。UIAbility也是系统调度的单元,为应用提供窗口在其中绘制界面。 2、每一个UIAbility实例,都对应于一个最近任务列表中的任务。 3、一个应用可以有一个UI…

阿里云服务器租用价格 2024年新版活动报价及租用收费标准参考

阿里云服务器租用价格是多少?阿里云服务器价格由云服务器配置、实例规格、带宽等组成,进入2024年,阿里云继续推出各种云服务器优惠政策。轻量应用服务器2核2G 61元1年,每天只需0.16元,2核4G 165元1年,每天不…

IDEA:git 回滚本地提交-git 选择 Reset Current Branch to

前言 回滚提交到本地但是还没有 Push 上去的提交 选择我们要回滚的节点,然后点击 git 选择 Reset Current Branch to… 再选择 Hard 。当我们点击 Reset 的时候,代码就会回滚到单前选中的这个版本

Centos 7.9 在线安装 VirtualBox 7.0

1 访问 Linux_Downloads – Oracle VM VirtualBox 2 点击 ​the Oracle Linux repo file 复制 内容到 /etc/yum.repos.d/. 3 在 /etc/yum.repos.d/ 目录下新建 virtualbox.repo,复制内容到 virtualbox.repo 并 :wq 保存。 [rootlocalhost centos]# cd /etc/yum.rep…

Redis -- 常用数据结构,认识数据类型和编码方式

"人生就像骑自行车,要保持平衡,就必须保持前进。" — 爱因斯坦 说到数据结构,或许就能想到哈希表,列表集合等数据结构。对于redis来说对应的key的value的形式也可以是这些数据结构,如下: 针对上面…

vxe-table3.0的表格树如何做深层查找,返回搜索关键字的树形结构

vxe-table2.0版本是提供深层查找功能的,因为他的数据源本身就是树形结构,所以深层查找查询出来也是树形结构。 但是vxe-table3.0版本为了做虚拟树功能,将整个数据源由树形垂直结构变成了扁平结构,便不提供深层查询功能&#xff0c…

STM32——USART

一、通信 1.1通信是什么; 通信是将一个设备的数据发送到另一个设备中,从而实现硬件的扩展; 1.2通信的目的是什么; 实现硬件的扩展-在STM32中集成了很多功能,例如PWM输出,AD采集,定时器等&am…

关于maven项目构建的解释

在Idea中使用模块化构建项目 项目介绍: sky-take-out sky-common pom.xml sky-pojo pom.xml sky-server pom.xml pom.xml 说明 sky-server依赖sky-pojo和sky-common,继承sky-take-outsky-pojo继承sky-take-outsky-common继承sky-take-out 由于Idea编…

IntelliJ Idea实用插件推荐

目录 一、插件安装 二、常用插件 A、代码规范 Alibaba Java Coding Guidelines SonarLint B、快捷开发 aiXcoder-AI代码生成 AWS Toolkit-AI代码生成 CodeGeeX-AI代码生成 CodeGlance-代码缩略图 camelCase-格式转换 GsonFormatPlus-json代码生成 Sequence Giagram…