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

CSS基础:属性和关系选择器

字体属性

color

文本颜色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size

文本大小

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

注意:chrome浏览器接受最小字体是12px

font-weight

文本粗细

描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗 400等同默认,而700等同于bold
H1{font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style

文本字体样式

描述
normal默认值
italic定义斜体字

font-family

指定一个元素的字体

每个值用逗号分开
如果字体名称包含空格,它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";

背景属性

background-color属性

背景颜色

<div class="box"></div>
.box{width: 300px;height: 300px;background-color: palevioletred;
}

background-image属性

背景图像

元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{width: 600px;height: 600px;background-image: url("images/img1.jpg");
}

background-repeat属性

该属性设置如何平铺背景图像

说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺
.box{width: 600px;height: 600px;background-color: #fcc;background-image: url("images/img1.jpg");background-repeat: no-repeat;
}

background-size属性

设置背景图像大小

说明
length设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto
percentage计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
.box{width: 600px;height: 600px;background-image: url("images/img1.jpg");background-repeat: no-repeat;background-size: 100% 100%;
}

background-position属性

该属性设置背景图像的起始位置,其默认值是:0% 0%

说明
left top左上角
left center左 中
left bottom左 下
right top右上角
right center右 中
right bottom右 下
center top中 上
center center中 中
center bottom中 下
x% y%第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100% 。如果只指定了一个值,其他值默认是50%。默认是0% 0%
xpos ypos单位是像素
.box{width: 600px;height: 600px;background-color: #fcc;background-image: url("images/img1.jpg");background-repeat: no-repeat;background-position: center;
}

文本属性

text-align

指定元素文本的水平对齐方式

描述
left文本居左排列,默认值
right把文本排列到右边
center把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration

添加到文本的修饰,下划线、上划线、删除线等

描述
underline定义下划线
overline定义上划线
line-through定义删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform

控制文本的大小写

描述
captialize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent

text-indent 属性规定文本块中首行文本的缩进

p{text-indent:50px;
}

负值是允许的。如果值是负数,将向页面左缩进

表格属性

表格边框

指定CSS表格边框,使用border属性

table, td {border: 1px solid black; 
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性,向左,右,或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐

td { height:50px; vertical-align:bottom; }

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性

td { padding:15px; }

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色

table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

关系选择器

关系选择器分类

  1. 后代选择器
  2. 子代选择器
  3. 相邻兄弟选择器
  4. 通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素,中间用空格隔开

语法

E F{}
<ul><li>宝马</li><li>奔驰</li>
</ul><ol><li>奥迪</li>
</ol>
ul li{color:green;
}

子代选择器

定义

选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示

语法

E>F{}
<div> <a href="#">子元素1</a><p> <a href="#">孙元素</a> </p><a href="#">子元素2</a>
</div>
div>a{color:red
}

相邻兄弟选择器

定义

选择紧跟E元素后的F元素,用加号表示,选择相邻的第一个兄弟元素,只能向下选择

语法

E+F{}
<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>
h1+p{color:red;
}

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开,只能向下选择

语法

E~F{}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1~p{color:red;
}

相关文章:

CSS基础:属性和关系选择器

字体属性 color 文本颜色 div{ color:red;} div{ color:#ff0000;} div{ color:rgb(255,0,0);} div{ color:rgba(255,0,0,.5);}font-size 文本大小 h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}注意&#xff1a;chrome浏览器接受最小字体是12px font-we…...

设计模式:原型模式解决对象创建成本大问题

一、问题场景 现在有一只猫tom&#xff0c;姓名为: tom, 年龄为&#xff1a;1&#xff0c;颜色为&#xff1a;白色&#xff0c;请编写程序创建和tom猫属性完全相同的10只猫。 二、传统解决方案 public class Cat {private String name;private int age;private String color;…...

驱动开发(二)

一、驱动流程 驱动需要以下几个步骤才能完成对硬件的访问和操作&#xff1a; 模块加载函数 module_init注册主次设备号 <应用程序通过设备号找到设备>驱动设备文件 <应用程序访问驱动的方式> 1、手动创建 &#xff08;mknod&#xff09;2、程序自动创建file_oper…...

《狂飙》大结局,这22句经典台词值得细品

最近爆火的热播剧《狂飙》大家都看了吗&#xff1f; 剧情紧凑、演技炸裂、豆瓣评分9.0&#xff0c;可以说是开年评分最高的一部国产剧。 ​ 虽然大结局了。 里面有很多经典台词&#xff0c;值得每个人细细品味。 01 这世界不缺梦想 有本事你就去实现它 02 你这么善良 怎么跟坏…...

【计算机网络期末复习】第二章 物理层

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4e3;专栏定位&#xff1a;为想复习学校计算机网络课程的同学提供重点大纲&#xff0c;帮助大家渡过期末考~ &#x1f4da;专栏地址&#xff1a; ❤️如果有收获的话&#xff0c;欢迎点…...

多核异构核间通信-mailbox/RPMsg 介绍及实验

1. 多核异构核间通信 由于MP157是一款多核异构的芯片&#xff0c;其中既包含的高性能的A7核及实时性强的M4内核&#xff0c;那么这两种处理器在工作时&#xff0c;怎么互相协调配合呢&#xff1f; 这就涉及到了核间通信的概念了。 IPCC (inter-processor communication contr…...

【Rust日报】2023-02-11 从头开始构建云数据库 RisingWave - 为什么我们从 C++ 转向 Rust...

GTK4发布v0.60gtk4-rs代码库包含GTK4的Rust crates。还有个庞大的GObject库生态系统&#xff0c;其中许多库基于gtk-rs中包含的Rust绑定工具。 特别是&#xff1a;gtk-rs-core&#xff0c;一些核心库的绑定&#xff0c;例如 glib、gio、pango、graphenegstreamer-rs&#xff0c…...

Linux驱动开发(一)

linux驱动学习记录 一、背景 在开始学习我的linux驱动之旅之前&#xff0c;先提一下题外话&#xff0c;我是一个c语言应用层开发工作人员&#xff0c;在工作当中往往会和硬件直接进行数据的交互&#xff0c;往往遇到数据不通的情况&#xff0c;常常难以定位&#xff0c;而恰巧…...

Spring MVC 之返回数据(静态页面、非静态页面、JSON对象、请求转发与请求重定向)

文章目录1. 默认情况下返回静态页面2. 返回一个非静态页面的数据2.1 ResponseBody 返回页面内容2.2 RestController ResponseBody Controller3. 实现登录功能&#xff0c;返回 JSON 对象3.1 前端使⽤ ajax&#xff0c;后端返回 json 给前端3.2 前端发送 JSON 的标准格式4. 请…...

leetcode-每日一题-2335(简单,贪心)

自己打表看一下过程就可以发现&#xff0c;其实就是每次选两个大的进行--之后秒数加1即可现有一台饮水机&#xff0c;可以制备冷水、温水和热水。每秒钟&#xff0c;可以装满 2 杯 不同 类型的水或者 1 杯任意类型的水。给你一个下标从 0 开始、长度为 3 的整数数组 amount &am…...

Verilog语法之数学函数

Verilog-2005支持一些简单的数学函数&#xff0c;其参数的数据类型只能是integer和real型。 Integer型数学函数 $clog2是一个以2为底的对数函数&#xff0c;其结果向上取整&#xff0c;返回值典型的格式&#xff1a; integer result; result $clog2(n); 最典型的应用就是通过…...

【手撕面试题】JavaScript(高频知识点一)

目录 面试官&#xff1a;请你简述 var、let、const 三者之间的区别&#xff1f; 面试官&#xff1a;请你谈谈对深拷贝与浅拷贝的理解 面试官&#xff1a;输入URL的那一瞬间浏览器做了什么&#xff1f; 面试官&#xff1a;说一说cookie sessionStorage localStorage 区别&am…...

如何用PHP实现消息推送

什么是消息推送 通过服务器自动推送消息到客户端(浏览器&#xff0c;APP&#xff0c;微信)的应用技术。 2. 为什么要使用消息推送技术 通常情况下都是用户发送请求浏览器显示用户需要的信息。推送技术通过自动传送信息给用户&#xff0c;来减少用于网络上搜索的时间。它根据…...

电子学会2020年6月青少年软件编程(图形化)等级考试试卷(四级)答案解析

青少年软件编程&#xff08;Scratch&#xff09;等级考试试卷&#xff08;四级A卷&#xff09; 分数&#xff1a;100.00 题数&#xff1a;30 一、单选题&#xff08;共15题&#xff0c;每题2分&#xff0c;共30分&#xff09; 1. 执行下图程序后&#xff0c;“花名…...

DaVinci:调色版本

调色版本 Grade Version记录着片段的全部调色信息。将一种调色风格或效果&#xff0c;保存为一个调色版本&#xff0c;从而可在多个调色版本之间查看、比较、挑选或者渲染输出。调色版本类型本地版本Local Versions在没有创建新的调色版本之前&#xff0c;片段的调色信息默认记…...

【C++初阶】十二、STL---反向迭代器的实现

目录 一、反向迭代器 二、反向迭代器的实现 一、反向迭代器 之前的模拟实现vector、list 的时候&#xff0c;这些都是实现了正向迭代器&#xff0c;反向迭代器都没有实现&#xff0c;这里就要实现反向迭代器 反向迭代器也是适配器&#xff08;配接器&#xff09;的一种&#…...

day 43|● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

1049. 最后一块石头的重量 II 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果…...

[SSD固态硬盘技术 0] SSD的结构和原理导论

版权声明&#xff1a; 本文禁止转载机械硬盘的存储系统由于内部结构,其IO访问性能无法进一步提高,CPU与存储器之间的性能差距逐渐扩大。以Nand Flash为存储介质的固态硬盘技术的发展&#xff0c;性能瓶颈得到缓解。1. 什么是SSD固态硬盘&#xff08;Solid State Drives&#xf…...

Vue (3)

文章目录1. 数据代理1.1 回顾1.2 开始2. 事件处理2.1 v-on:click 点击事件2.2 事件修饰符2.3 键盘事件3. 计算属性3.1 插值语法实现3.2 methods实现3.3 计算属性实现4. 监视属性4.1 深度监视4.2 监视属性的简写形式4.3 watch 与 computed 对比1. 数据代理 在学习 数据代理 时 先…...

SQL语句,常用的DDL表操作语句

-- ddl sql 语句 -- 创建表 create table user_t( id int primary key auto_increment, -- 自增主键 name varchar(50) ); -- 查看表结构 desc user_t; desc user_test; -- 重命名表 alter table user_t rename to user_test; -- 查询数据库表 show tables; -- 添…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

云原生安全实战:API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...