当前位置： 首页 > news >正文

CSS介绍

news 文章来源：https://blog.csdn.net/rzy1248873545/article/details/129295775 2024/11/15 17:55:39

文章目录

  • 一. CSS介绍
  • 二. CSS的引入方式
  • 三. CSS选择器

一. CSS介绍

  • 定义: 层叠样式表
  • 作用:
  1. 美化界面: 设置标签文字大小,颜色,字体加粗等样式
  2. 控制页面布局: 设置浮动,定位等样式
  • 基本语法:
选择器{样式规则
}
样式规则:
属性名1: 属性值1
属性名2: 属性值2
属性名3: 属性值3
...选择器: 在页面中筛选符合规则和要求的标签

二. CSS的引入方式

样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)
内嵌样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)
外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)

三. CSS选择器

  • 标签选择器
<style>/* 标签选择器  通过页面标签, 选择满足的标签, 作用范围是页面中所有满足的标签标签{属性: 属性值;} */div{color: red;font-size: 30px;}
</style><body><!-- 多个类使用空格隔开 --><div class="box1 blue" >好好学习</div><div class="box2">good good study</div>
</body>
  • 类选择器
<style>/* 类选择器  在定义标签的时候, 可以给标签添加 class 属性, 即类, 一个标签可  置多个类一个类可以作用于多个标签 .类名{属性: 属性值}*/.box1{width: 200px;height: 200px;background: green;}.box2{width: 300px;height: 300px;background: pink;}
</style><body><!-- 多个类使用空格隔开 --><div class="box1 blue" >好好学习</div><div class="box2">good good study</div>
</body>
  • 层级选择器
<style>/* 层级选择器, 一般用在标签嵌套当中 选择器1 选择器2 {属性: 属性值;}*/div p{background: palegreen;}div .c_p{width: 200px;}    .box1 .c_p{height: 100px;}.box1 p{color: #0000ff;}
</style><body><div class="box1">这是 div 标签<p class="c_p">这是 p 标签好好学习</p></div>
</body>
  • ID选择器
<style>/* ID选择器, 在一个页面中, 标签的 ID 是唯一的, 所以ID选择器只能作用一个标签#id值 {属性: 属性值;} */#box1{background: red;}
</style><body><div id="box1">这是一个div</div><div>好好学习</div>
</body>
  • 组选择器
<style>/* 组选择器, 使用不同的选择器进行组合, 设置相同的属性选择器1, 选择器2{属性: 属性值;}*/div, p{color: bisque;font-size: 30px;}
</style><body><div id="box1" class="box1">这是一个div</div><div class="box2">好好学习</div><div class="box3">good good study</div><p>这是一个p标签</p>
</body>
  • 伪类选择器
<style>/* 伪类选择器, 主要用来做交互效果选择器:事件{属性: 属性值;} */div{width: 100px;height: 50px;background: peru;}/* hover 鼠标指针放到指定选择器后, 就会执行伪类选择器的修改操作 */div:hover{font-size: 30px;color: aqua;}
</style><body><div >好好学习</div>
</body>

相关文章：

CSS介绍

文章目录一. CSS介绍二. CSS的引入方式三. CSS选择器一. CSS介绍 定义: 层叠样式表作用: 美化界面: 设置标签文字大小,颜色,字体加粗等样式控制页面布局: 设置浮动,定位等样式 基本语法: 选择器{样式规则 } 样式规则: 属性名1: 属性值1 属性名2: 属性值2 属性名3: 属性值3 ..…...

编程日记 2023/3/2 19:46:52

Auto-encoder 系列

Auto-Encoder (AE)Auto-encoder概念自编码器要做的事&#xff1a;将高维的信息通过encoder压缩到一个低维的code内&#xff0c;然后再使用decoder对其进行重建。“自”不是自动&#xff0c;而是自己训练[1]。PCA要做的事其实与AE一样&#xff0c;只是没有神经网络。对于一个输入…...

编程日记 2023/3/2 19:45:41

【蓝桥杯入门不入土】变幻莫测的链表

文章目录一&#xff1a;链表的类型单链表双链表循环链表二&#xff1a;链表的存储方式三&#xff1a;链表的定义删除节点添加节点四&#xff1a;实战练习1.设计链表2. 移除链表元素最后说一句一&#xff1a;链表的类型 单链表 什么是链表&#xff0c;链表是一种通过指针串联在…...

编程日记 2023/3/2 19:44:34

axios的二次封装

方式一&#xff1a;将axios单独分装到某个配置文件中import axios from axios; const axiosApi axios.create({baseURL:http://127.0.0.1:3000,timeout:3000 }) export default axiosApi在组件中使用:import $http from axios配置文件的地址 $http.get(/student/test).then(re…...

编程日记 2023/3/2 19:43:28

GET与POST区别（最详细）

相同点&#xff1a;本质上都是TCP连接。 不同点&#xff1a;由于HTTP规定和服务器/浏览器限制&#xff0c;在应用过程中区别如下&#xff1a; 1.get产生一个TCP数据包&#xff0c;post 产生两个TCP数据包 get请求&#xff0c;浏览器会把http header和data一起发送&#xff0c…...

编程日记 2023/3/2 19:42:23

精选博客系列｜将基于决策树的Ensemble方法用于边缘计算

在即将到来的边缘计算时代&#xff0c;越来越需要边缘设备执行本地快速训练和分类的能力。事实上&#xff0c;无论是手机上的健康应用程序、冰箱上的传感器还是扫地机器人上的摄像头&#xff0c;由于许多原因&#xff0c;例如需要快速响应时间、增强安全性、数据隐私&#xff0…...

编程日记 2023/3/2 19:41:16

JS混淆加密：Eval的未公开用法

JavaScript奇技淫巧&#xff1a;Eval的未公开用法 作者&#xff1a;http://JShaman.com w2sft&#xff0c;转载请保留此信息很多人都知道&#xff0c;Eval是用来执行JS代码的&#xff0c;可以执行运算、可以输出结果。 但它还有一种未公开的用途&#xff0c;想必很少有人用过。…...

编程日记 2023/3/2 19:40:11

π型滤波器 计算_π型滤波电路

滤波器在功率和音频电子中常用于滤除不必要的频率。而电路设计中&#xff0c;基于不同应用有着许多不同种类的滤波器&#xff0c;但它们的基本理念都是一致的&#xff0c;那就是移除不必要的信号。所有滤波器都可以被分为两类&#xff0c;有源滤波器和无源滤波器。有源滤波器用…...

编程日记 2023/3/2 19:37:53

大数据常见术语

大数据常见术语一览 主要内容包含以下&#xff08;收藏&#xff0c;转发给你身边的朋友&#xff09; 雪花模型、星型模型和星座模型 事实表 维度表 上钻与下钻 维度退化 数据湖 UV与PV 画像 ETL 机器学习 大数据杀熟 SKU与SPU 即席查询 数据湖 数据中台 ODS&#xff0c;DWD&…...

编程日记 2023/3/2 19:36:48

带你了解“函数递归”

目录 1. 什么是递归&#xff1f; 2. 函数递归的必要条件 2.1 接收一个整型值&#xff08;无符号&#xff09;&#xff0c;按照顺序打印它的每一位。 代码如下&#xff1a; 2.2 编写一个函数&#xff0c;不用临时变量求字符串长度 代码如下&#xff1a; 2.3 递归与迭代 …...

编程日记 2023/3/2 19:35:42

网络资源面经2

文章目录Kafka 原理&#xff0c;数据怎么平分到消费者生产者分区消费者分区Flume HDFS Sink 小文件处理Flink 与 Spark Streaming 的差异&#xff0c;具体效果Spark 背压机制具体实现原理Yarn 调度策略Spark Streaming消费方式及区别Zookeeper 怎么避免脑裂&#xff0c;什么是脑…...

编程日记 2023/3/2 19:34:33

4年经验来面试20K的测试岗，一问三不知，我还真不如去招应届生。

公司前段缺人&#xff0c;也面了不少测试&#xff0c;结果竟然没有一个合适的。一开始瞄准的就是中级的水准&#xff0c;也没指望来大牛&#xff0c;提供的薪资在10-20k&#xff0c;面试的人很多&#xff0c;但平均水平很让人失望。看简历很多都是4年工作经验&#xff0c;但面试…...

编程日记 2023/3/2 19:33:27

K8S搭建NACOS集群踩坑问题

一、NACOS容器启动成功无法访问现象描述&#xff1a;通过K8S的statefulset启动&#xff0c;通过NodePort暴露不能在外网访问&#xff0c;只能在MASTER主节点访问。yaml配置&#xff1a;apiVersion: apps/v1 kind: StatefulSet metadata:name: nacos-${parameters.nameSpace}-dm…...

编程日记 2023/3/2 19:32:22

怎么避免计算机SCI论文的重复率过高？ - 易智编译EaseEditing

论文成稿前 在撰写阶段就避免重复&#xff1a;在撰写阶段就避免文章中的重复内容&#xff0c;可以减少后期修改的工作量。 在写作前&#xff0c;可以制定良好的计划和大纲&#xff0c;规划好文章的结构和内容&#xff0c;从而减少重复内容。 加强对相关文献的阅读 为了避免自己…...

编程日记 2023/3/2 19:31:17

uni-app路由拦截

新建一个auth.js /** * description 权限存储函数 */ const authorizationKey Authorization export function getAuthorization() { return uni.getStorageSync(authorizationKey) } export function setAuthorization(authorization) { return uni.setStorageSync(aut…...

编程日记 2023/3/2 19:30:11

如何使用固态继电器实现更高可靠性的隔离和更小的解决方案尺寸

自晶体管发明之前&#xff0c;继电器就已被用作开关。从低压信号安全控制高压系统的能力&#xff0c;如隔离电阻监控&#xff0c;对于许多汽车系统的开发是必要的。虽然机电继电器和接触器的技术多年来有所改进&#xff0c;但设计人员要实现其终身可靠性和快速开关速度以及低噪…...

编程日记 2023/3/2 19:29:05

【YOLOv8/YOLOv7/YOLOv5系列算法改进NO.56】引入Contextual Transformer模块（sci期刊创新点之一）

文章目录前言一、解决问题二、基本原理三、​添加方法四、总结前言 作为当前先进的深度学习目标检测算法YOLOv8&#xff0c;已经集合了大量的trick&#xff0c;但是还是有提高和改进的空间&#xff0c;针对具体应用场景下的检测难点&#xff0c;可以不同的改进方法。此后的系列…...

编程日记 2023/3/2 19:28:00

深圳大学计软《面向对象的程序设计》实验3 指针2

A. 月份查询&#xff08;指针数组&#xff09; 题目描述 已知每个月份的英文单词如下&#xff0c;要求创建一个指针数组&#xff0c;数组中的每个指针指向一个月份的英文字符串&#xff0c;要求根据输入的月份数字输出相应的英文单词 1月 January 2月 February 3月 March …...

编程日记 2023/3/2 19:26:55

【基于机器学习的推荐系统项目实战-2】项目介绍与技术选型

本节目录一、项目介绍1.1 采用的数据源1.2 Concrec架构技术选型1.3 Sprak介绍1.4 Flink1.5 TensorFlow一、项目介绍 1.1 采用的数据源 Kaggle Anime Recommendations Dataset。 其中的动漫数据源自myanimelist.net。 1.2 Concrec架构技术选型 数据预处理模块&#xff1a;汇总…...

编程日记 2023/3/2 19:25:50

对称锥规划：锥与对称锥

文章目录对称锥规划&#xff1a;锥与对称锥锥的几何形状常用的指向锥Nonnegative Orthant二阶锥半定锥对称锥对称锥的平方操作对称锥的谱分解对称锥的自身对偶性二阶锥规划SOCP参考文献对称锥规划&#xff1a;锥与对称锥 本文主要讲锥与对称锥的一些基本概念。 基础预备&…...

编程日记 2023/3/2 19:24:44

4.基于Label studio的训练数据标注指南：情感分析任务观点词抽取、属性抽取

情感分析任务Label Studio使用指南 1.基于Label studio的训练数据标注指南&#xff1a;信息抽取&#xff08;实体关系抽取&#xff09;、文本分类等 2.基于Label studio的训练数据标注指南&#xff1a;&#xff08;智能文档&#xff09;文档抽取任务、PDF、表格、图片抽取标注等…...

编程日记 2023/3/2 19:23:39

算法拾遗二十五之暴力递归到动态规划五

算法拾遗二十七之暴力递归到动态规划七题目一【数组累加和最小的】题目二什么暴力递归可以继续优化暴力递归和动态规划的关系面试题和动态规划的关系如何找到某个问题的动态规划方式面试中设计暴力递归的原则知道了暴力递归的原则 然后设计常见的四种尝试模型如何分析有没有重复…...

编程日记 2023/3/2 19:22:34

Linux进程的创建结束类系统调用总结

tags: Linux OS Syscall C 写在前面 总结一下Linux系统的进程创建/终止/等待等系统调用, 参考: Linux/Unix系统编程手册. 下面主要给出例子, 关于函数原型可以参考书中或者man 2 syscall(例如man 2 fork). 测试环境: Ubuntu 20.04 x86_64 gcc-9 进程创建: fork() 用于创建…...

编程日记 2023/3/2 19:21:21

Git分支的合并策略有哪些？Merge和Rebase有什么区别？关于Merge和Rebase的使用建议

Git分支的合并策略有哪些&#xff1f;Merge和Rebase有什么区别&#xff1f;关于Merge和Rebase的使用建议1. 关于Git的一些基本原理1.1 Git的工作流程原理2. Git的分支合并方式浅析2.1 分支是什么2.2 分支的合并策略2.2.1 Three-way-merge&#xff08;三向合并原理&#xff09;2…...

编程日记 2023/3/2 19:20:14

2022-2-23作业

一、通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作 1.例如在串口输入led1on,开饭led1灯点亮 2.例如在串口输入led1off,开饭led1灯熄灭 3.例如在串口输入led2on,开饭led2灯点亮 4.例如在串口输入led2off,开饭led2灯熄灭 5.例如在串口输…...

编程日记 2023/3/2 19:19:07

1.基于Label studio的训练数据标注指南：信息抽取（实体关系抽取）、文本分类等

文本抽取任务Label Studio使用指南 1.基于Label studio的训练数据标注指南&#xff1a;信息抽取&#xff08;实体关系抽取&#xff09;、文本分类等 2.基于Label studio的训练数据标注指南&#xff1a;&#xff08;智能文档&#xff09;文档抽取任务、PDF、表格、图片抽取标注等…...

编程日记 2023/3/2 19:18:04

“高退货率”标签引热议，亚马逊跨境电商是好是坏?

在多数卖家不知情的情况下&#xff0c;亚马逊“高退货率”标签上线&#xff0c;该消息已被官方证实&#xff0c;目的是为了践行以客户为中心的理念和推动卖家提升服务。 官方确认上线“高退货率”标签 近期&#xff0c;有亚马逊卖家发现产品详情页出现了“高退货率”标签&…...

编程日记 2023/3/2 19:16:58

Pinia2

一、入门案例 1、安装 npm i pinia -S 2、注册插件 //main.ts import { createPinia } from pinia app.use(createPinia()) 3、创建store/countStore.ts import { defineStore } from "pinia"; const useCounterStore defineStore(counterStore,{ state(){ return{…...

编程日记 2023/3/2 19:15:54

服务器配置 | 在Windows本地打开服务器端Tensorboard结果

文章目录方法1&#xff1a;直接cmd使用ssh登录远程服务器方法2&#xff1a;利用Xshell设置本地端口进行监听方法3&#xff1a;利用MobaXterm设置本地端口监听这里介绍三个方法&#xff0c;在在Windows本地打开服务器端Tensorboard结果 方法1&#xff1a;直接cmd使用ssh登录远程…...

编程日记 2023/3/2 19:14:42

13 nuxt3学习（新建页面 内置组件 assets 路由）

新建页面 Nuxt项目中的页面是在 pages目录 下创建的 在pages目录创建的页面&#xff0c;Nuxt会根据该页面的目录结构和其文件名来自动生成对应的路由。页面路由也称为文件系统路由器&#xff08;file system router&#xff09;&#xff0c;路由是Nuxt的核心功能之一 方式一…...

编程日记 2023/3/2 19:13:36

网站建设实训意见和建议/seo关键词优化报价

## php利用phpExcel 导出数组为Excelphp/*** 导出多页的excel** param [type] $fileName 文件名* param [type] $Data 数据* param [type] $sheets 工作区数量[可选]* author Tan * return void*/function exportExcel_sheets($fileName,$Data,$sheets) {$fileName empty($fil…...

编程日记 2024/11/15 17:53:58

thinkphp只能做网站/seo引擎优化

如何通过Infopath2010编程方程向Sharepoint List提交数据 针对上一篇修改了一下&#xff0c;可以直接提交重复表里的数据到列表中&#xff0c;代码实现如下&#xff1a; public void CTRL1_5_Clicked(object sender, ClickedEventArgs e) { // 在此处编写…...

编程日记 2024/11/15 15:49:27

网站中文域名好不好/seo石家庄

1. 需求 目前我们开发的TCP服务端程序只能服务于一个客户端&#xff0c;如何开发一个多任务版的TCP服务端程序能够服务于多个客户端呢? 完成多任务&#xff0c;可以使用线程&#xff0c;比进程更加节省内存资源。 2. 具体实现步骤 编写一个TCP服务端程序&#xff0c;循环等…...

编程日记 2024/11/15 12:01:10

关于网站建设的建议/韶关新闻最新今日头条

想象一下&#xff0c;当程序所有的业务逻辑都完成的时候&#xff0c;你可能还来不及喘口气&#xff0c;紧张的测试即将来临。你的Boss告诉你&#xff0c;虽然程序没问题&#xff0c;但某些方法为什么执行这么慢&#xff0c;性能堪忧。领会了Boss的意图之后&#xff0c;漫长的排…...

编程日记 2024/11/15 8:16:15

西安专业做网站的公司/百度站长之家工具

在做一个佩戴设备APP时&#xff0c;需要做一个绿色圆角&#xff0c;内部为透明的按钮。先来看一下效果 效果实现 先新建一个shape资源 shape_button.xml <?xml version"1.0" encoding"utf-8"?> <shape xmlns:android"http://schemas.and…...

编程日记 2024/11/15 8:10:12

wordpress 4.2.4漏洞/深圳华强北

我在eclipse上反复得到堆栈溢出错误。它对应于将Apache的PDFBox 2.0添加到我的构建路径中&#xff0c;并合并和修改我在SO上找到的一些代码。 This eclipse bug report似乎是恰当的。我尝试刷新&#xff0c;关闭并重新打开项目&#xff0c;删除.index文件等。这是日食日志&…...

编程日记 2024/11/15 7:31:45