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

news2024/11/26 14:42:22

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.coloradmin.cn/o/1255065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】多线程(一):std::thread的使用

这篇文章应我朋友的邀请&#xff0c;写一篇文章介绍下C多线程。 编译环境准备 首先确定你的编译器支持std的thread&#xff0c;如果不支持&#xff0c;就会出现诸如“thread找不到”的问题。 以下假设你使用 gnu gcc 编译器&#xff0c;因为 MSVC 的我也不太熟悉。 linux …

【详解二叉树】

&#x1f320;作者&#xff1a;TheMythWS. &#x1f387;座右铭&#xff1a;不走心的努力都是在敷衍自己&#xff0c;让自己所做的选择&#xff0c;熠熠发光。 目录 树形结构 概念 树的示意图 树的基本术语 树的表示 树的应用 二叉树(重点) 二叉树的定义 二叉树的五…

实战oj题——用队列实现栈

前言&#xff1a;Leetcode栈和队列的习题&#xff0c;用两个队列实现栈。 【由于我们是用C语言完成这道题&#xff0c;所以我们要将关于队列的实现代码插入到题中&#xff0c;在创建一个栈&#xff0c;栈里包含两个队列。】 思路&#xff1a;我们用两个队列来实现&#xff0c;因…

java学习part12多态

99-面向对象(进阶)-面向对象的特征三&#xff1a;多态性_哔哩哔哩_bilibili 1.多态&#xff08;仅限方法&#xff09; 父类引用指向子类对象。 调用重写的方法&#xff0c;就会执行子类重写的方法。 编译看引用表面类型&#xff0c;执行看实际变量类型。 2.父子同名属性是否…

FPGA驱动CS4344 VHDL例程

CS4344是一款非常简单的I2S立体声24bit D/A芯片&#xff0c;采样率高达192KHz&#xff0c;相对于ADAU1761复杂的寄存器配置来说&#xff0c;CS4344非常友好&#xff0c;无需配置寄存器&#xff0c;只要按I2S时序输入数据&#xff0c;即可实现立体声输出&#xff0c;且10PIN TSS…

Effective Modern C++(1.顶层const与底层const)

1.顶层const与底层const的定义 const修饰的变量不可以改变&#xff0c;那么他就是顶层const&#xff0c;如&#xff1a; const int a 10; 那么&#xff0c;对于 const int *const p new int(10); 第二个const就是顶层const&#xff0c;因为他修饰的是p&#xff1b;第一个…

Windows TCP 通信测试_1

一、单对单通信测试 应用函数 socket、bind、connect、listen、accept、recv、send&#xff08;win下的函数&#xff09;等 1、客户端demo client.cpp #include<WINSOCK2.H> #include<STDIO.H> #include<iostream> #include<cstring> using namespa…

电商项目高级篇-03 商品上架

商品上架 1、商品上架1.1、设计&#xff1a;宽表设计 1、商品上架 上架的商品才可以在网站展示。 上架的商品需要可以被检索。 1.1、设计&#xff1a;宽表设计 优点&#xff1a;方便检索 缺点&#xff1a;数据冗余 商品数据模型设计&#xff1a; PUT product {"mappi…

HarmonyOS开发(七):构建丰富页面

1、组件状态管理 1.1、概述 在应用中&#xff0c;界面一般都是动态的。界面会根据不同状态展示不一样的效果。 ArkUI作为一种声明式UI&#xff0c;具有状态驱动UI更新的特点&#xff0c;当用户进行界面交互或有外部事件引起状态改变时&#xff0c;状态的变会会触发组件的自动…

【企业微信连接问题】

1、个人可以创建企业微信的企业账号么&#xff1f; 答&#xff1a;可以的&#xff0c;只是没法认证。不过基础的功能还是有的。 注册步骤&#xff1a;企业微信注册步骤 2、集简云链接企业微信&#xff0c;在授权之后&#xff0c;找不到集简云怎么办&#xff1f; 答&#xff1a…

美化wordpress复制文章内容弹出版权提示框的源码代码

通过SweetAlert美化的提示框 将下面代码添加到当前主题模板函数functions.php文件最后即可&#xff1a; function zm_copyright_tips() { echo <link rel"stylesheet" type"text/css" rel"external nofollow" target"_blank" href…

人力资源管理后台 === 权限应用

目录 1.权限应用-拆分静态路由-动态路由 2.权限应用-根据用户权限添加动态路由 3.权限应用-根据权限显示左侧菜单 4.权限应用-退出登录重置路由 5.权限应用-功能权限-按钮权限标识 6.权限应用-自定义指令应用功能权限 7.其他模块-集成 8.首页-基本结构和数字滚动 9.首页…

编译器设计03-后端概述

后端处理概述 后端处理&#xff1a;中间代码生成&#xff0c;目标代码生成&#xff0c;贯穿各个阶段的优化。 后端处理犹如得出中文文章&#xff0c;当阅读完英语文章后&#xff0c;你的脑海中就有清晰的“中间代码”了&#xff0c;想写作的时候就心中有数&#xff0c;核心论…

Sringboot3 讲解

文章目录 前言一、Springboot快速入门1.1 实例1.2 总结&#xff1a;1.2.1 什么是starter启动器1.2.2 SpringBootApplication注解的功效 二、springboot3 统一配置文件1.概述2、属性配置文件使用简单案例3、yaml配置介绍和说明4、批量配置文件的读取5、多环境配置和激活 三、spr…

vue页面表单提交时如何做校验

我们在做新增的时候&#xff0c;新增对话框是要加必填校验的&#xff0c;否则就可能会加空数据或者会产生sql的报错。那么这个校验是如何加的呢&#xff1f;下面我们来说一下。 文章目录 一、必填校验1.1 给form表单绑定一个:rules校验规则&#xff0c;给每个item加上一个prop…

17.找出1000之内的所有完数。

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为循环结构编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 一个数如果恰好等于它的因子之和&#xff0c;这个数就称为“完数”。例如&#xff0c;⑥的因子为1、2、3&#xff0c;而…

创建可以离线打包开发的uniapp H5项目

安装node环境 略 安装vue脚手架&#xff0c;在线 npm install -g vue/cli PS&#xff1a;vue-cli已进入维护模式&#xff0c;vue3最新脚手架使用npm init vuelatest安装&#xff0c;安装后使用create-vue替换vue指令&#xff0c;create-vue底层使用vite提升前端开发效率&…

【c++文件】

C是一种面向对象的编程语言&#xff0c;它广泛应用于各个领域&#xff0c;如游戏开发、嵌入式系统、操作系统等。在C编程中&#xff0c;文件操作是一项非常重要的技能。本文将介绍C文件操作的基本知识以及一些有趣的应用&#xff0c;带领大家一起探索C文件操作的魅力。 一、C文…

autojs-练手-简单的视频号点赞(初阶版)

注释很详细&#xff0c;直接上代码&#xff08;简单的练手实践&#xff0c;仅供参考&#xff09; //设置点赞次数 var num50; //等待权限授予 auto.waitFor(); //进入点赞流程 while(num!0) {//先向下滑一个视频scrollDown();//使用auto.js找到点赞控件的id&#xff08;每个人不…

VBA技术资料MF86:将PPT文件批量另存为PDF文件

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…