前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频

文章目录

  • 📚CSS三大属性
    • 🐇层叠性
    • 🐇继承性
    • 🐇优先级
  • 📚CSS常用属性
    • 🐇像素的概念
    • 🐇颜色的表示
      • ⭐️表示方式一:颜色名
      • ⭐️表示方式二:rgb或rgba
      • ⭐️表示方式三:HEX或HEXA
      • ⭐️表示方式四:HSL或HSLA
    • 🐇CSS字体属性
      • ⭐️字体大小
      • ⭐️字体族
      • ⭐️字体风格
      • ⭐️字体粗细
      • ⭐️字体复合写法
    • 🐇CSS文本属性
      • ⭐️文本颜色
      • ⭐️文本间距
      • ⭐️文本修饰
      • ⭐️文本缩进
      • ⭐️文本对齐_水平
      • ⭐️行高
      • ⭐️文本对齐_垂直
      • ⭐️文本对齐_所在那一行
    • 🐇CSS列表属性
    • 🐇CSS表格属性
      • ⭐️边框相关属性(其他元素也能用)
      • ⭐️表格独有属性(只有table标签才能使用)
    • 🐇CSS背景属性
    • 🐇CSS鼠标属性

⭐️前文回顾:前端 | (四)CSS基础及CSS选择器 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p57-p86,本文对应p87-p112
⭐️补充网站:W3school,MDN

📚CSS三大属性

🐇层叠性

  • 如果发生了样式冲突(元素的同一个样式名,被设置了不同的值),那就回根据一定的规则(选择器优先级),进行样式的层叠(覆盖)

🐇继承性

  • 元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。优先继承离得近的
  • 参照MDN网站,可查询属性是否可被继承。

🐇优先级

  • !important >行内样式>id选择器>类选择器>元素选择器>*>继承的样式
  • 具体比较需要计算权重,详见前文。

📚CSS常用属性

🐇像素的概念

在这里插入图片描述

🐇颜色的表示

⭐️表示方式一:颜色名

在这里插入图片描述

⭐️表示方式二:rgb或rgba

在这里插入图片描述在这里插入图片描述在这里插入图片描述

⭐️表示方式三:HEX或HEXA

在这里插入图片描述在这里插入图片描述

⭐️表示方式四:HSL或HSLA

在这里插入图片描述在这里插入图片描述

🐇CSS字体属性

⭐️字体大小

font-size:控制字体的大小

div{font-size:40px;
}

在这里插入图片描述

这里是引用

⭐️字体族

font-family:控制字体类型

div{font-family:"STCaiyun","Microsoft YaHei",sans-serif
}

在这里插入图片描述

⭐️字体风格

font-style:控制字体是否为斜体。

div{font-style:italic;
}

在这里插入图片描述

⭐️字体粗细

font-weight:控制字体的粗细。

div{font-weight:bold;
}
div{font-weight:600;
}

在这里插入图片描述

⭐️字体复合写法

  • font:可以把上述字体样式合并成一个属性。
  • 编写规则
    • 字体大小、字体族必须写上。
    • 字体族必须是最后一位、字体大小必须是倒数第二位。
    • 各个属性间用空格隔开。
  • 实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用font-size属性。

🐇CSS文本属性

⭐️文本颜色

在这里插入图片描述

⭐️文本间距

在这里插入图片描述

⭐️文本修饰

在这里插入图片描述

⭐️文本缩进

在这里插入图片描述

⭐️文本对齐_水平

在这里插入图片描述

⭐️行高

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

⭐️文本对齐_垂直

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文本对齐_垂直方向</title><style>div{font-size: 40px;height: 400px;/* 垂直居中:line-height=height *//* line-height: 400px; *//* 底部对齐,height*2 - font-size */line-height: 760px;background-color: pink;}</style>
</head>
<body><div>尚硅谷</div>
</body>
</html>

⭐️文本对齐_所在那一行

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文本对齐_垂直方向</title><style>div{font-size: 100px;height: 300px;background-color: pink;}span{font-size: 40px;background-color: orange;vertical-align: middle;}</style>
</head>
<body><div>atguigu尚硅谷x<span>x前端</span></div>
</body>
</html>

在这里插入图片描述

🐇CSS列表属性

在这里插入图片描述

🐇CSS表格属性

⭐️边框相关属性(其他元素也能用)

在这里插入图片描述

⭐️表格独有属性(只有table标签才能使用)

在这里插入图片描述

🐇CSS背景属性

在这里插入图片描述

🐇CSS鼠标属性

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

火狐安卓版支持油猴了!后面将支持更多扩展插件

日前火狐浏览器每夜构建版的安卓版已经带来了更多扩展程序支持&#xff0c;这其中就包括大名鼎鼎的油猴扩展程序。本次火狐浏览器每夜构建版更新新增五款扩展程序支持&#xff0c;并且按照谋智基金会说法还会支持更多的扩展程序。 下载地址&#xff1a;https://ftp.mozilla.org…

WEB:FlatScience

背景知识 sql注入 SQLite数据库知识 SQLite3注入方法 题目 用dirsearch进行扫描&#xff0c;下面几个关键目录&#xff1a;robots.txt&#xff0c;login.php&#xff0c;admin.php&#xff0c;剩下的目录就是一些pdf格式的论文了 一个一个访问并查看源代码&#xff0c;在查看l…

windows下安装consul、springboot整合consul

Spring Cloud Consul通过自动配置和绑定到Spring Environment和其他Spring编程模型习语&#xff0c;为Spring Boot应用程序提供Consul集成。通过一些简单的注解&#xff0c;可以快速启用和配置应用程序内的常用模式&#xff0c;并使用Hashicorp的Consul构建大型分布式系统。提供…

检测到错误页面web应用服务器版本信息泄露

详细描述 Web服务器未能正确处理异常请求导致Web服务器版本信息泄露&#xff0c;攻击者收集到服务器信息后可进行进一步针对性攻击。 解决办法 临时修复建议如下&#xff1a; 1、关闭web服务器错误提示。 2、关闭运行平台的错误提示。 3、建立错误机制&#xff0c;不要把真实…

MySQL八股学习总览-from 小林coding

MySQL八股学习总览-from 小林coding MySql执行流程连接MySQL服务器查询缓存解析SQL执行SQL预处理器优化器执行器 MySql执行流程 连接MySQL服务器 经过如下的命令,就可以与MySQL服务器建立起连接,三次握手 mysql -h$ip -u$user -p服务端查询多少个客户端连接 show processlis…

干货分享:商城系统开发方式

商城系统是一种为了满足电子商务需求而开发的系统&#xff0c;它能够实现在线购物、支付、订单管理等功能。在当今互联网时代&#xff0c;商城系统的开发方式多种多样。那么&#xff0c;商城系统开发方式有哪些呢&#xff1f; 1、完全独立自主开发 完全独立自主开发是指企业根…

【C++】仿函数(less)

C中的仿函数 class Solution { public:struct cmp{bool operator()(const pair<string,int>&kv1,const pair<string,int>&kv2){if(kv1.second<kv2.second) return true;if(kv1.secondkv2.second&&kv1.first>kv2.first) return true;return …

TCP/IP详解

目录 一、OSI参考模型 1.图示 2.OSI七层模型各自作用 3.七层通信过程 二、IP协议 1.IPv4首部 2.IPv6首部 三、TCP协议 1.tcp首部格式 2.握手挥手图示 3.握手流程 4.为什么要三次握手&#xff1f; 5.四次挥手流程 6.为什么要四次分手&#xff1f; 7.为什么要等待…

后端Long类型传到前端精度丢失的问题

问题出现&#xff1a;后端的Java Bean的id属性是用的Long类型对应数据库主键使用bigint类型&#xff0c;当使用JSON方式传递该数据给前端时&#xff0c;前端接收到的数据末尾会变成0。&#xff08;发生的精度丢失问题&#xff09; 问题原因&#xff1a;Java中的long能表示的范围…

数据排布与跨距对齐

1 数据排布 1.1 数据排布的概念 在深度学习框架中&#xff0c;特征图通常以四维数组的形式呈现&#xff0c;这四个维度分别是&#xff1a;批量大小N&#xff0c;特征图通道数C&#xff0c;特征图高度H&#xff0c;特征图宽度W。数据排布&#xff08;Layout&#xff09;指的就…

http1.0、http1.1 http 2.0

HTTP/1.0是无状态、无连接的应用层协议。 无连接 无连接&#xff1a;每次请求都要建立连接&#xff0c;需要使用 keep-alive 参数建立长连接、HTTP1.1默认长连接keep-alive   无法复用连接&#xff0c;每次发送请求都要进行TCP连接&#xff0c;TCP的连接释放都比较费事&…

【优选算法题练习】day6

文章目录 一、76. 最小覆盖子串1.题目简介2.解题思路3.代码4.运行结果 二、704. 二分查找1.题目简介2.解题思路3.代码4.运行结果 三、34. 在排序数组中查找元素的第一个和最后一个位置1.题目简介2.解题思路3.代码4.运行结果 总结 一、76. 最小覆盖子串 1.题目简介 76. 最小覆…

魔术之舞:用Python编织无懈可击的WebUI自动化测试奇迹

文末附有精心准备的WebUI自动化测试30道面试题链接~ 一、引言 A. 引入WebUI自动化测试的重要性和挑战 Web应用程序的快速发展和普及使得Web用户界面&#xff08;WebUI&#xff09;自动化测试变得异常重要。随着Web应用程序的复杂性和功能需求的增加&#xff0c;传统的手动测试…

2023秋招,网络安全面试题

Hello&#xff0c;各位小伙伴&#xff0c;我作为一名网络安全工程师曾经在秋招中斩获&#x1f51f;个offer&#x1f33c;&#xff0c;并在国内知名互联网公司任职过的职场老油条&#xff0c;希望可以将我的面试的网络安全大厂面试题和好运分享给大家~ 转眼2023年秋招已经到了金…

04.MySQL——用户管理

用户管理 用户管理的价值 用户 用户信息 MySQL中的用户&#xff0c;都存储在系统数据库mysql的user表中 use mysql;select host,user,authentication_string from user;host&#xff1a; 表示这个用户可以从哪个主机登陆&#xff0c;如果是localhost&#xff0c;表示只能从…

Qt 获得QTableview所选中的行的某一列数据

1、点击QtableView控件-》右键-》跳到槽-》选择 2、编写槽函数信息 void XXX::on_tableView_CalTable_clicked(const QModelIndex &index) {int rowindex.row();//获得当前行索引int colindex.column();//获得当前列索引QModelIndex index1 CalViewModel->index(row,2)…

Enterprise:通过 App search 摄入数据

App Search 是 Elastic Enterprise Search 的一部分&#xff0c;Elastic Enterprise Search 是由 Elasticsearch 提供支持的内容搜索工具集合。 最初由 App Search 引入的一些功能&#xff08;例如网络爬虫&#xff09;现在可以直接通过企业搜索使用。 将这些功能与其他企业搜…

SpringCloud系列:负载均衡组件-Ribbon

作者平台&#xff1a; | CSDN&#xff1a;blog.csdn.net/qq_41153943 | 掘金&#xff1a;juejin.cn/user/651387… | 知乎&#xff1a;www.zhihu.com/people/1024… | GitHub&#xff1a;github.com/JiangXia-10… 本文一共4529字&#xff0c;预计阅读12分钟 前言 前面几…

idea 有时提示找不到类或者符号,日志报java: 找不到符号的解决

解决一&#xff1a; idea maven编译成功&#xff0c;运行失败提示找不到符号&#xff0c;主要是get和set方法找不到符号&#xff0c;此时就是idea的lombok版本冲突 IDEA版本导致的Lombok失效&#xff0c;需要更新lombok版本到1.18.14及之后版本得到解决 <dependency>&…