5.前端--CSS-基本概念【2023.11.26】

1. CSS 语法规范

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明

在这里插入图片描述

属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分
选择器 : 简单来说,就是选择标签用的。
声明 :就是改变样式

2.CSS引入方式

按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:

  1. 行内样式表(行内式)

由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用

  <div style="color: red; font-size: 12px;">学习使我快乐</div>
  1. 内部样式表(嵌入式)

<style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的<head>标签中这种方式是我们练习时常用的方式

<head><style>h4 {color: blue;font-size: 100px;}</style>
</head>
  1. 外部样式表(链接式)
  1. 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
  2. 在 HTML 页面中,使用<link> 标签引入这个文件。
<link rel="stylesheet"  href="css文件路径">

3.Chrome调试工具

Chrome 浏览器提供了一个非常好用的调试工具,可以用来调试我们的 HTML 结构和 CSS 样式。

打开调试工具
点击右键–>选择检查进入
在这里插入图片描述

1.左边是 HTML 元素结构,右边是 CSS 样式。
2.右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色

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

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

相关文章

网络运维与网络安全 学习笔记2023.11.26

网络运维与网络安全 学习笔记 第二十七天 今日目标 NAT场景与原理、静态NAT、动态NAT PAT原理与配置、动态PAT之EasyIP、静态PAT之NAT Server NAT场景与原理 项目背景 为节省IP地址和费用&#xff0c;企业内网使用的都是“私有IP地址” Internet网络的组成设备&#xff0c…

【办公软件】电脑开机密码忘记了如何重置?

这个案例是家人的电脑&#xff0c;已经使用多年&#xff0c;又是有小孩操作过的&#xff0c;所以电脑密码根本不记得是什么了&#xff1f;那难道这台电脑就废了吗&#xff1f;需要重新装机吗&#xff1f;那里面的资料不是没有了&#xff1f; 为了解决以上问题&#xff0c;一般…

MySQL 高可用架构

MySQL 是实际生产中最常用的数据库&#xff0c;生产环境数据量极为庞大&#xff0c;对性能和安全要求很高&#xff0c;单机的 MySQL 是远远达不到的&#xff0c;所以必须搭建一个主从复制架构&#xff0c;同时可以基于一些工具实现高可用架构&#xff0c;在此基础上&#xff0c…

基于Java SSM框架+Vue实现药品保健品购物网站项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架Vue实现药品保健品购物网站演示 摘要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 ssm药源购物网站&#xff0c;主要的模块包括两个用户&#xff0c;管理员权限&#xff1a;用…

Re55:读论文 Entities as Experts: Sparse Memory Access with Entity Supervision

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;Entities as Experts: Sparse Memory Access with Entity Supervision 模型名称&#xff1a;Entities as Experts (EaE) ArXiv网址&#xff1a;https://arxiv.org/abs/2004.07202 本文…

leetcode:有效的括号

题目描述 题目链接&#xff1a;20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 题目分析 题目给了我们三种括号&#xff1a;&#xff08;&#xff09;、{ }、[ ] 这里的匹配包括&#xff1a;顺序匹配和数量匹配 最优的思路就是用栈来解决&#xff1a; 括号依次入栈…

2 时间序列预测入门:GRU

0 论文地址 GRU 原论文&#xff1a;https://arxiv.org/pdf/1406.1078v3.pdf GRU&#xff08;Gate Recurrent Unit&#xff09;是循环神经网络&#xff08;RNN&#xff09;的一种&#xff0c;可以解决RNN中不能长期记忆和反向传播中的梯度等问题&#xff0c;与LSTM的作用类似&a…

(附源码)springboot电影售票系统小程序 计算机毕设36991

目 录 摘要 1 绪论 1.1课题目的与意义 1.2研究背景 1.3论文结构与章节安排 1.4小程序框架以及目录结构介绍 2 springboot电影售票系统小程序系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统流程分析 2.2.1 数据…

QT基础开发笔记

用VS 写QT &#xff0c;设置exe图标的方法&#xff1a; 选定工程--》右键--》添加---》资源--》 QString 字符串用法总结说明 Qt QString 增、删、改、查、格式化等常用方法总结_qstring 格式化-CSDN博客 总结来说&#xff1a; QString 的 remove有两种用法&#xff0c;&am…

【GD32307E-START】开发板开箱、开发环境建立及工程模板测试

01-GD32F307E-START开箱、开发环境建立及工程模板测试&#xff08;Keil-MDK GCC Template&#xff09; 兆易GD32307E-START开发板搭载GD32 ARM Cortex-M4微控制器主流芯片GD32F307。 开箱 板子的做工还是非常精良小巧的。有两颗按键&#xff0c;一颗是复位&#xff0c;一颗是…

C#、.net、asp.net 超快超简单(一看就会)将redis添加到自己的项目中

背景&#xff1a;凌晨两点&#xff0c;隔壁楼情侣闹得欢&#xff0c;本单身狗不服气&#xff0c;决定总结一下今晚添加到项目的redis。 我的使用场景&#xff1a;asp.net core web apivue3的项目中数据库的权限表是最经常读取的&#xff0c;所以权限表中的数据放到redis中最为…

【Spring Boot】如何集成Swagger

Swagger简单介绍 Swagger是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化RESTful风格的Web服务。功能主要包含以下几点&#xff1a; 可以使前后端分离开发更加方便&#xff0c;有利于团队协作接口文档可以在线自动生成&#xff0c;有利于降低后端开发人员编写…