css3 笔记01

目录

01 css3选择器

02 伪类选择器

03 伪元素选择器

04 文章分割列

05 浏览器hack写法

06 css3中的2D转换


01 css3选择器

        选择器+选择器{} 表示选择下一个兄弟

        选择器1~选择器2{} 表示选中选择1后面所有包含选择器2的元素.

        [属性名]{}  包含属性名的选择器

        选择器[属性名]{}

        ['属性名'='属性值']{}

        ['属性名'^='属性值']{}  表示属性以属性值开头

        ['属性名'$='属性值']{} 表示属性以属性值结尾

        ['属性名'~='属性值']{} 表示属性中是否包含属性值

        动态伪类 :focus

        目标伪类

                :target  锚点激活的对应元素的选择器

                :enabled 元素可用状态的时候生效 只要针对表单元素

                         只要这个表单元素没有设置disabled属性 都属性可用状态

                :disabled  当表单元素设置了disable属性的时候生效

                :checked  单选多选按照被选中的时候的状态

02 伪类选择器

        结构伪类:

               li :first-child  表示选中第一个li

                li:last-child  表示选中最后一个li

                :only-child  当前选择器选择的所有的元素中

                        如果当前元素在父元素中是独生子元素 则选择器生效

                :empty{} 当前选择器选择到的所有的元素中 元素内容为空时选中

                :nth-child(){}  

                        当前选择器选择到的所有元素中 在父元素中排行指定序号的元素 序号从1开始

        否定伪类:

                :not(选择器) 表示选中不包含这个选择器的元素 

03 伪元素选择器

        ::first-letter  选择第一个字符

        ::first-line   选择第一行

        ::selection  针对选中的内容

        伪元素选择器

                :after   :before

                动态给当前元素的前一位/后一位添加内容

                content必写属性   伪元素是行内元素

04 文章分割列

        文章分割列属性:

                 column-count: 分割的列数

                column-gap:px值  列和列之间的间隔

                column-rule:px值 边框样式  边框颜色

                                列和列之间的间隔边框 

05 浏览器hack写法

        某些属性不同内核的浏览器有兼容性问题 需要需要加入 css前缀

                针对 谷歌的兼容:

                         -webkit-属性名:属性值

                针对火狐的兼容

                        -moz-属性名:属性值

                针对欧朋的兼容

                        -o-属性名:属性值

                针对IE的兼容

                        -ms-属性名:属性值

06 css3中的2D转换

        转换的四个方式:

                1.位移 transform:translate()

                        位移:

                                transform:translateX(px值)  横向位移

                                transform:translateY(px值) 纵向位移

                                transform:translate(x,y)   横纵位移

                2.旋转 transform:rotate()

                        旋转:

                                transform:rotateX(deg角度);  3D转换下效果明显

                                transform:rotateY(deg角度);  3D转换下效果明显

                                transform:rotateZ(deg角度);   圆心在图片中间  顺时针旋转

                               修改转换属性的圆心:

                                transform-origin:x位置 y位置

                                    默认值是center    0 0 是当前元素的 左上角

                3.缩放 transform:scale()

                         缩放:

                                transform:scale(整数或者小数)

                                1为不缩放,  大于1为放大,   小于1的小数位缩小

                                0.9缩小10分之一

                4.倾斜 transform:skew()

                        倾斜:

                                transform:skew(deg角度)

                                transform:skewX()  横向倾斜

                                transform:skewY()  纵向倾斜

                                transform:skew(x,y)  横纵向倾斜

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

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

相关文章

Linux用户管理指令004

1、useradd 是用于创建新用户的命令。以下是 useradd 命令的一些常用选项及其简要说明,以清晰的分点方式表示: -u, --uid UID指定用户的用户ID(UID)。如果不指定,系统通常会分配一个未使用的最小UID。 -g, --gid GROUP…

Matlab读取Swarm球谐系数,并绘制EWH全球格网图(存在疑问)

ICGEM官网下载 COST-G发布的4040的球谐系数 close all; clearvars -except; % addpath(E:\Code\Tool\Function\GRACE_functions); dir_degree_1 E:\Code\GRACE_data\Degree_1\deg1_coef.txt; dir_c20 E:\Code\GRACE_data\Degree_2\C20_RL06.txt; myDir_Swarm E:…

深入理解栏目函数:从基础结构到实际应用

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、栏目函数的基本结构解析 代码案例 二、栏目函数的参数理解与返回值探究 参数取值与返…

2024年上半年软件设计师试题及答案(回忆版)

目录 基础知识选择题案例题1.缺陷识别的数据流图2.球队、球员、比赛记录的数据库题3.用户、老师、学生、课程用例图4.算法题5.程序设计题基础知识选择题 树的节点,度为4的有4个,度为3的有8个,度为2个有6个,度为1的有10个,问有几个叶子结点 二位数组,一个元素2个字节,A0…

pgsql 多个模式相同的表获取主键

pgsql 有一个库, 里面有多个模式, 每个模式下可能有相同的表, 如何获取表的主键 SELECT tc.table_schema AS 模式, tc.table_name AS 表名, kcu.column_name AS 列名 FROM information_schema.table_constraints AS tc JOIN information_schema.key_colum…

php TP8 阿里云短信服务SDKV 2.0(跳大坑)

安装:composer require alibabacloud/dysmsapi-20170525 2.0.24 官方文档:短信服务_SDK中心-阿里云OpenAPI开发者门户 (aliyun.com) 特别注意:传入参数获得值形式 这样也不行 $sendSmsRequest new SendSmsRequest($addData); 还有一个大坑…

大模型日报2024-05-28

大模型日报 2024-05-28 大模型资讯 SDAIA的阿拉伯语大模型ALLaM在IBM watsonx上全面运行 摘要: 由沙特数据和人工智能局(SDAIA)开发的开源阿拉伯语大语言模型ALLaM现已在IBM的watsonx平台上全面运行。 AI公司Anthropic揭示大语言模型内在工作机制 摘要: …

【CSharp】无符号短整型数组ushort[]转化为IntPtr

【CSharp】无符号短整型数组ushort[]转化为IntPtr 1.背景2. 代码1.背景 我们的相机或者探测器是一个感光的传感器,一般将光波打到闪烁体上,闪烁体发光后进行光电转换得到电信号,您可以这么简单的去理解。 这里就设计相机传感器上的AD转换器(模拟信号->数字信号)的bit数…

Nginx实战:https 配置SSL证书

目录 一、上传证书 二、nginx配置 三、生效配置 一、上传证书 将SSL证书文件(如.crt或.pem文件)和私钥文件(如.key文件)上传到服务器的某个目录,如/etc/nginx/ssl/ 二、nginx配置 server { listen 443 ssl; se…

输入字符串fgets

输入字符串fgets fgets 是C语言中的一个函数,用于从指定的文件流(如标准输入、文件等)读取一行字符串。它通常用于读取用户输入或从文件中读取文本行。fgets 函数的原型如下: char *fgets(char *str, int n, FILE *stream);参数说…

Mesa软件框架以及重要数据结构分析

Mesa软件框架以及重要数据结构分析 引言 Mesa的实现比较复杂,其中还有许多的数据结构之间的关系逻辑还不是很清楚。感觉分析了又没有分析一样,这里我们再理一理! 1.1 Mesa下EGL/GL核心数据结构和层级关系 MESA的核心数据结构很多很复杂&#…

10.RedHat认证-Linux文件系统(上)

10.RedHat认证-Linux文件系统(上) ⽂件系统,顾名思义,是⼀个组织⽂件的“系统(system)”。file system ⽂件系统是⽤来组织⽂件的,通俗⼀点理解的话,⽂件系统是⽤来存储⽂件的。 硬盘是不能直接存放⽂件或数据。 我们通过将硬…

Xed编辑器开发第三期:使用Rust从0到1写一个文本编辑器

继续Xed编辑器开发第二期:使用Rust从0到1写一个文本编辑器的开发进度,这是第三期的内容: 4.1 逐行清除 在每次刷新之前清除整个屏幕似乎不太理想,最好在重新绘制每行时清除每行。让我们删除 Clear(ClearType::All),而是在我们绘…

Double 4 VR混合现实情景实训教学系统在戏剧英语课堂上的应用

随着科技的不断发展,Double 4 VR混合现实情景实训教学系统在教育领域的应用越来越广泛。在戏剧英语课堂上,这种教学系统可以为学生提供更加生动、逼真的学习环境,增强学生的学习体验和效果。 一、模拟真实场景,增强学习体验 Doubl…

mybatis关联查询使用resultMap查询到了多条,结果返回一条。

今天在写代码时候,遇到了一个很让我费解的问题,在使用关联查询的时候,在明明数据库里面,已经查到了两条数据,结果resultMap这个集合里面,就只返回一条数据。 数据库的SQL: mybatis的xml里面的r…

cesuim

new Cesium.Color(255,255,0,1), //颜色 Math.PI/2color: Cesium.Color.fromCssColorString("#f40"), //16进制颜色初始化地球 import * as Cesium from "cesium";import { onMounted } from "vue"; onMounted(() > {Cesium.Ion.defaultAcc…

【Python编程实战】基于Python语言实现学生信息管理系统

🎩 欢迎来到技术探索的奇幻世界👨‍💻 📜 个人主页:一伦明悦-CSDN博客 ✍🏻 作者简介: C软件开发、Python机器学习爱好者 🗣️ 互动与支持:💬评论 &…

C++的第一道门坎:类与对象(二)

一.类中生成的默认成员函数详解 0.类的6个默认成员函数 编译器会给类生成六个默认成员函数,在类中即使我们什么都不做,也会自动生成。 默认成员函数:用户没有显式实现,编译器会自动生成的成员函数称为默认成员函数。 下面我们逐…

重学java 50 集合 上

路随远&#xff0c;行则将至&#xff1b;路虽难&#xff0c;做则必成 —— 24.5.26 一、Collection接口 1.概述: 单列集合的顶级接口 2.使用 Collection<泛型>对象名new 实现类集合对象<>() <E>:泛型,决定集合中的元素都是啥类型的,必须指定的是引用…

网络渗透day2

Windows登录的明文密码存储过程和密文存储位置 明文密码存储过程&#xff1a; Windows操作系统不会以明文形式存储用户密码。相反&#xff0c;当用户设置或更改密码时&#xff0c;系统会对密码进行哈希处理&#xff0c;然后存储其哈希值。哈希处理的目的是为了提高密码的安全性…