网页的皮肤——css

目录

1.css的编写方式

2.css选择器

3.css样式属性

4.css包围盒

5.css中的display

6.css中的定位

7.css浮动与清除

8.弹性容器

9.自定义字体


1.css的编写方式

1.优先级最高的行内模式
        直接使用style属性写在开始标签中
        针对一个标签
2.内部样式表
        在head标签中使用style标签包裹
        样式选择器{样式语句}
        针对当前html内所有满足的标签
3.外部样式表
        写在css文件中,通过link引入html
        一般先引入外部样式表,再编写内部样式表
        针对多个html

2.css选择器

4种基本选择器
        *:通配符选择器,选择所有标签
        tag:标签选择器
        匹配固定标签
        .类名:类名选择器
        匹配拥有类名的标签
        #id:id选择器
        匹配拥有id的标签
5种符号选择器
        ,:逗号左右满足一个即可
        空格:子孙选择器
        >:子级选择器
        +:相邻下一个
        ~:下面多个
其他选择器:
属性
        [attr]:拥有属性
        [attr=]:拥有属性并且值等于
        [attr^=]:拥有属性并且值以开头
        [attr$=]:拥有属性并且值以结尾
伪类(在正常选择器之后使用:)
状态
        :hover 鼠标划入
        :active 鼠标点下
顺序
        :first-of-type 第一个
        :nth-last-of-type 最后一个
        :nth-of-type(n) 正数第n个
                odd 奇数
                even 偶数
        :nth-last-of-type(n) 倒数第n个

3.css样式属性

1.字体相关:font-
family:类型,多个字体
size:大小, 默认16px
weight: 粗细
400:normal
700
bold
style
italic:斜体
2.文本相关:text-
transform
capitalize
lowercase
uppercase
align
left
right
center
indent
2em
2*font-size
decoration
none
去掉下划线
3.背景相关:background-
color
背景颜色
image
url
背景图片
优先级高
repeat:重复
no-repeat
position
位置
left、right、center、top、bottom
100px、500px
size
100%
contain
长边展示完全,短边补空
cover
短边展示完全,长边隐藏
4.列表:list-style-
type
circle:空心圆
disc:实心圆
square:方块
lower-alpha:小写字母
lower-roman:罗马数字
position
outside:外侧
inside:内侧
image url()
none:去除所有样式

4.css包围盒

一个元素占用空间信息
boder 上下左右
        width
        style
        color
        1px solide red
padding
        内部
        只有宽度
        使用自己背景色
margin
        外部
        使用父元素背景色

padding margins支持四种写法
        1个数值:上下左右一样
        2个数值:上下 左右
        3个数值:上 左右 下
        4个数值:上 右 下 左
更改包围盒计算方式
border-box:给定宽高包含框与内补

5.css中的display

inline:行内元素,无宽高
block:块元素,占一行,可以给宽高
inline-block:行内块,多个块在一行,可以给宽高
none:隐藏

6.css中的定位

static:静态定位
        从左到右从上到下排列
relative:相对定位
        相对文档流静态定位 发生偏移
        占用文档流位置
        top
        left
absolute:绝对定位
        参考位置:外层第一个非static的标签发生偏移
        直到html
        不占用文档流位置
        top left right bottom
fixed:固定定位
        参考位置:浏览器窗口
sticky:粘性定位
        没有达到粘性位置
        相当于静态定位
        达到粘性位置
        相当于固定定位

7.css浮动与清除

float
        left:左排列,排列在上一个左浮动的右侧
        right:右排列,排列在上一个右浮动的左侧
clear
        left:左边不能有左浮块
        right:右边不能有右浮块
        both:清除左右浮块,后续元素不会被浮动元素覆盖

8.弹性容器

display: flex主轴方向
flex-direction:
        row
        row-reverse
        columu
        columu-reverse
flex-wrap:
        wrap
        no-wrap
        wrap-reverse
justify-content:
        flex-start:主轴开始位置
        center:主轴居中
        flex-end:主轴结束位置
        space-around:中间有空白
        space-between:两边中间都有空白
align-items:
        flex-start:交叉轴起始位置
        center:居中
        flex-end:交叉轴结束
align-content:
        flex-start:交叉轴起始位置,没有空白
        center:居中,没有空白
        flex-end:交叉轴结束,没有空白
当交叉轴有多行,使用多轴对齐

9.css渐变与动画

渐变
        transition
        transform
动画
        animation

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

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

相关文章

魔改一个过游戏保护的CE

csdn审核不通过 网易云课堂有配套的免费视频 int0x3 - 主页 文章都传到github了 Notes/外挂/魔改CE at master MrXiao7/Notes GitHub 为什么要编译自己的CE 在游戏逆向的过程中,很多游戏有保护,我们运行原版CE的时候会被检测到 比如我们开着CE运…

MySQL数据库MHA高可用集群

前言 MySQL 数据库 MHA(Master High Availability)高可用集群是一种用于提高 MySQL 数据库可用性的解决方案。它通过自动故障切换和监控来确保数据库系统在主服务器发生故障时能够快速切换到备用服务器;在 MHA 高可用集群中,Mast…

单细胞分析|映射和注释查询数据集

reference映射简介 在本文中,我们首先构建一个reference,然后演示如何利用该reference来注释新的查询数据集。生成后,该reference可用于通过cell类型标签传输和将查询cell投影到reference UMAP 等任务来分析其他查询数据集。值得注意的是&…

享元模式

通过共享的方式高效的支持大量细粒度的对象。在有大量对象时,有可能会造成内存溢出,我们把其中共同的部分抽象出来,如果有相同的业务请求,直接返回在内存中已有的对象,避免重新创建。 using System; using System.Col…

Linux - 第五节

sudo用不了 - 新建的普通用户 以管理员的身份,去修改etc/sudoers配置下的文件,添加白名单 代码的编译 gcc - 只能用于编译C语言 g - 既能用来编译C语言,也能用来编译C ggc的简易用法 预处理 预处理功能主要包括宏定义,文件包含,条件编…

突破编程_C++_C++14新特性(变量模板)

1 变量模板在 C14 中的引入与扩展 在 C14 中,变量模板的引入与扩展为编程带来了许多便利,特别是在泛型编程方面。这一特性允许我们直接定义模板变量,而不需要将其包装在模板类或模板函数中,从而使得代码更加直观和简洁。 首先&a…

vue nextTick的简化版

以下内容来源于通义千问 的回答 在 Vue.js 中,$nextTick 的核心功能是在下次 DOM 更新循环结束之后执行延迟回调。这是因为 Vue 使用异步更新队列来优化渲染性能,当数据发生变化时,并不会立即更新 DOM,而是在同一事件循环结束时批…

2024年 前端JavaScript 进阶 第2天 笔记

2.1-内容和创建对象方式 2.2-164-构造函数 2.3-new实例化执行过程 2.4-实例成员和静态成员 2.5-基本包装类型 2.6-0bject静态方法 2.7-数组reduce累计方法 对象数组 加0 2.7-数组find、every和转换为真 --说明手册文档 MDN Web Docs 2.8-字符串常见方法 2.3 String 1.常见实例…

【微服务框架】微服务简介

个人名片: 🐼作者简介:一名大三在校生,喜欢AI编程🎋 🐻‍❄️个人主页🥇:落798. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️…

论文复现2: YOLOv5 DeepSORT视频追踪

YOLOv5 DeepSORT是视频检测跟踪算法,结合了YOLOv5的目标检测和DeepSORT的目标跟踪能力。它具备实时性能、高准确性以及稳定的目标跟踪能力,为行人和车辆等实时监测和分析提供了有效的解决方案。 直接在github找的综合代码,没有做分别训练,因为我要实现的就一个类,所以直接…

2010-2021年各省碳排放测算数据(含原始数据+计算过程+结果)

2010-2021年各省碳排放测算数据(含原始数据计算过程结果) 1、时间:2010-2021年 2、指标:原煤(万吨)、原煤(万吨CO2)、焦炭(万吨)、焦炭(万吨CO2)、汽油(万吨)、汽油(万吨CO2)、煤油(万吨)、煤油(万吨CO2)、柴油(万吨)、柴油(万吨…

比较转录组分析揭示了116种山茶属(Camellia)植物的深层系统发育和次生代谢物演化-文献精读分享1

Comparative transcriptomic analysis unveils the deep phylogeny and secondary metabolite evolution of 116 Camellia plants ,比较转录组分析的一篇文献。 SUMMARY 茶花植物包括200多个种类,具有极大的多样性和巨大的经济、观赏和文化价值。我们对…

Git版本管理使用手册--目录

理解几个重要的概念 1安装Git、TortoiseGit 2为群组成员分配角色 3创建项目仓库 3Git与其他产品继承 4克隆仓库到本地 5使用.ignore文件 8将本地项目提交到空白仓库 9管理者创建开发分支 10开发者从仓库获取开分支(检出分支以及分支切换) 11开发者提交代…

微信小程序 - 用promise封装wx.request

简介 Promise 对象表示异步操作最终的完成(或失败)以及其结果值。在javascript中,当发起异步方法调用时候,要想在调用方线程获取异步结果,可以借助promise对象实现。 promise同时支持all,any等api。本文将会对wx.req…

[机器学习]练习切比雪夫距离

切比雪夫距离(Chebyshev distance) 切比雪夫距离是指在几何空间中两点之间的最大差值,或者说是两点在各个坐标轴上差值的最大绝对值。它以数学家彼得切比雪夫(Peter Chebyshev)的名字命名。 在二维空间中,切比雪夫距离可以表示为…

黄金涨是商品牛市的领先信号

自2022年11月以来,黄金价格持续上涨,目前已经突破历史新高,历史上黄金上涨,大多是商品全面牛市的领先信号。在2008年Q4、2019年也出现过,黄金比其他商品更强,但随后的2009年和2020年均是商品的全面牛市。同…

spring注解@EventListener实现监听原理

文章目录 EventListener使用方式EventListener实现原理1.引入时机2 初始化时机3 作用时机->将加了EventListener注解的方法识别出来,并封装为监听器,加载spring容器中 总结 EventListener使用方式 package com.cyl.listener;import org.springframew…

【EasyExcel】多sheet、追加列

业务-EasyExcel多sheet、追加列 背景 最近接到一个导出Excel的业务,需求就是多sheet,每个sheet导出不同结构,第一个sheet里面能够根据最后一列动态的追加列。原本使用的 pig4cloud 架子,使用 ResponseExcel注解方式组装返回数据…

设计模式深度解析:AI如何影响装饰器模式与组合模式的选择与应用

​🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》《MYSQL应用》 💪🏻 制定明确可量化的目标,坚持默默的做事。 AI如何影响装饰器模式与组合模式的选择与应用 在今天这个快速发展的技术时代&#…

Segger Embedded Studio IDE使用体验——默认的Section和Linker的设置

Segger Embedded Studio IDE使用体验之一——默认的Section和Linker的设置 一、简介二、操作2.1 编译后代码分析2.1.1 符号浏览器2.1.2 读取elf文件和map文件 2.2 调试2.2.1 查看变量2.2.2 设置供电 2.3 运行环境设置2.3.1 编译器2.3.2 汇编器2.3.3 包含其他文件2.3.4 .bss和.d…