![](https://img-blog.csdnimg.cn/18d82967efaf4a28a91d2f26d0d2fbb7.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 53
前端三巨头之CSS篇
卓律涤
朝闻道
展开
-
[暑假]简单认识一下常用的字体 <<微软雅黑 黑体 和 宋体>>
简单认识一下常用的字体原创 2022-07-02 17:18:06 · 926 阅读 · 0 评论 -
[暑假]伪类和伪元素的区别---<<你问我就这样答>>
方便快速了解原创 2022-07-02 16:52:31 · 100 阅读 · 0 评论 -
CSS3的新特性---选择器
提示:最重要的放到开头: 新增的CSS3特性是有兼容性问题的, IE9+才支持哈文章目录一、新增属性选择器二、使用步骤1.引入库2.读入数据三、使用步骤总结一、新增属性选择器1)利用属性选择器可以不用借助 类或id选择器实例2)属性选择器还可以选择 属性=值 的某些元素实例:3)属性选择器可以选择属性值开头的某些元素4)属性选择器可以选择属性值结尾的某些元素 二、使用步骤1.引入库代码如下(示例):import numpy as npimport pandas a.原创 2022-05-08 21:22:16 · 608 阅读 · 0 评论 -
Demo---progress-steps------ 2/50(详解)
看详解前 请务必具备的基础知识:1.什么是基线2. 元素的分类3. justify-content; 的那些事4.区分伪类和伪元素(以下内容 帮助理解与区分)1.伪元素在CSS3中使用 双冒号 :: 之前是 :2. 伪类选择器是用来向某些选择器来添加效果3.伪元素选择器则是用来将特殊的效果添加在选择器上的......原创 2022-03-25 10:34:13 · 704 阅读 · 0 评论 -
【新星计划】Demo---Expanding Cards------ 1/50(详解)
伪类和伪元素区别(做案例时的一些思考)? 1布局思路:一个大盒子里面 5个小盒子使用检查 将图片扣下来(当然可以选自己喜欢的图片的哦 小卓我是为了达到复原的效果)使用 background-image 而不是使用 img 是因为本demo 展示的效果是 随着盒子的打开图片逐渐展示在我们的眼前解析CSS以及回顾所牵涉的知识点@import @import CSS@规则,用于从其他样式表导入样式规则。url是一个表示要引入资源位置的 或者 (en-US) 。 这个 URL 可以是.原创 2022-03-13 08:36:31 · 574 阅读 · 0 评论 -
CSS---常见布局技巧
1. margin负值的运用2. 文字围绕浮动元素3. 行内块的巧妙运用4. CSS三角强化1. margin负值运用经过边框盒子变色: 例子:标签:hover {border: 1px solid 颜色;}2. 文字围绕浮动元素巧妙运用利用浮动元素不会压住文字的特性首先 准备一个大盒子 里面拥有文字 然后 在左侧的图片添加浮动3. 行内块的巧妙运用...原创 2022-03-10 17:54:48 · 441 阅读 · 0 评论 -
CSS---用户界面样式
什么是界面样式?所谓的界面样式, 就是更改一些用户操作样式, 以便提高更好的用户体验更改用户的鼠标样式表单轮廓防止表单域拖拽鼠标样式 curosrli {cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状属性值 描述 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 表单的轮廓...原创 2022-03-10 16:06:18 · 322 阅读 · 0 评论 -
CSS---三角的做法
首先让 宽高必须为 0设置透明的实线边框boder-方位(例子: left right)-color: ;例子:.名 {width: 0;height: 0;border: 50px solid transpare;border-left-color: red;}显示为: 其中的 line-height: 0; ...原创 2022-03-09 22:01:14 · 133 阅读 · 0 评论 -
CSS---flex布局中子项常见属性
flex子项目占的份数align-self 控制子项自己在侧轴的排列方式order属性定义子项的排列顺序 (前后顺序)flex属性(最重要)flex属性定义子项目分配剩余空间, 用flex来表示占多少份数align-self 控制子项自己在侧轴上的排列方式align-self 属性允许单个项目与其他项目不一样的对齐方式, 可覆盖 align-items属性 . 默认值为 auto , 表示继承父元素的 align-items 属性, ...原创 2022-03-09 17:35:30 · 222 阅读 · 0 评论 -
CSS---flex布局中父项常见属性
复习目标:1. 能够说出 flex 盒子的布局原理2. 能够使用 flex 布局的常用属性3. 能够独立完成写成移动端首页案例传统布局与flex布局有什么区别?传统布局 flex弹性布局 兼容性好 操作方便, 布局极为简单, 移动端应用很广泛 布局繁琐 PC端浏览器支持情况较差 局限性, 不能在移动端很好的布局 IE 11 或 更低版本, 不支持或仅部分支持 建议:1. 如果是PC端页面布局, 我们还是使用传统布局2. 如果是移动原创 2022-03-07 23:45:24 · 270 阅读 · 0 评论 -
CSS高级---精灵图
为什么需要精灵图?精灵技术目的: 为了有效地减少服务器接受和发送请求的次数, 提高页面的加载速度一个页面往往会应用很多哥小的背景图像作为修饰, 当页面中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这将大大降低页面的加载速度因此, 为了有效地减少服务器接受和发送请求的次数, 提高页面的加载速度, 出现了CSS精灵技术(也称 CSS Sprites, CSS雪碧)核心原理: 将页面中的一些小背景图像整合到一张大图中, 这样服务器只需要一次请求就可以了原创 2022-03-07 00:36:53 · 247 阅读 · 0 评论 -
网页布局综合总结 与 显示和隐藏专题
通过盒子模型, 清楚知道大部分html标签是一个盒子通过CSS浮动,定位可以让每个盒子排列成为网页一个完整的网页, 是标准流, 浮动, 定位一起完成布局, 每个都有自己的专用用法1.标准流可以让盒子上下排列或者左右排列, 垂直的块级盒子显示就用标准流布局2.浮动 可以让多个块级元素一行显示或者左右对齐盒子, 多个块级盒子水平显示就用浮动布局3.定位定位最大的特点是有层叠的概念, 就是可以让多个盒子前后叠压来显示. 如果元素自由在某个盒子内移动 就用定位布局..原创 2022-03-03 23:53:39 · 272 阅读 · 0 评论 -
定位的拓展
在使用定位布局时, 可能会出现盒子重叠的情况, 此时, 可以使用 z-index 来控制盒子的前后次序(z 轴)语法:选择器 { z-index: 1; }定位的叠放次序中有什么需要注意的?数值可以是正整数, 负整数或0, 默认是auto, 数值越大, 盒子越靠上如果属性值相同, 则按照书写顺序, 后来居上数字后面不能加单位只有定位的盒子才有 z-index属性定位的拓展1.如何让绝对定位的盒子居中?加了绝对定位的盒子不能通过 margin:0 au原创 2022-03-02 20:24:27 · 180 阅读 · 0 评论 -
CSS定位知识点
为什么需要定位?因为有些效果, 标准流或浮动都无法快速实现, 此时需要定位来实现所以: 1.浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子 2. 定位则可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置, 并且可以压住其他盒子定位的组成是什么?(定位说白了也是用来布局的)定位: 将盒子定在某一个位置, 所以定位也是在摆放盒子, 按照定位的方式移动盒子定位由几部分构成? 分别是什么?1) 两部分2)...原创 2022-03-01 23:43:19 · 243 阅读 · 0 评论 -
CSS属性书写顺序(重点)
专业写法: 从上往下布局和模式相关的盒子本身文字相关样式一些与背景相关的页面布局整体思路应该是什么? (理解加背诵)为了提高页面制作的效率, 布局时通常由以下的整体思路:1.必须确定页面的版心(可视区) 即宽度 , 我们测量可得知 (注: 版心 即最核心的区域)2. 分析页面中的行模块, 以及每个行模块中的列模块. 其实就是页面布局的第一准则3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置. 页面布局第二准则4. 制作HTML结构...原创 2022-03-01 23:19:39 · 111 阅读 · 0 评论 -
CSS--常见的网页布局
只要是通栏的盒子(即和浏览器一样宽) 就不需要指定宽度原创 2022-02-28 01:01:03 · 196 阅读 · 0 评论 -
CSS深入基础篇---圆角边框, 阴影(8)-CSS3新增
圆角边框(重点)border-radius属性用于设置元素的外边框圆角语法: border-radius: 数值(像素单位);原创 2022-02-27 18:57:59 · 219 阅读 · 0 评论 -
CSS深入基础篇---CSS盒子模型(7)
目标:能够准确阐述盒子模型的4个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够利用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影网页布局要学习三大核心: 盒子模型,浮动和定位.盒子模型有什么作用呢?学习好盒子模型能非常好的帮助我们布局页面网页布局过程:1.先准备好相关的网页元素,网页元素基本都是盒子Box2.利用CSS设置好盒子样式,然后摆放到相应位置3.往盒子里面装内容...原创 2022-02-24 17:58:25 · 326 阅读 · 0 评论 -
CSS深入基础篇---CSS的三大特性(6)
CSS三个非常重要的三个特性: 层叠性, 继承性, 优先级层叠性相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性有什么作用?层叠性主要用来解决样式冲突问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突的 则不会产生层叠越往下面定义的 优先级越高继承性CSS中的继承:子标签会继承父标签的某些样式,如 文本颜色和字号. 简单的理解就是: 子承父业例子:...原创 2022-02-24 10:47:50 · 228 阅读 · 0 评论 -
CSS深入基础篇---背景(5)
通过CSS背景属性, 可以给页面元素添加背景样式背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等背景颜色background-color属性定义了元素的背景颜色一般情况下元素背景颜色默认值是 transparent(译: 透明的 清澈的)背景图片background-image属性 描述了元素的背景图像.实际开发常见于 logo或者一些装饰性的小图片或者超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)background-imag原创 2022-02-22 23:55:57 · 200 阅读 · 0 评论 -
CSS深入基础篇---元素显示模式转换(4)
元素显示模式转换 说白了就是一个模式的元素需要另外一种模式的特性比如: 想增加链接 <a>的触发范围.转换为块元素: display:block;转换为行内元素: display:inline转换为行内块: display:inline-block每日一个年薪百万小技巧:单行文字垂直居中的代码CSS没有给我们提供文本垂直居中的代码那么如何让文字垂直居中呢?解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中单行文字垂直...原创 2022-02-22 21:41:06 · 193 阅读 · 0 评论 -
CSS深入基础篇---CSS的元素显示模式- 块元素(3)
元素显示模式有什么作用呢?作用是为了更好的让我们布局页面什么是元素显示模式?元素显示模式就是 元素(标签)以什么方式进行显示,比如 : <div>自己占一行 , 比如一行可以放多个 <span>作用:网页的标签非常多,为了在不同的地方更好的使用不同类型的标签,了解他们的特点 可以更好的布局我们的页面HTML元素一般分为块元素和行内元素两种类型 (在实际开发中如果想一行内放多个就用行内元素 如果想独占一行则用块元素)块元素常见的块元素有 &l原创 2022-02-21 23:54:33 · 267 阅读 · 0 评论 -
CSS深入基础篇---复合选择器(2)
可以使用 shift+Alt+F 快速使文档格式化复合选择器:在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器建立在基础选择器之上,对基础选择器进行组合形成的复合选择器可以更准确,更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的常用的复合选择器: 后代选择器,子选择器,并集选择器,伪类选择器等等后代选择器(重要)后代选择器又称为包含选择器,可以选择父元素里面的子元素. 元素1 和 元素 2之间用空格隔开原创 2022-02-21 20:57:15 · 337 阅读 · 0 评论 -
CSS深入基础篇---Emmet语法(1)
Emmet语法的前身是 Zen coding 它使用缩写,来提高html.css的编写速度,Vscode内部已经集成改语法 说白了就是用来简写一: 快速生成HTML结构的语法1.如果想要生成多个相同的标签,加上 * 就可以了 比如 div*3 就会生成 3个 div2.如果有父子级的标签,可以用 > 比如 ul>li 就同时生成 ul 和 li 3.如果是兄弟关系的标签, 用 + 就可以了 比如 div+p4.如果生成带有类名或者id名字的..原创 2022-02-21 19:10:36 · 83 阅读 · 0 评论 -
学习H5C3Js中的随手记(1)
1.如何实现分割线?一个 <hr> 标签完事2.在实际开发中我们怎么样控制图片的大小?第一种:使用class="名字" 在CSS中 .名字 然后通过 width 和 height 设置多少多少 px 然后控制大小第二种:使用id="名字" 在 CSS种 #名字 然后通过 width 和 height 设置多少多少 px 然后控制大小其中class在实际开发中最常用3.在外面实际开发中怎么样让图片居中对齐?css图片水平居中1.利用margi..原创 2022-02-21 00:35:39 · 343 阅读 · 2 评论 -
CSS基础篇---CSS的引入方式(6)
CSS分为三种样式表:1.行内样式表(行内式)2.内部样式表(嵌入式)3.外部样式表(链接式)内部样式表: 就是将 CSS代码写到HTML中理论上: style标签可以放在HTML文档的任何地方,但一般会放在文档head标签中优点: 方便控制当前整个页面中的元素样式设置 且 代码样式清晰缺点: 没有实现HTML和CSS分离行内样式表:直接在标签内style属性中设置CSS样式优点是 适合简单修改样式缺点是 书写较为繁琐外部样式表:将样式单独写道原创 2022-02-20 19:19:10 · 393 阅读 · 0 评论 -
CSS基础篇---文本属性(5)
文本属性: 指的是文本的外观, 比如文本的颜色,对齐文本,文本的缩进,下划线,行间距等文本颜色rgb即 red green blue开发中用的最多的还是 十六进制对齐文本text-align 水平对齐的方式三个常用的属性值 : left right center 分别是 左 右 以及 居中对齐装饰文本text-decorationnone默认underline下划线其他属性值 使用时查询文档文本缩进text-indent 属性用来指定文原创 2022-02-20 18:54:42 · 104 阅读 · 0 评论 -
CSS基础篇---字体属性(4)
CSS中的 Font(字体) 属性用于定义字体系列,大小,粗细,和文本样式(比如斜体)一般使用 font-family属性定义文本的字体系列注意事项:各种字体之间必须使用英文状态下的逗号隔开如果有空格隔开的多个单词组成的字体,需要加引号尽量使用洗头膏默认自带的字体,保证任何用户的浏览器中都能正确显示字体大小使用 font-size属性定义字体大小例子: p { font-size: 20px;}px(...原创 2022-02-20 13:58:56 · 219 阅读 · 0 评论 -
常见的CSS类命名规则
仅仅是常见的命名规则:头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:foote原创 2022-02-19 10:38:25 · 325 阅读 · 0 评论 -
CSS基础篇(3)---基础选择器
CSS中选择器的作用?选择器(也可以叫做选择符) 就是根据不同的需求 把不同的标签选出来 这就是选择器的作用. 简单来说就是 选择标签用的1.选择出目标标签2.设置这些标签的样式选择器的分类?选择器分为基础选择器和复合选择器两大类基础选择器是由 单个选择器组成的基础选择器又包括: 标签选择器.类选择器.id选择器和通配符选择器标签选择器标签选择器(也叫元素选择器) 是指用HTML标签名称作为选择器,按标签名称分类.为页面中某一类标签指定统一的CSS样式..原创 2022-02-18 23:40:46 · 1171 阅读 · 0 评论 -
CSS基础篇(2)---CSS的代码规范
在对字符数组进行存储的时候scanf("%s", a); 等价于 cin >> a;但是二者都是只能读入到空格或者换行符就会停止原创 2022-02-18 21:19:57 · 167 阅读 · 0 评论 -
CSS基础篇(1)---CSS简介
目标:CSS简介CSS基础选择器CSS字体属性CSS文本属性CSS的引入方式Chrome调试工具CSS有什么作用???CSS主要用于美化网页,以及布局网页HTML的局限性:HTML是不重视外观样式的,只关注内容的语义是什么是CSS?CSS是层叠样式表(Cascading Style Sheets) 也可以称为 CSS样式表或者 级联样式表CSS是一种标记语言CSS在实际开发中给的具体作用是什么?CSS主要用于设置HTML页面中的文本原创 2022-02-18 21:13:19 · 157 阅读 · 0 评论 -
浏览器相关知识点
浏览器是网页显示,运行的平台.常用国际通用的浏览器:IE(微软的浏览器) ,火狐(Firefox),谷歌(Chrome),Safari(苹果的浏览器)什么是浏览器内核?浏览器内核是浏览器的核心,也称"渲染引擎".浏览器内核的作用?负责读取网页的内容,并且渲染(显示)网页Blink内核时Webkit内核的一个分支国产浏览器一般采用Webkit/Blink内核,比如360,UC,QQ,搜狗等什么是Web标准?Web标准是由W3C组织和其他标准化组织指定的一系列标.原创 2022-02-13 19:52:14 · 636 阅读 · 0 评论 -
网页相关知识点
一.什么是网页?网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合网页通常是HTML文件,通过浏览器来阅读网页也是网站的基本元素,网页通常由图片,文字,链接等元素组成.通常我们看到的网页以.htm或者.html后缀结尾的文件. 所以我们也将网页叫做 HTML文件二.什么是HTML?1.HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言.2.HTML是一门标记语言,可不是编程语言哦..原创 2022-02-13 19:16:13 · 350 阅读 · 0 评论 -
CSS---padding详解
知识点1.padding---是用来管理盒子中的内容 与内边距的属性 即 padding属性用于设置内边距,也就是边框与内容之间距离知识点2padding属性的简写知识点3padding会影响盒子实际大小,即会在盒子原有基础上增大解决方案:我们用width和height减去会增大的像素即可知识点4如果盒子没有指定width或者height时候,padding属性并不会撑大盒子...原创 2022-02-04 23:21:58 · 1193 阅读 · 0 评论 -
CSS---浮动
目标1.能够说出为什么需要浮动2.能够说出浮动的排列特性3.能够说出3种最常见的布局方式4.能够说出为什么需要清除浮动5.能够写出至少2种清除浮动的方法6.能够利用Photoshop (也就是PS)实现基本的切图7.能够利用PS 插件实现切图8.能够完成学成在线的网页布局1.浮动(float):1.1 传统网页布局的三种方式(网页布局的本质:就是使用CSS来摆放盒子)在PC端中CSS 提供三种传统布局方式: 普通流(标准流也叫文档流):...原创 2022-01-27 00:55:54 · 511 阅读 · 0 评论 -
CSS--字体图标
字体图标使用场景: 主要用于显示网页中通用,常用的一些小图标.字体图标相较于精灵图 方便更改 但仅限于一些简单的图标 比如一个小箭头 一个小摄像机的图标 等等精灵图的更改需要美工工程师一次次更改 虽然保证了美观 但是缺点就是1.图片文件还是所占空间较大2.图片本身的放大和缩小会失真3.一旦图片制作完毕想要更换非常的复杂综上所述便诞生了 字体图标 iconfont字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体文字具有放大或者缩小都不失真的性.原创 2022-02-02 00:21:14 · 438 阅读 · 0 评论