3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

news/发布时间2024/5/19 2:29:58

html和css的关系:

  HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图

片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。

  CSS (Cascading Style Sheets,级联样式表)是用于描述网页外观和样式的样式表语言。它让你可以控制网页的布局、颜色、字体以及其他视觉元素。CSS可以与HTML结合

使用,通过内联样式、内部样式表和外部样式表等方式,对网页的各个元素进行样式的设置。

  简单来说,HTML和CSS是相辅相成的。HTML提供了网页的内容和结构,而CSS则负责将这些内容以特定的样式呈现在用户面前。

1、内部样式<style></style>、

外部样式<link rel="stylesheet" href="style.css"

2、选择器:标签选择器、类选择器、id选择器

优先级:id>类>标签

注意: class 命名规范 必须以字母开头,字母数字-_ 、class 选择器 必须.开头 、

id选择器一个页面只能出现一次 、

标签中的class的值不能+“.”

3、css文本修饰

注意:

1.文本对齐 只针对块元素有效

2.文本 可以控制图片 ,将图片放入块元素中

3.块元素 独占一行

4.行元素 和别的元素在一行 区分块元素和行元素:1.右键检查,看是否是行或者块;2.用行元素检验

5.文本样式永远控制父元素

     

4、背景

5、盒子模型

默认宽 百分百 默认高 0

div如果想显示 最少给个高就可以了

padding :内边距 内容到内壁的距离

宽= 内容width + 左边框 + 右边框 + 左内边距 + 右内距

高= 内容height + 上边框 + 下边框 + 上内边距 + 下边距

注意: 盒子模型针对的是块元素,对行元素无效

上下元素都给外边距的时候,以最大的为准

针对在css样式中,样式代码无优先级的情况下,系统按顺序执行代码结果

行高和高度一样高,文字垂直居中

针对因调试内边距导致盒子变大的情况使用:内减模式:box-sizing:boder-box;

左右元素都给外边距的时候,以和为准

5、浮动

6、伪类

7、字体图标

推荐矢量小图标网址:https://www.iconfont.cn/

     
     

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程大学网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

HackTheBox系列之Unicode

本次推荐的模拟环境如下: https://www.hackthebox.com/本次环境主要涉及Nginx目录遍历、JKU伪造、JWT令牌伪造、命令注入、SUDO提权,目标拿下flag。扫描客服微信 获取完整PDF

OpenSNS V6.2.0漏洞分析

前台RCE 原理分析 触发条件 这篇博客将详细解释前台RCE漏洞的原理。首先,让我们看一下触发这个漏洞的条件。 在 Application/Weibo/Controller/ShareController.class.php 中存在 shareBox 方法,它从GET请求中获取名为 query 的参数值,对其进行解码,然后将解码后的值和相应…

读高性能MySQL(第4版)笔记10_查询性能优化(上)

查询优化1. 三管齐下 1.1. 不做、少做、快速地做 1.2. 如果查询太大,服务端会拒绝接收更多的数据并抛出相应错误 1.3. 如果查询写得很糟糕,即使库表结构再合理、索引再合适,也无法实现高性能 1.4. 查询优化、索引优化、库表结构优化需要齐头并进,一个不落 1.5. Percona Too…

DDR,总线,PCIE技术分析

DDR,总线,PCIE技术分析 PCIE开发笔记(一)简介篇这是一个系列笔记,将会陆续进行更新。最近接触到一个项目,需要使用PCIE协议,项目要求完成一个pcie板卡,最终可以通过电脑进行通信,完成电脑发送的指令。这当中需要完成硬件部分,使用FPGA板实现,同时需要编写Windows下的…

数字化采购:连接采购方和供应商的新时代

什么是数字化采购 数字化采购是一种新的企业采购模式,它通过数字化手段连接采购方和供应商,实现对不同类型物资采购的管理。与供应链管理(SCM)不同,数字化采购关注的是采购方和供应商之间的连接。数字化采购范畴界定数字化采购的狭义表现是供应商关系管理(SRM)软件,它能够管…

机器学习算法原理实现——lightgbm,核心leaf-wise生长结合数据和特征并行+直方图算法+单边梯度抽样+互斥特征捆绑

算法亮点: 1、leaf-wise生长策略+特征并行和数据并行 让我们通过一个简单的例子来详细解释 LightGBM 的 Leaf-wise 生长策略。假设我们有以下的数据集:| 年龄 | 收入 | 购买 || ---- | ---- | ---- || 20 | 3000 | 0 || 25 | 3500 | 0 || 30 | 4000 | 0 || 35 | 4500 | 1 ||…