12-1-CSS 常用样式属性


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • CSS 常用样式属性
    • 1 CSS 三角形
    • 2 CSS 用户界面样式
      • 2.1 什么是界面样式
      • 2.2 鼠标样式 cursor
      • 2.3 轮廓线 outline
      • 2.4 防止拖拽文本域 resize
    • 3 CSS 阴影
      • 3.1 盒子阴影
      • 3.2 文字阴影
    • 4 透明度(opacity 与 rgba)
    • 5 vertical-align(了解)
    • 6 CSS content 计数器(了解)

CSS 常用样式属性

1 CSS 三角形

网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。

一张图, 你就知道 CSS 三角是怎么来的了, 做法如下:

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-left-color: red;
}

在这里插入图片描述

案例:提示框

2 CSS 用户界面样式

2.1 什么是界面样式

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。

2.2 鼠标样式 cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

描述
default默认光标(通常是一个箭头)
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针(一只手)
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右(东)移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize此光标指示矩形框的边缘可被向上(北)移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize此光标指示矩形框的边缘可被向下移动(南)。
w-resize此光标指示矩形框的边缘可被向左移动(西)。
text此光标指示文本。
wait此光标指示程序正忙(通常是一只表或沙漏)。
help此光标指示可用的帮助(通常是一个问号或一个气球)。

2.3 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。

input {outline: none; }

2.4 防止拖拽文本域 resize

实际开发中,我们文本域右下角是不可以拖拽的。

textarea{ resize: none;}

3 CSS 阴影

3.1 盒子阴影

CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

取值:

说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。

注意

  1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
  2. 盒子阴影不占用空间,不会影响其他盒子排列

3.2 文字阴影

在 CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本。

语法:

text-shadow: h-shadow v-shadow blur color;

取值:

描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

4 透明度(opacity 与 rgba)

在 CSS 中,我们可以使用 opacity 属性设置盒子透明度。

语法:

opacity: value;

取值:

描述
value指定不透明度。从0.0(完全透明)到1.0(完全不透明)

5 vertical-align(了解)

CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

语法:

vertical-align : baseline | top | middle | bottom

取值:

描述
baseline默认。元素放置在父元素的基线上。
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
length具体数值。正数偏移基线上移,负数偏移基线下移

在这里插入图片描述

x-height:小写英文字母x的高度。

x-height / 2:x字母在一行的一般的高度,中线就是以 x-height / 2 处为参考标准。

(掌握)图片、表单和文字对齐

图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。

在这里插入图片描述

解决办法:

  • 给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
  • 把图片转换为块级元素 display: block;

6 CSS content 计数器(了解)

CSS 计数器通过一个变量来设置,根据规则递增变量。

  • counter-reset - 创建或者重置计数器,从0开始
  • counter-increment - 递增变量
  • content - 插入生成的内容
  • counter() 函数 - 将计数器的值添加到元素
属性描述
content使用 ::before 和 ::after 伪元素来插入自动生成的内容
content: "第" counter(month) "月";
counter-increment递增一个或多个值,默认是自增1
counter-increment: count1 2;这里是自增2
counter-reset创建或重置一个或多个计数器,从0开始
counter-reset: count1; 单个
counter-reset: count1 count2;多个
counter()函数 - 将计数器的值添加到元素

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

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

相关文章

【Spring】AOP——使用@around实现面向切面的方法增强

工作业务中,有大量分布式加锁的重复代码,存在两个问题,一是代码重复率高,二是容易产生霰弹式修改,使用注解和AOP可以实现代码复用,简化分布式锁加锁和解锁流程。 around注解是AspectJ框架提供的&#xff0c…

RK3568测试

作者简介: 一个平凡而乐于分享的小比特,中南民族大学通信工程专业研究生在读,研究方向无线联邦学习 擅长领域:驱动开发,嵌入式软件开发,BSP开发 作者主页:一个平凡而乐于分享的小比特的个人主页…

Prometheus+grafana环境搭建Docker服务(docker+二进制两种方式安装)(八)

由于所有组件写一篇幅过长,所以每个组件分一篇方便查看,前七篇链接如下 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabbitmq(docker二进制两种方式安装)(二)-CSDN博客 Prometheusgrafana环…

java数据结构与算法刷题-----LeetCode172. 阶乘后的零

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 数学:阶乘的10因子个数数学优化:思路转变为求5的倍数…

【蓝桥杯选拔赛真题57】C++字符串反转 第十四届蓝桥杯青少年创意编程大赛 算法思维 C++编程选拔赛真题解

目录 C字符串反转 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、推荐资料 C字符串反转 第十四届蓝桥杯青少年创意编程大赛C选拔赛真题 一、题目要求 1、编程实现 给定一个只包含大写字母"M…

C++进阶--C++11(2)

C11第一篇 C11是C编程语言的一个版本,于2011年发布。C11引入了许多新特性,为C语言提供了更强大和更现代化的编程能力。 可变参数模板 在C11中,可变参数模板可以定义接受任意数量和类型参数的函数模板或类模板。它可以表示0到任意个数&…

蓝桥杯 第2155题质因数个数 C++ Java Python

题目 思路和解题方法 目标是计算给定数 n 的质因数个数。可以使用了试除法来找到 n 的所有质因数 读取输入的数 n。从 2 开始遍历到 sqrt(n),对于每个数 i: 如果 n 能被 i 整除,则进行以下操作: 将 n 除以 i,直到 n 不…

leetcode.面试题 02.07. 链表相交

题目 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点,返回 null 。 图示两个链表在节点 c1 开始相交: 思路 假a在链表A上移动,b在链表B上移动,a移动完在B上开始&…

鸿蒙Lottie动画-实现控制动画的播放、暂停、倍速播放、播放顺序

介绍 本示例展示了lottie对动画的操作功能。引入Lottie模块,实现控制动画的播放、暂停、倍速播放、播放顺序、播放到指定帧停止或从指定帧开始播放、侦听事件等功能,动画资源路径必须是json格式。 效果预览 使用说明: 进入页面默认开始201…

铸铁平台的平面度

铸铁平台的平面度是指平台的表面平整程度,即平台表面与其理论平面之间的最大偏差。平台的平面度通常使用国际标准符号GD&T中的平面度符号(ⓨ)表示,单位为毫米(mm)或微米(μm)。 …

docker搭建EFK(未完待续)

目录 elasticsearch1.创建网络2.拉取镜像3.创建容器如果出现启动失败,提示目录挂载失败,可以考虑如下措施 开放防火墙端口4.验证安装成功重置es密码关闭https连接创建kibana用户创建新账户给账户授权 kibana1.创建容器2.验证安装成功3.es为kibana创建用户…

2024年第八届人工智能与虚拟现实国际会议(AIVR 2024)即将召开!

2024年第八届人工智能与虚拟现实国际会议(AIVR 2024)将2024年7月19-21日在日本福冈举行。人工智能与虚拟现实的发展对推动科技进步、促进经济发展、提升人类生活质量等具有重要意义。AIVR 2024将携手各专家学者,共同挖掘智能与虚拟的无限可能…

Day03-Ansible playbook

Day03-Ansible playbook 1. Ansible Playbook基本概述1.1 什么是playbook?1.2 Ansible playbook与AD-Hoc的关系1.3 Ansible Playbook书写格式1.4 Ansible Playbook练习实验1.4.1 playbook剧本初使用1.4.2 playbook剧本-部署配置nfs1.4.3 playbook剧本-部署配置lnmp 1. Ansible…

多线程学习-线程池

目录 1.线程池的作用 2.线程池的实现 3.自定义创建线程池 1.线程池的作用 当我们使用Thread的实现类来创建线程并调用start运行线程时,这个线程只会使用一次并且执行的任务是固定的,等run方法中的代码执行完之后这个线程就会变成垃圾等待被回收掉。如…

7(8)-2-CSS 盒子模型

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 文章目录 CSS 盒子模型1 盒子模型(Box Model)组成2 边框&#x…

传统海外仓的管理模式有什么缺点?使用位像素海外仓系统的海外仓有什么优势?

传统的海外仓管理模式主要需要大量的人工操作和相对简单的信息化手段进行仓库的日常运营。因此,传统海外仓的运作比较依赖仓库员工的手工记录、核对和处理各种仓储和物流信息。 然而,传统海外仓管理模式通常存在一些缺点: 效率低下 因为需…

LLMOps快速入门,轻松开发部署大语言模型

大家好,如今我们能够与ChatGPT进行轻松互动:只需输入提示,按下回车,就能迅速得到回应。然而,这个无缝互动的底层,是一系列复杂而有序的自动执行步骤,即大型语言模型运营(LLMOps&…

postgresql数据库|

概述 Oracle_fdw 是一种postgresql外部表插件,可以读取到Oracle上面的数据。是一种非常方便且常见的pg与Oracle的同步数据的方法 配置Oracle环境 Oracle_fdw 的编译依赖pg_config和Oracle的客户端环境 pg_config 是什么呢?其实就是postgresql的一个可执…

OpenFOAM学习笔记

OpenFOAM 计算流体力学:用计算机求解流体控制方程,来模拟真实情况下,流体的流动状态OpenFOAM的离散方法:有限体积法,将整个空间划分成若干个控制体OpenFOAM使用的网格系统:同位网格(Collocated…

动态属性的响应式问题和行内编辑的问题

动态属性的响应式问题 通过点击给目标添加动态数据,该数据不具备响应式特性 如下图: 点击编辑,前面的数据框会变成输入框,点取消会消失 // 获取数据 async getList () {const res await xxxthis.list res.data.rows// 1. 获…