css3 初步了解

1、css3的含义及简介

        简而言之,css3 就是 css的最新标准,使用css3都要遵循这个标准,CSS3 已完全向后兼容,所以你就不必改变现有的设计,

2、一些比较重要的css3 模块

选择器

1、标签选择器,也称为元素选择器。

标签选择器的基本形式如下:tagName{property:value},其中tagName是标签名称,property是css的属性。

2、类选择器。

类选择器用来为一系列标签定义相同的呈现方式,常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称,这是由css编写者自己命名。(所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。)

3、ID选择器。

ID选择器定义的是某一个特定的html元素,一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下:#idValue{property:value}。其中idValue是ID选择器的名称,可以由CSS编写者自己编写。(所有浏览器都支持)

4、全局选择器。

全局选择器就是对所有的htmlz元素起作用。语法格式为: *{propery:value}。其中“*”表示对所有元素起作用,property表示css的属性,value表示属性值。

5、伪类选择器。

伪类选择器主要应用在标签上,它由四种状态:未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。

....等等

盒模型

主要就是两种模型:标准盒模型及怪异盒模型

标准盒模型:元素展示的宽高大于元素实际的宽高

    box-sizing: content-box;

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

怪异盒模型:元素展示的宽高等于元素实际的宽高

box-sizing: border-box;

width(宽) = 元素实际宽度

height(高) = 元素实际高度

背景和边框

背景

  • background-image: 设置背景图
  • background-size:背景大小
  • background-origin:

    指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。

  • background-clip:剪裁属性是从指定位置开始绘制

边框

  • border-radius
  • box-shadow
  • border-image

文字特效

文本效果

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

字体

@font-face 使用自定义字体

以前只能使用电脑自带的字体,现在通过 @font-face 可以使用自定义字体

2D/3D转换

transform:

  • translate() 上下左右偏移
  • rotate() 旋转
  • scale() 放大缩小
  • skew() 倾斜

过渡

transition:

        过渡时间-transition-duration

        延迟过渡时间-transition-delay

        过度函数-transition-timing-function

动画

        animation: 放定义好的动画 持续时间 至少要有这两

        @keyframes:定义动画

弹性盒子

display:flex

justify-content: 控制主轴布局

align-items: 另一条轴的布局

flex-direction: 控制主轴是垂直的还是水平的

flex-wrap: 是否允许换行

上面是常用属性,还有更多属性,请自行搜索喔

栅格布局

grid

做类似这种比较规整的布局,就使用栅格布局,相对于弹性布局,是更急敏捷的

.grid-container {/* 设置盒子为栅格布局 */display: grid;/* 设置每行的高度 */grid-template-rows: 100px 100px 100px 100px;/* 设置每列的宽度 */grid-template-columns: 100px 100px 100px 100px;
}

注意:以上代码不是,图的样式,这里只是举个例子,栅格布局的使用而已,以下三属性,可以设置栅格布局的间距

  • grid-column-gap
  • grid-row-gap
  • grid-gap

暂时先这样记录一下吧

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

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

相关文章

龙迅LT9211D MIPI(DSI/CSI)转LVDS和集创北方ICN6202 MIPIDSI转LVDS比对

龙迅LT9211D描述: Lontium LT9211D是一款高性能的MIPI DSI/CSI- 2到双端口LVDS转换器。LT9211D反序列化输入的MIPI视频数据,解码数据包,并将格式化的视频数据流转换为AP和移动显示面板或摄像机之间的LVDS发射机输出。LT9211D支持最大14 dB输…

git远程分支覆盖本地分支

git fetch --all git reset --hard origin/master (这里master要修改为对应的分支名) git pull

给Elasticsearch-ik分词器添加额外的分词字典

默认分词 可以看到 马拉巴尔 被拆分了 GET /news/_analyze {"text":"四国联盟将在澳大利亚举行“马拉巴尔2023”演习","analyzer": "ik_max_word" }... {"token" : "马拉","start_offset" : 13,"…

【极客时间-系列教程】深入剖析Kubernetes-开篇词 | 打通“容器技术”的任督二脉

开篇词 | 打通“容器技术”的任督二脉 学习技术的最快途径是什么?有时候和同事们一起在讨论这个事情 我想想有以下几点 首先是实操,只看不练等于空研究官方文档,官网是最全的需要认真研究必须项目中使用,不然就忘掉了 这些说的…

微信小程序 30分钟倒计时功能

ps:凑个数 getTimeDiff(date) {let _this = this;let curTime = new Date(date)_this.countDown(_this.timeFormatConvert(new Date(curTime.setMinutes(curTime.getMinutes() + 30))))},timeFormatConvert(e) {const Y = e.getFullYear(); // 年const M = this.prefixZero(e.…

c# 抽象类

c#抽象类 namespace demo1 {/// <summary>/// 抽象类是作为一种抽象的概念&#xff0c;是基类/// 在抽象类中声明方法&#xff0c;加上abstract就是抽象方法。所有有抽象类派生出来的都要重载实现抽象方法/// 抽象方法不可以使用virtual、static、和prevate修饰/// 抽象…

谷歌提出AGI的6大原则,和5大能力等级

随着ChatGPT等大模型的出现,AGI概念正在从哲学层面快速转向实际应用落地&#xff0c;并且ChatGPT已经展示出了初级AGI的功能&#xff08;如AutoGPT&#xff09;,有不少专家认为&#xff0c;AGI时代可能在10年内到来。 因此&#xff0c;需要一个明确的技术框架来讨论和衡量不同…

Linux下基本操作命令

一、基础命令 1. pwd 命令 pwd命令用于显示当前所在的工作目录的全路径名称。该命令无需任何参数&#xff0c;只需在终端窗口中输入 pwd 命令即可使用。 2. cd 命令 cd命令用于更改当前工作目录。该命令需要一个参数&#xff1a;目标目录名称。例如&#xff0c;若要进入 Do…

WPF UI样式介绍

WPF&#xff08;Windows Presentation Foundation&#xff09;是微软的一个用于创建桌面客户端应用程序的UI框架。WPF使用XAML&#xff08;可扩展应用程序标记语言&#xff09;作为其界面设计语言&#xff0c;这使得开发者能够以声明性方式定义UI元素和布局。 在WPF中&#xf…

Linux学习笔记3-GPIO(1)

学习单片机时最开始也是从GPIO开始的&#xff0c;Linux的主芯片I.MX6UL有124个GPIO&#xff0c;当然很多是复用的&#xff0c;与之对比&#xff0c;STM32F407系列的单片机GPIO口是112个。回顾之前单片机的学习&#xff0c;大部分的GPIO功能是通过HAL库函数调用的&#xff0c;例…

腾讯云标准型SA4服务器AMD处理器性能测评

腾讯云服务器标准型SA4实例CPU采用AMD处理器&#xff0c;新一代腾讯云自研星星海双路服务器&#xff0c;搭配AMD EPYC Genoa处理器&#xff0c;内存采用最新 DDR5&#xff0c;默认网络优化&#xff0c;最高内网收发能力达4500万pps&#xff0c;最高内网带宽可支持100Gbps。阿腾…

IP-guard flexpaper远程命令执行漏洞复现 [附POC]

文章目录 IP-guard flexpaper RCE漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 IP-guard flexpaper RCE漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测…

acwing算法基础之搜索与图论--匈牙利算法求二分图的最大匹配数

目录 1 基础知识2 模板3 工程化 1 基础知识 二分图中的最大匹配数&#xff1a;从二分图中选择一些边&#xff08;这些边连接集合A和集合B&#xff0c;集合A中结点数目为n1&#xff0c;集合B中结点数目为n2&#xff09;&#xff0c;设为集合S&#xff0c;其中任意两条边不共用一…

Django框架FAQ

文章目录 问题1:Django数据库恢复问题2:null和blank的区别3.报错 django.db.utils.IntegrityError: (1062, “Duplicate entry ‘‘ for key ‘mobile‘“)4.报错 Refused to display ‘url‘ in a frame because it set ‘X-Frame-Options‘ to deny5.报错 RuntimeError: cryp…

NovelD: A Simple yet Effective Exploration Criterion论文笔记

NovelD:一种简单而有效的探索准则 1、Motivation 针对稀疏奖励环境下的智能体探索问题&#xff0c;许多工作中采用各种内在奖励(Intrinsic Reward)设计来指导困难探索环境中的探索 &#xff0c;例如&#xff1a; ICM&#xff1a;基于前向动力学模型的好奇心驱动探索RND&…

CCF编程能力等级认证GESP—C++1级—样题1

CCF编程能力等级认证GESP—C1级—样题1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09;判断题&#xff08;每题 2 分&#xff0c;共 20 分&#xff09;编程题 (每题 25 分&#xff0c;共 50 分)第一题第二题 参考答案单选题判断题编程题1编程题2 单选题&#xf…

Linux文件系统

1.基础IO &#xff08;1&#xff09;文件操作 在C语言中&#xff0c;用来进行文件操作的函数有很多&#xff0c;比如&#xff1a; 所谓文件操作&#xff0c;简而言之就是通过语言层面向系统层面进行函数调用&#xff0c;命令操作系统为在磁盘上为其创建文件&#xff0c;那么这些…

企业级源代码安全审计咨询案例

代码审计网专家服务团队&#xff0c;除了提供网络、现场的源代码审计服务外&#xff0c;为了帮助企业建立代码审计服务平台、代码扫描基线、安全和质量编码规范、制度流程&#xff0c;打通企业研发的各个管理环节&#xff0c;实现自动化等企业级源代码安全审计咨询服务。 企业要…

react Antd3以下实现年份选择器 YearPicker

项目antd版本低&#xff0c;没有直接可使用的年份选择器&#xff0c;参考此篇&#xff08;使用antd实现年份选择器控件 - 掘金&#xff09; 一开始在state里设置了time&#xff1a; this.state {isopen: false,time: null } 在类似onChange事件里this.setState({time: valu…

一文搞懂Transformer

近期Transformer系列模型的出现&#xff0c;增加了CV领域的多样性。但是Transformer这一不同领域的模型对学习者来说需要一个细致的学习过程.下面就是本菜鸟总结学习路线。 Transformer是基于attention机制。而attention机制又在Encoder、Decode中。本篇博客将从Attention->…