总结 CSS 选择器的常见用法

一,什么是css

在前端网页中,css就相当于化妆术,把一个很生硬的网页页面变得排版有序起来。

CSS可以对网页中的元素位置进行像素级精准控制,实现美化页面的效果,也能做到页面的样式和结构分离。

 二,css的基本语法规范

选择器加{声明}

也就是该找那个修改,修改成什么样子,声明的属性是键值对,使用;区分键值对,使用:区分键和值。但要注意CSS要放置到style标签中,但style可以放置到任何位置,一般在head里面。

<style>
 p {
 /* 设置字体颜⾊ */ 
 color: red;
 /* 设置字体⼤⼩ */ 
 font-size: 30px;
 }
</style>
<p>hello</p>

三,CSS选择器

CSS选择器主要分为五种:

1.标签选择器:直接打标签,就比如div什么的,就全选上改变了。

2.class选择器:是使用点什么什么就比如:.font32  ,这就是选择class为32的元素

3.id选择器:使用#submit,就选择了id为subimt的元素,实现精准改变

4.复合选择器:ul li a,也就是只设置在ul标签下,li标签下的a标签

5.通配符选择器:一个*,设置页面的所有元素。

四,常用的CSS样式

1.color,设置字体颜色

2.font-size:设置字体大小

3.border:边框,但边框中也还有样式:

border-width,设置边框粗细,

border-style设置边框样式,就比如点状,实线,虚线的

border-color,设置边框颜色

4.width/height,高度和宽度,但要注意,只有块级元素可以设置高度和宽度

5.padding:内边距,设置内容和边框的距离

padding-top

padding-bottom

padding-left

padding-right

6. margin:外边距,复合样式和内边距一样

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL中的ibd2sdi—InnoDB表空间SDI提取实用程序

ibd2sdi 是一个用于从 InnoDB 表空间文件中提取序列化字典信息&#xff08;Serialized Dictionary Information, SDI&#xff09;的实用程序。这个实用程序可以用于提取存储在持久化 InnoDB 表空间文件中的 SDI 数据。 可以对以下类型的表空间文件使用 ibd2sdi&#xff1a; 每…

消息认证码解析

1. 什么是消息认证码 消息认证码(Message Authentication Code)是一种确认完整性并进行认证的技术&#xff0c;取三个单词的首字母&#xff0c;简称为MAC。 消息认证码的输入包括任意长度的消息和一个发送者与接收者之间共享的密钥&#xff0c;它可以输出固定长度的数据&#x…

C语言之详解预处理

前言&#xff1a; 预处理也叫预编译&#xff0c;是编译代码时的第一步&#xff0c;经过预处理后生成一个.i文件&#xff0c;如果不明白编译与链接作用的小伙伴可以先看看博主的上一篇博客—— &#xff0c;不然知识连贯性可能会显得很差哦。 正文目录&#xff1a; 预定义符号#…

discuz迪恩cul!教育课程培训网站模板

Discuz x3.2模板 迪恩cul!教育课程培训 GBK&#xff0c;程序包中内附详细的安装教程&#xff0c;下载后按照教程安装即可 discuz迪恩cul!教育课程培训网站模板

qemu 安装ubuntu22.04虚拟机 -纯命令行-可ssh-带网络-编译安装 linux kernel-编译安装 kernel module

tar -xjf xxx.tar.bz2 1&#xff0c;预备系统盘数据 1.1 下载光盘 注意需要 liver-server $ wget https://releases.ubuntu.com/22.04.4/ubuntu-22.04.4-live-server-amd64.iso 1.2 挂载并拷贝 $ sudo mkdir /mnt/iso_ubuntu-22.04.4-live-server-amd64 $ sudo mount u…

星闪指向遥控,做家电交互的破壁人

“面壁者罗辑&#xff0c;我是你的破壁人。” 科幻小说《三体》中&#xff0c;当人类的基础科学被三体人封锁&#xff0c;变得停步不前&#xff0c;人类启动了自救的面壁计划&#xff0c;通过一次又一次破壁&#xff0c;找到战胜三体人的办法。 现实中&#xff0c;有一点已经成…

html--好看的手机充值单页

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>线上充值-首页</title><meta content"widthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0" name"viewport&…

【Vue-Vben-Admin】1、初次运行和介绍

【Vue-Vben-Admin】1、初次运行和介绍 Vben-Admin 初次运行和介绍 小小的介绍规定版本文件树安装依赖运行项目 小小的介绍 一款 Vue3 Typescript4 Vite2 后台管理项目&#xff0c;功能挺多的&#xff0c;还有组件库 规定版本 此个人文档规定版本为 2.8.0&#xff0c;可能版本…

AI大模型企业应用实战(16)-langchain核心组件

1 stuff 将文档列表插入到提示词中&#xff0c;适合文档较小或少量文档的应用。 2 refine 通过循环输入文档并迭代更新答案来构建响应&#xff0c;一次只传递给LLM一个文档&#xff0c;适合LLM上下文大小不能容纳的小文档。 参考&#xff1a; https://js.langchain.com/v0.1…

QT中利用qss来创建一个圆角矩形窗口,并利用Qt::WA_TranslucentBackground属性解决留白问题

1、效果 2、实现 QWidget#centralwidget {border-radius: 30px solid default;border-image: url(:/images/bk<

【Golang - 90天从新手到大师】Day06 - 数组

系列文章合集 Golang - 90天从新手到大师 数组是golang中最常用的一种数据结构,数组就是同一类型数据的有序集合 定义一个数组 格式: var name [n]type n为数组长度,n>0 且无法修改,type为数组的元素类型如: var a [2]int上面的例子定义了一个长度为2,元素类型为int的数组…

MySQL数据库(三):读取数据库数据

上一节&#xff0c;我们介绍了数据库的基本操作&#xff0c;以及最后演示了如何使用库来连接数据库&#xff0c;在实际应用中&#xff0c;我们通常需要按照指定的条件对数据库进行操作&#xff0c;即增删改查操作&#xff0c;这是非常重要的&#xff01;这一节我们继续通过一个…

Open3D 点云FPS最远点下采样

目录 一、概述 二、代码实现 2.1实现原理 2.2完整代码 三、实现效果 3.1原始点云 3.2采样后点云 3.3数据对比 一、概述 最远点采样&#xff08;Farthest Point Sampling, FPS&#xff09;是一种有效的下采样方法&#xff0c;用于从大量点云数据中选择具有代表性的子集。…

Fine-tuning在垂直领域的最佳实践指南

对于Fine-tuning是深度学习和机器学习领域一个特别重要的概念&#xff0c;并且每个企业的实践方式也会有所不同&#xff0c;今天我们就来聊一聊Fine-tuning。 什么是Fine-tuning Fine-tuning指的是模型微调&#xff0c;通常是指在一个预训练模型的基础上&#xff0c;通过在特…

redis数据库备份,回档,迁移工具使用

相信很多服务器开发者或者运维同学都遇到过这样的场景,比如我要从阿里云的redis集群把数据迁移到另外一个账号下的或者另外一个云服务商的redis集群,或者单机,或者哨兵模式redis实例,那么这种情况下我推荐给大家一款非常好用的工具,可以无缝的从A集群/单机/哨兵/已有的数据…

安装虚拟环境

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 Flask依赖两个外部库&#xff1a;Werkzeug和Jinja2。Werkzeug是一个WSGI&#xff08;在Web应用和多种服务器之间的标准 Python 接口&#xff09;工具…

频率和时间单位换算表

1. 频率单位和计数单位的换算关系 1.1 频率换算关系 1 MHz 等于 10^6 Hz 1.2 常用计数单位及其换算关系 1000 K 1 M 1000 M 1 G 分别表示&#xff1a; K (千) 10^3 M (兆) 10^6 G (吉) 10^9 2. 时间与频率的关系 频率&#xff08;Frequency&#xff09;和周期&#xff0…

Pytest和Unitest框架对比

在学到自动化的时候,很多同学都遇到了Pytest和Unitest框架,有的人是两个都学,但是学的不精只是知道分别怎么用.不了解两个区别是什么.有的是犹豫到底要学习那个框架.其实要做好自动化测试,是有必要了解不同框架之间的差异化的. Pytest 特点: Pytest采用了更简洁、更灵活的语法…

使用Let‘s Encrypt 申请通配符证书

为什么不使用阿里云/腾讯云等公有云厂商提供的免费证书? 上篇介绍了从阿里云上面申请免费证书,有效期一年 为网站配置https证书 公有云提供的证书不支持通配符&#xff0c;只支持某个确定的解析。 不管是二级域名还是三级域名&#xff0c;只要是具体的确定的地址&#xff0c;都…

记MySQL事务+消息队列引起的问题

问题描述&#xff1a; 先说一下流程&#xff1a;后端保存前端提交的图表信息&#xff0c;然后发送异步消息到消息队列&#xff0c;由下游服务去处理图表信息。 部署项目到服务器&#xff0c;验证项目功能的时候&#xff0c;出现了以下错误&#xff1a;数据库存在数据。下游服…