css基础知识
文章平均质量分 93
这名没人用吧
Fighting...
展开
-
前端学习(CSS3 三)——转换、过渡、动画
前端学习之CSS3一、CSS3转换1.定义2.语法3.2D转换一、CSS3转换1.定义 转换可以对元素进行移动、旋转、缩放、倾斜等,转换就是让某个元素发生形状、大小、位置上的改变。2.语法 转换的语法如下:transform:none | <transform-function>*;/*默认值为none*/ none代表不应用任何的转换,而表示要应用的一个或多个CSS变换函数,变换函数主要包括有: 2D转换:平面上的移动、旋转、缩放、倾斜。 3D转换:三维立体上的移原创 2021-03-28 19:36:46 · 452 阅读 · 0 评论 -
CSS3媒体查询
前端学习之CSS3一、响应式布局二、媒体查询1.语法结构一、响应式布局 如果我们PC端的页面直接在移动端观看的时候,网页会直接进行缩放,这样子会导致字体过小等问题,造成用户的体验不佳,因此在以前都是编写多套代码,来应用于不同的设备中,而这种开发方式成本高、不易维护,响应式布局则很好地解决了这个问题,它可以让一个网站能够兼容多个终端,而想要实现响应式布局,就需要媒体查询。二、媒体查询 媒体查询就是通过查询当前属于哪种设备,然后针对不同的媒体类型定制不同的样式规则,让网页能够在不同的设备下正常的预览原创 2021-03-27 21:33:58 · 132 阅读 · 0 评论 -
CSS3弹性盒子
CSS3弹性盒子一、背景二、一、背景 CSS传统布局模式是盒状模型,主要是通过display、float、position属性来实现布局。在2009年,W3C提出了一种新的布局方案,flex布局即弹性盒子,它可以简便、完整、响应式地实现各种页面的布局。使用弹性盒子,也可以对一个容器中的子元素进行排列、对齐和分配空白空间。二、...原创 2021-03-26 21:00:41 · 187 阅读 · 1 评论 -
字体图标的设置(阿里巴巴矢量图库的使用)
字体图标一、自定义字体二、阿里巴巴矢量图库使用三、字体图标前端在处理字体的时候,一般都会引用大多数电脑已经安装好的字体,如微软雅黑、宋体等等,从而来保证浏览器中字体渲染效果一致,而我们如果引用了一些自己本地自行安装的字体时,而用户的计算机上却没有,就会使得用户计算机上显示的是浏览器的默认字体,因此我们需要用到字体图标等。一、自定义字体语法:@font-face{ font-family:<family-name>;/*必须属性,指定字体的名字*/ src:<src>;原创 2021-03-25 23:35:40 · 1239 阅读 · 2 评论 -
前端学习(CSS3 二)——背景、渐变、文本
前端学习之CSS3一、CSS3背景新增内容1.background-clip2.background-origin3.background-size4.background-image一、CSS3背景新增内容1.background-clip background-clip:背景的绘制区域。语法:background-clip: border-box | padding-box | content-box;示例:<!DOCTYPE html><html lang="zh原创 2021-03-25 20:15:30 · 138 阅读 · 2 评论 -
前端学习(CSS3 一)——选择器、边框
前端学习之CSS3一、CSS3发展历程及新特性二、CSS3选择器1.相邻兄弟选择器2.通用兄弟选择器3.属性选择器4.结构性伪类选择器5.UI状态伪类选择器6.否定伪类选择器三、CSS3边框1.border-radius(圆角)2.box-shadow(盒阴影)3.border-image(边界图片)一、CSS3发展历程及新特性 CSS在1997年被W3C接管,这时的CSS是CSS1版本,CSS1的主要功能是设置网页对象的基本样式,如字体、颜色、背景、边框等。紧接着1998年W3C发布了CSS2,提原创 2021-03-23 20:37:08 · 188 阅读 · 0 评论 -
前端学习(EMMET语法介绍)
EMMET语法一、HTML书写规则二、CSS书写规则EMMET是前端开发中进行代码简写的一种方法,可以提高编程的效率,一般用于HTML和CSS代码的简写,简写的方式是输入代码后按Tab键展开。一、HTML书写规则1.输入"!"可以直接生成HTML初识结构,如下所示:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2021-03-17 22:00:57 · 549 阅读 · 5 评论 -
前端学习(初识CSS 下)——背景、雪碧图、布局
前端学习之初始CSS一、CSS背景1、背景的基本属性background-color一、CSS背景1、背景的基本属性背景的基本属性有:background-color:背景颜色;background-image:背景图片;background-repeat:背景图片的展示方式;background-attachment:设置背景图片是滚动的还是固定的;background-position:背景图片位置。background-color &n原创 2021-03-16 22:50:35 · 1911 阅读 · 7 评论 -
前端学习(初识CSS 中)——盒模型、浮动、定位
前端学习之初识CSS一、CSS盒模型1.盒模型的概念(1)内容(content)(2)填充(padding)(3)边框(border)(4)外边距(margin)2.盒模型的相关属性3.标准盒模型和IE盒模型二级目录三级目录一、CSS盒模型1.盒模型的概念盒模型由四个部分组成:内容(content)、填充(padding)、边框(border)、外边距(margin)。盒模型示例图:padding、border和margin都有四个方向,分别是上(top)、下(bottom)、左(left)、原创 2021-03-15 20:00:19 · 2867 阅读 · 20 评论 -
前端学习(初识CSS 上)——选择器、优先级和字体样式
前端学习之初识CSS一、什么是CSS?二、CSS基础语法1.代码结构2.CSS的引用方法(1)内联式(2)嵌入式(3)链接式(4)导入式三、CSS选择器1.标签选择器2.类选择器3.ID选择器4.群组选择器5.通配符(全局)选择器6.后代选择器7.子选择器8.伪类选择器(1)链接伪类(2)伪类选择器的其他用法9.属性选择器10.选择器的优先级以及权重11.!important用法一、什么是CSS?1.CSS 指层叠样式表 (Cascading Style Sheets)。2.样式定义如何显示 HTML原创 2021-03-14 16:55:10 · 3430 阅读 · 17 评论