![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 78
格子学前端
这个作者很懒,什么都没留下…
展开
-
CSS3基础之3D转换
文章目录1. 三维坐标系2. 3D位移translate3d3. 透视perspective3.1`translateZ`4. 3D旋转`rotate3d`5. 3D呈现`transform-style`1. 三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴: 水平向右 注意: x 右边是正值,左边是负值y轴: 垂直向下 注意: y 下面是正值,上面是负值z轴: 垂直屏幕 注意: 往外面是正值,往里面是负值tips: 3D 转换我们主要学习工作中最常用的3原创 2022-03-24 08:04:59 · 808 阅读 · 19 评论 -
CSS3基础之动画
文章目录前言1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言动画animation是CSS3中新增的内容之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结...原创 2022-03-23 08:50:18 · 1417 阅读 · 16 评论 -
CSS3基础之filter、calc函数、transition过渡
文章目录1.CSS3盒子模型1. 1 content-box1. 2 border-box2.滤镜filter3.calc函数4.transition过渡1.CSS3盒子模型CSS3 有两种不同的盒模型,可以分别通过设置box-sizing的content-box或border-box这两个属性来得到1. 1 content-box<style> div { box-sizing: content-box; }</style>c原创 2022-03-22 08:17:17 · 818 阅读 · 20 评论 -
CSS3基础之2D转换
文章目录1.2D转换1.1移动translate1.2旋转rotate1.3旋转中心点transform-origin2.缩放scale3.2D转换综合写法4.2D转换总结1.2D转换**转换(transform)**是可以实现元素的位移,旋转,缩放等效果移动:translate旋转:rotate缩放:scale在CSS中的二维坐标系1.1移动translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位<style> div原创 2022-03-21 08:16:03 · 596 阅读 · 32 评论 -
CSS3之新增选择器
文章目录1.属性选择器1.利用属性选择器就可以不借助于类或者id选择器2.属性选择器还可以选择 属性 = 值的某些元素3.属性选择器可以选择属性值开头的某些元素4.属性选择器可以选择属性值结尾的某些元素2.结构伪类选择器2.1 `E:first-child` 和`E:last-child`2.2 `nth-child(n)`2.3`E:first-of-type`和`E:last-of-type`3.伪元素选择器1.属性选择器属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者i原创 2022-03-19 08:41:45 · 721 阅读 · 16 评论 -
CSS基础之元素的隐藏与显示
文章目录前言1.display显示隐藏2.visibility显示隐藏3.overflow溢出显示隐藏4.display与visibility的区别前言类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现,这时候我们就需要用到元素的隐藏和显示1.display显示隐藏display属性用于设置一个元素应如何显示<style> div { display: block; /* 同时具有转换为块级元素和显示元素的作用原创 2022-03-18 08:12:50 · 860 阅读 · 20 评论 -
CSS基础之定位
文章目录前言1.定位的组成2.静态定位static3.相对定位relative4.绝对定位absolute5.子绝父相6.固定定位fixed7.粘性定位sticky8.定位模式总结前言定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置,并且可以压住其他盒子1.定位的组成定位 = 定位模式 +边偏移定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:值语义static静态定位relative相对原创 2022-03-17 08:33:36 · 412 阅读 · 20 评论 -
HTML基础标签汇总
文章目录一、HTML 文档结构1.基本结构标签2.文档类型声明标签3.lang语言种类4.字符集二、标签1.标题标签2.段落标签3.换行标签4.文本格式化标签5.盒子标签6.图像标签7.超链接标签8.特殊字符9.表格标签10.列表标签11.表单标签一、HTML 文档结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2022-03-13 09:50:41 · 1682 阅读 · 46 评论 -
CSS基础之盒子模型
文章目录前言1.盒子模型的组成2.边框(border)3.内边距(padding)4.外边距(margin)①外边距典型应用②外边距合并③清除内外边距前言css页面布局三大重点: css 盒子模型 、 浮动 、 定位1.盒子模型的组成border(边框)content(内容)padding(内边距)margin(外边距)2.边框(border)CSS 边框属性允许你指定一个元素边框的样式和颜色边框由三部分组成:边框宽度(粗细)、边框样式、边框颜色属性作用原创 2022-03-12 08:34:51 · 338 阅读 · 18 评论 -
CSS基础之CSS三大特性
文章目录1.层叠性2.继承性3.优先级1.层叠性所谓层叠性是指多种CSS样式的叠加,它是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性覆盖掉原则:样式冲突,遵循的原则是就近原则。 哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2.继承性子标签会继承父标签里面的某些样式,例如文本颜色和字号等Tips:恰当地使用继承可以简化代码,降低CSS样式的复杂性3.优先级当同一个元素指定多个选择器,就会有优原创 2022-03-11 08:49:03 · 1005 阅读 · 24 评论 -
CSS基础之CSS背景
文章目录前言1.background-color2.background-image3.background-repeat4.background-position5.background-attachment6.背景复合写法7. 背景半透明8.背景总结前言通过 CSS 背景属性,可以给页面元素添加背景样式,包括background-color、background-image、background-repeat、background-position等1.background-color<原创 2022-03-09 07:41:53 · 400 阅读 · 25 评论 -
CSS基础之CSS元素显示模式
原创 2022-03-07 08:29:30 · 214 阅读 · 16 评论 -
CSS基础之CSS复合选择器
原创 2022-03-05 08:03:26 · 305 阅读 · 26 评论 -
CSS基础之CSS文本属性
文章目录前言1.color2.text-align3.font-size4.text-decoration5.text-indent6.line-height7.文本属性总结前言CSS 文本属性可以设置文本的 外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等1.colorcolor属性用于定义文本的颜色 <style> div { color: blue; } </style>原创 2022-03-03 08:19:37 · 2084 阅读 · 23 评论 -
CSS基础之CSS字体属性
文章目录前言1.font-family2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体)1.font-familyCSS 使用 font-family属性设置文本的字体系列 <style> div { font-family: Arial, "Microsoft Yahe", "微软雅黑"; }原创 2022-03-01 12:13:55 · 656 阅读 · 20 评论 -
CSS基础之CSS选择器
CSS选择器前言一、基础选择器分类1.标签选择器2.类选择器3.类选择器-多类名4.id选择器5.通配符选择器总结前言要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。一、基础选择器分类1.标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式 <style> 标签名 { 属性1: 属性值1; ..原创 2022-01-24 12:50:23 · 517 阅读 · 15 评论 -
CSS基础之CSS简介
CSS简介前言一、什么是CSS?二、CSS语法规范三、CSS代码风格1.样式格式书写2.空格规范前言如果说HTML是网页内容的载体,那么CSS就是网页的外衣。CSS与HTML一样,都是网页的的重要组成元素,两者相辅相成,缺一不可一、什么是CSS?CSS是层叠样式表的简称,有时我们也会称之为CSS样式表或级联样式表。与HTML类似,CSS也是一种标记语言,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边框等)以及版面的布局和外观显示样式等。C..原创 2022-01-23 10:12:37 · 606 阅读 · 13 评论