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

CSS的基础

news 文章来源：https://blog.csdn.net/Yyds12300/article/details/133362639 2024/10/27 20:32:55

  • CSS美化HTML，布局网页

  • CSS最大的价值：由HTML专注去做结构呈现，样式给CSS，结构（HTML)与样式（CSS）相分离

  • CSS主要由选择器以及一条或多条声明

  • 在<head></head>中实现CSS在<body></body>实现HTLM

  • 语法格式：选择器{做什么}

  • <head>
<style>p {color: red;//冒号是小写的，分号是大写的font-size: 12px;//冒号是小写的，分号是大写的.字体的大小}
<style>
</head>
<body><p>有点意思</p>
</body>

  • 空格规范

  • 属性值前面，冒号后面，保留一个空格

  • 选择器和大括号中间保留空格

  • 选择器分为基础选择器和复合选择器

  • 基础选择器分成标签选择器，优点是能快速为页面中同类型的标签统一设置样式

  • 类选择器可以单独选一个或几个标签

<style>
.red{color: red;//color: #ccooff;变成16进制的颜色双击可任意选取颜色
}
</style>
<body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
</body>

  • 可以理解为这个标签起了一个名字，来表示

  • 长名称或词组可以使用中横线来为选择器命名

  • 不能使用纯数字、中文等命名，尽量使用英文字母来表示

  • 多类名的使用方式

 <style>.red{color: red;}.green{font-size: 100px;}</style><body><p class="red green">是看得见</p>//可以同时使用red和green两个类。注意两个类中间要空格分开<p>是看得见</p><p>是看得见</p></body>

  • 使用多类名可以将宽长放一个类，颜色放一个类

  • id选择器样式#定义，结构id调用，只能调用一次，有标签使用了，别的标签不能使用

  • #pink{color: red;
}
​
<div id="pink"></div>

  • 同配符选择器

  • *{color: red;
}
<body></body>里面的所有的内容自动变成红色

  • CSS的字体系列

  • font-family属性定义文本的字体系列

  • <head>
<style>p{font-size: '微软雅黑';font-weight: bold;//给字体加粗font-weight: 700;//开发的时候写数字。700等于加粗font-weight；400;//400等于不加粗等于normal开发写数字}p{font-family: 'Micorsoft YaHai', Arial,Helvetica;}
</style>
</head>
<body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
</body>

  • px是像素的意思

  • 字体之间必须使用英文状态下的逗号隔开

  • 空格隔开的多个的单词组成的字体，加引号

  • 使用系统默认的字体

  • 可以直接给body直接输入字体

  • 如果是标题的话，就算是在body{ font-size=12px；}标题部分也要自己在重新定义

  • <head>
<style>em {font-style: normal;}
<style>
</head>
<body><em>有点意思</em>
</body>

  • 上述的代码可以复合起来，顺序是

  • font：斜体 粗细 字体大小 字体样式

  • 注意不能颠倒顺序

  • 复合字体可以没有斜体和粗细但不能没有字体大小和字体样式

  • CSS提供了背景颜色半透明的效果

  • background: rgba(0,0, 0, 0.3);//0.3也可以将.3

  • r代表红，g代表绿色，b代表蓝色，a代表alpha透明度

  • 盒子背景半透明，不会影响盒子里面内容的

相关文章：

CSS的基础

CSS美化HTML&#xff0c;布局网页 CSS最大的价值&#xff1a;由HTML专注去做结构呈现&#xff0c;样式给CSS&#xff0c;结构&#xff08;HTML)与样式&#xff08;CSS&#xff09;相分离 CSS主要由选择器以及一条或多条声明 在<head></head>中实现CSS在<body…...

编程日记 2023/10/2 13:26:39

mathtype如何嵌入到word中？详细mathtype安装步骤教程

mathtype是一款功能特别强大的数学方式编辑软件&#xff0c;为用户提供各种强大的数学公式符号帮助用户进行计算&#xff0c;并且速度很快。有小伙伴知道mathtype如何嵌入到word中吗&#xff0c;这里小编就给大家详细介绍一下mathtype嵌入到word中的方法&#xff0c;有需要的小…...

编程日记 2023/10/2 13:23:36

云安全之访问控制的常见攻击及防御

访问控制攻击概述 访问控制漏洞即应用程序允许攻击者执行或者访问某种攻击者不具备相应权限的功能或资源。 常见的访问控制可以分为垂直访问控制、水平访问控制及多阶段访问控制 (上下文相关访问控制)&#xff0c;与其相应的访问控制漏洞为也垂直越权漏洞(普通用户可以访问或…...

编程日记 2023/10/2 13:22:35

Java编程技巧：跨域

目录 1、跨域概念2、后端CORS&#xff08;跨域资源共享&#xff09;配置原理3、既然请求跨域了&#xff0c;那么请求到底发出去没有&#xff1f;4、通过后端CORS&#xff08;跨域资源共享&#xff09;配置解决跨域问题代码4.1、SpringBoot&#xff08;FilterRegistrationBean&a…...

编程日记 2023/10/2 13:19:32

react create-react-app 配置less

环境信息&#xff1a; create-react-app:v5 react:18.2.0 node:18.16.0 如果你不必须使用 less 建议直接使用scss。 因为less配置会遇到很多问题。 配置less过程&#xff1a; 如果你只需要 sass的话&#xff0c;就可以直接使用sass。因为默认配置了scss。 npm、yarn、cnpm、…...

编程日记 2023/10/2 13:18:31

树的表示——孩子兄弟表示法

从图中可以看出&#xff0c;树的每个结点&#xff0c;都有不确定的指向他们的孩子的节点&#xff0c;如果我们定义这样一个结构体来便是数的结构的话&#xff1a; struct TreeNode { int val; struct TreeNodep1; struct TreeNodep1; … }; 是不能够表示一棵树的&#xff0c;因…...

编程日记 2023/10/2 13:16:30

Windows11安装MySQL8.1

安装过程中遇到任何问题均可以参考(这个博客只是单纯升级个版本和简化流程) Windows安装MySQL8教程-CSDN博客 到官网下载mysql8数据库软件 MySQL :: Download MySQL Community Server 下载完后,解压到你需要安装的文件夹 其中的配置文件内容了如下 [mysqld]# 设置3306端口po…...

编程日记 2023/10/2 13:13:27

Linux编程——经典链表list_head

1. 关于list_head struct list_head是Linux内核定义的双向链表&#xff0c;包含一个指向前驱节点和后继节点的指针的结构体。其定义如下&#xff1a; struct list_head {struct list_head *next, *prev; //双向链表&#xff0c;指向节点的指针 };1.1 链表的定义和初始化 有两…...

编程日记 2023/10/2 13:12:25

基于51单片机NEC协议红外遥控发送接收仿真设计( proteus仿真+程序+原理图+报告+讲解视频）

基于51单片机NEC协议红外遥控发送接收仿真设计 讲解视频1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 基于51单片机NEC协议红外遥控发送接收仿真设计 51单片机红外发送接收仿真设计( proteus仿真程序原理图报告讲解视频…...

编程日记 2023/10/2 13:11:24

Jmeter分布式压力测试

目录 1、场景 2、原理 3、注意事项 4、slave配置 5、master配置 6、脚本执行 1、场景 在做性能测试时&#xff0c;单台机器进行压测可能达不到预期结果。主要原因是单台机器压到一定程度会出现瓶颈。也有可能单机网卡跟不上造成结果偏差较大。 例如4C8G的window server机…...

编程日记 2023/10/2 13:10:23

Rust :mod.rs和lib.rs中use的作用

一、mod.rs和lib.rs mod.rs往往是把同一目录下的n个rs文件综合在一起的有效方式&#xff1b; lib.rs是一个库或子库层次综合在一起的有效方式&#xff1b; 下面举个实例来说明。生成一个rusttoc本地库&#xff08;由cargo new rusttoc --lib所生成&#xff09;&#xff0c;目录…...

编程日记 2023/10/2 13:09:22

ISP图像信号处理——平场校正介绍以及C++实现

参考文章1&#xff1a;http://t.csdn.cn/h8TBy 参考文章2&#xff1a;http://t.csdn.cn/6nmsT 参考网址3&#xff1a;opencv平场定标 - CSDN文库 平场校正一般先用FPN(Fixed Pattern Noise)固定图像噪声校正,即暗场校正&#xff1b;再用PRNU(Photo Response Non Uniformity)…...

编程日记 2023/10/2 13:06:20

【深入了解Java String类】

目录 String类 常用方法 字符串的不可变性 String的内存分析 StringBuilder类 解释可变和不可变字符串 常用方法 面试题&#xff1a;String&#xff0c;StringBuilder&#xff0c;StringBuffer之间的区别和联系 String类的OJ练习 String类 【1】直接使用&#xff0c…...

编程日记 2023/10/2 13:04:18

基于SpringBoot的知识管理系统

目录 前言 一、技术栈 二、系统功能介绍 用户管理 文章分类 资料分类 文章信息 论坛交流 资料下载 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个…...

编程日记 2023/10/2 13:03:17

Pytorch基础：Tensor的reshape方法

在Pytorch中&#xff0c;reshape是Tensor的一个重要方法&#xff0c;它与Numpy中的reshape类似&#xff0c;用于返回一个改变了形状但数据和数据顺序和原来一致的新Tensor对象。注意&#xff1a;此时返回的数据对象并不一定是新的&#xff0c;这取决于应用此方法的Tensor是否是…...

编程日记 2023/10/2 13:02:16

【数据库——MySQL】（13）过程式对象程序设计——存储函数、错误处理以及事务管理

目录 1. 存储函数2. 存储函数的应用3. 错误处理4. 抛出异常5. 事务处理6. 事务隔离级7. 应用实例参考书籍 1. 存储函数 要 创建 存储函数&#xff0c;需要用到 CREATE 语句&#xff1a; CREATE FUNCTION 存储函数名([参数名 类型, ...])RETURNS 类型[存储函数体]注意&#xff1…...

编程日记 2023/10/2 13:01:15

Spring Boot的魔法：构建高性能Java应用

文章目录 Spring Boot&#xff1a;简化Java开发Spring Boot的性能优势1. 内嵌服务器2. 自动配置3. 起步依赖4. 缓存和优化5. 异步处理 实际示例&#xff1a;构建高性能的RESTful API总结 &#x1f389;欢迎来到架构设计专栏~Spring Boot的魔法&#xff1a;构建高性能Java应用 ☆…...

编程日记 2023/10/2 12:56:12

如何做好测试？（七）兼容性测试 (Compatibility Testing, CT)

1. 兼容性测试介绍 兼容性测试 (Compatibility Testing, CT)是一种软件测试方法&#xff0c;旨在验证应用程序在不同操作系统、浏览器、设备和网络环境下的正确运行和一致性。对于网上购物系统来说&#xff0c;兼容性测试非常重要&#xff0c;因为用户可能使用各种不同的设备和…...

编程日记 2023/10/2 12:55:10

经典循环神经网络(一)RNN及其在歌词数据集上的应用

经典循环神经网络(一)RNN及其在歌词数据集上的应用 1 RNN概述 在深度学习兴起之前&#xff0c;NLP领域一直是统计模型的天下&#xff0c;例如词对齐算法GIZA&#xff0c;统计机器翻译开源框架MOSES等等。在语言模型方向&#xff0c;n-gram是当时最为流行的语言模型方法。n-gr…...

编程日记 2023/10/2 12:54:09

docker+mysql+flask+redis+vue3+uwsgi+docker部署

首先拉取mysql的镜像&#xff0c;这里用的mysql5.7.6 docker pull mysql:5.7.6 镜像拉取完成后启动&#xff1a; docker run --name my-mysql -d -p 3306:3306 -v /usr/local/my-mysql/conf:/etc/mysql/conf.d -v /usr/local/my-mysql/data:/var/lib/mysql -e MYSQL_ROOT_PA…...

编程日记 2023/10/2 12:49:04

Spring boot接收zip包并获取其中excel文件的方法

1、问题 工作中遇到一个需求&#xff0c;接收一个zip包&#xff0c;读取其中的excel文件并处理&#xff0c;减少用户多次选择目录和文件的痛点&#xff0c;该zip包包含多级目录 2、依赖 需要用到apache的Workbook类来操作Excel&#xff0c;引入以下依赖 <dependency>&l…...

编程日记 2023/10/2 12:47:02

Ubuntu镜像源cn.arichinve.ubuntu.com不可用原因分析和解决

文章目录 Ubuntu查看系统版本Ubuntu更新系统不能更新Ubuntu查看APT更新源配置cn.archive.ubuntu.com已经自动跳转到清华镜像站Ubuntu变更镜像源地址备份原文件批量在VIM中变更 Ubuntu国内镜像站推荐推荐阅读 今天想要在Ubuntu环境下搭建一个测试环境&#xff0c;进入Ubuntu系统…...

编程日记 2023/10/2 12:45:00

Java基础面试，String,StringBuffer,StringBuilder区别以及使用场景

简单的几句 String是final修饰的&#xff0c;不可变&#xff0c;每次操作都会产生新的对象。StringBuffer和StringBuilder都是在原对象上进行操作StringBuffer是线程安全的&#xff0c;StringBuilder是线程不安全的。StringBuffer方法是被synchronized修饰的 所以在性能方面大…...

编程日记 2023/10/2 12:39:55

基于SpringBoot的高校学科竞赛平台

目录 前言 一、技术栈 二、系统功能介绍 竞赛题库管理 竞赛信息管理 晋级名单管理 往年成绩管理 参赛申请管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步…...

编程日记 2023/10/2 12:38:54

excel如何让线条消失，直接设置网格即可，碰到不方便的地方优先百度，再采取蛮干

怎么将excel表格中的隐形线条去掉...

编程日记 2023/10/2 12:37:53

抖音短视频seo矩阵系统源代码开发系统架构及功能解析

短视频seo源码&#xff0c;短视频seo矩阵系统底层框架上支持了从ai视频混剪&#xff0c;视频批量原创产出&#xff0c;云存储批量视频制作&#xff0c;账号矩阵&#xff0c;视频一键分发&#xff0c;站内实现关键词、短视频批量搜索排名&#xff0c;数据统计分类多功能细节深度…...

编程日记 2023/10/2 12:35:51

在pycharm中弹出图后，需要关闭才会显示Process finished with exit code 0

在pycharm中弹出图后&#xff0c;需要关闭才会显示Process finished with exit code 0 在PyCharm中&#xff0c;当你运行一个Python程序并弹出一个图形窗口时&#xff0c;程序会等到图形窗口关闭后才会显示 “Process finished with exit code 0” 的消息。 这是 由于代码执行…...

编程日记 2023/10/2 12:32:48

【计算机网络笔记六】应用层（三）HTTP 的 Cookie、缓存控制、代理服务、短连接和长连接

HTTP 的 Cookie HTTP 的 Cookie 机制要用到两个字段&#xff1a;响应头字段 Set-Cookie 和请求头字段 Cookie。 Cookie 可以设置多个 key-value 对&#xff0c; 响应头中可以设置多个 Set-Cookie 字段&#xff0c;请求头Cookie后面可以设置多个键值对&#xff0c;用分号隔开&a…...

编程日记 2023/10/2 12:31:47

Vue中的数据分页与分页组件设计

Vue中的数据分页与分页组件设计 在前端开发中&#xff0c;数据分页是一个常见的需求&#xff0c;特别是当处理大量数据时。Vue作为一款流行的JavaScript框架&#xff0c;提供了强大的工具和生态系统来实现数据分页。本文将介绍如何在Vue中进行数据分页&#xff0c;以及如何设计…...

编程日记 2023/10/2 12:27:43

TCP串流场景剖析

在TCP&#xff08;传输控制协议&#xff09;中&#xff0c;串流场景指的是数据通过TCP连接以流&#xff08;stream&#xff09;的方式传输。TCP是一种可靠的、面向连接的传输协议&#xff0c;它将数据切分为多个报文段&#xff0c;通过网络传输&#xff0c;并在接收端进行重组&…...

编程日记 2023/10/2 12:26:43

wordpress 获取模板路径/什么是竞价

1、-injars //表示要进行混淆的class文件或jar、war等,可用文件目录表示&#xff0c;例如&#xff1a; 2、-injar ../jar(**.class) 或者-injar ../jar/in.jar 3、-outjars 表示要生成的jar包&#xff0c;后跟jar包名字&#xff0c;如&#xff1a;-outjars ../out.jar 4、-libr…...

编程日记 2024/10/27 19:05:53

网页制作与设计中string对象ppt/东莞营销网站建设优化

在银行、销售、仓库管理等的数据查询系统中&#xff0c;我们经常会用到精确查询来准确获取想要的数据&#xff0c;但是很多时候我们并不记得确切的检索条件是什么&#xff0c;这样的话&#xff0c;必然会对我们获取数据造成一定的影响&#xff0c;而此时模糊查询的出现很好的解…...

编程日记 2024/10/27 18:47:40

百度网址大全在哪里找/东莞seo建站排名

原文链接&#xff1a;C11 Tutorial: Introducing the Move Constructor and the Move Assignment Operator​smartbear.com由于本人才疏学浅&#xff0c;翻译难免有误&#xff0c;望各位不吝惜指正。右值引用右值引用(rvalue references)是一种新的用于绑定右值的引用类型。那么…...

编程日记 2024/10/27 17:45:11

做视频投稿赚钱的网站/百度快照网址

这两年被Python初学小白问到最多的问题就是&#xff0c;该用什么代码编辑工具&#xff1f; 说实话&#xff0c;我个人是用Jupyter Notebook最多&#xff0c;主要是经常做数据可视化&#xff0c;方便些。 但对于初学者来说&#xff0c;PyCharm仍是不二的选择&#xff0c;甚至我…...

编程日记 2024/10/27 16:34:32

做网站需要数据储存么/曼联官方发文

山姆会员店怎么订蛋糕&#xff0c;金婚订蛋糕图片&#xff1f; 在线订购(预定)蛋糕&#xff0c;众多款式全城配送&#xff01; 服务区域&#xff1a;山姆会员店怎么订蛋糕&#xff0c;金婚订蛋糕图片&#xff1f;各区/县(全部区域)(乡镇地区的配送时效可能会略微延长&#xf…...

编程日记 2024/10/27 15:05:16

小说做任务赚钱的网站/网站友情链接购买

在Linux上可以通过ifconfig和route命令添加IP别名。 现在我们在eth0上添加两个IP别名192.168.0.111和192.168.0.112&#xff1a; Shell>ifconfig eth0:1 192.168.0.111 broadcast 192.168.0.255 netmask 255.255.255.0 up Shell>route add -host 192.168.0.111 dev eth0:…...

编程日记 2024/10/27 9:44:59