CSS
大前小白
哪有什么天才!
坚持做自己喜欢做的事情,这本身就是一种天赋。
展开
-
CSS 表格样式
本节我们来学习表格样式,通过 CSS 中的属性可以设置表格的外观,例如表格边框样式、颜色、间距等。设置表格边框之前我们讲 HTML 的使用讲过,在 HTML 中如果要设置表格的边框,可以使用 border 属性。而 CSS 中同样有一个 border 属性可以用来设置边框,上一节我们也有讲到这个属性,所以这里就不详细讲啦。示例:将下面这个表格的边框设置成1像素、实线、蓝色:<!DOCTYPE><html> <head> <meta c原创 2020-09-27 11:05:04 · 634 阅读 · 0 评论 -
CSS 边框样式
本节我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。关于边框样式的四个属性:属性描述border-width设置边框的宽度border-style设置边框的样式border-color设置边框的颜色border在一个声明中设置所有的边框属性border-widthborder-width 属性用于设置边框的宽度,原创 2020-09-24 11:21:46 · 2758 阅读 · 0 评论 -
CSS 列表样式
我们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用,例如像导航栏菜单、新闻列表、商品分类、图片展示等,基本都是通过无序列表来实现的。无序列表中每个列表项前面都会默认带一个圆点符号,然而一般我们平时在网站上看到的列表样式,通常前面是没有圆点符号的,所以我们要如何去掉这个默认的圆点符号呢?这些都可以通过 CSS 中的列表属性来实现。本节要讲的 CSS 中的列表属性有下面四个:属性描述list-sytle-type设置列表项的标记的类型原创 2020-09-21 14:36:12 · 1884 阅读 · 0 评论 -
CSS 链接样式
超链接是网页的基本元素之一,几乎每个网页我们都可以看到超链接。在之前讲 HTML 的时候就讲过,超链接会自带一些默认样式,例如未点击的超链接会显示带下划线的蓝色字体、点击时字体变为红色、点击后字体变为紫色。这种点击前后不一致的样式,其实是超链接的伪类样式,伪类就是不根据名称、属性或者内容,而是根据标签处于某种行为或状态时的特征来修饰样式,也就是说超链接将根据不同的状态显示不同的样式。去掉链接的下划线首先,我们知道超链接本身是带有默认下划线的,但是一般我们在网页中看到的超链接都是没有下划线的,那么要如何去原创 2020-09-18 15:00:32 · 899 阅读 · 0 评论 -
CSS 背景样式
我们平时看到的网页中会有各式各样的背景样式,例如有用颜色作为背景的,也有图片作为背景的。添加背景样式能够让网页更好看,那么要如何设置页面的背景样式呢,这就是本节我们要学习的内容。背景颜色首先我们来讲如何设置背景颜色,浏览器页面的默认背景颜色为白色,但是很多时候为了页面的美观我们会重新设置一个背景颜色,一般在一个网站中大部分页面都会采用某个统一的背景颜色。我们可以通过CSS 中的 background-color 属性来设置背景颜色 ,这个属性可以接受任何合法的颜色值,像颜色名称、十六进制颜色值、RGB原创 2020-09-15 10:22:36 · 226 阅读 · 0 评论 -
CSS 文本样式
本节我们讲文本样式,像比如设置文本颜色呀,首行缩进、水平对齐等,可以对网页进行排本设置等。将要学习的文本属性有如下几个:属性描述color设置文本颜色text-index设置首行文本的缩进text-align设置文本水平对齐方式line-height设置文本行高text-decoration设置文本的装饰color首先我们来讲文本颜色设置,前面我们讲过一节关于如何设置颜色,所以想必大家对如何给文本设置颜色不会。示例:例如给下面的 <原创 2020-09-14 11:03:51 · 221 阅读 · 0 评论 -
CSS 字体样式
本节我们来讲字体样式,之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。接下来我们会给大家介绍下面这几个属性的使用:属性描述font-family设置元素的字体font-size设置字体的大小font-style设置字体的风格font-weight设置字体的粗细font在一个声明中设置所有的字体属性通过学习上述这几个 CSS 属性,我们可以实现给 HTML 中的文原创 2020-09-11 09:54:51 · 187 阅读 · 0 评论 -
CSS中的颜色介绍
本节我们来讲一下颜色,因为我们后面学习 CSS 样式时,会经常用到颜色,颜色也是网页中必不可少的一个元素。例如我们可以给某个字体设置颜色,给元素的边框设置颜色,设置元素的背景颜色等。要想一个网页好看,肯定是需要给它添加一些色彩的。颜色值颜色是通过对红、绿和蓝光的组合来显示的。我们一般会通过下面三种方式来规定 CSS 中的颜色:颜色名称十六进制颜色值RGB 颜色颜色名称HTML 和 CSS 颜色规范中定义了 147 种颜色名,其中有 17 种标准颜色,加上 130 种其他颜色。例如 red原创 2020-09-07 09:43:16 · 597 阅读 · 0 评论 -
CSS 三种基础选择器
本节我们来学习 CSS 中的选择器,选择器是 CSS 里面一个很重要的概念,HTML 中的所有标签样式,都是通过不同的 CSS 选择器进行控制的。我们只需要通过选择器,就可以对不同的 HTML 标签进行选择,并指定各种样式声明。在 CSS 中三三种最基本的选择器,分别是标签选择器、类选择器(class)、ID选择器。我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式,也就是将 CSS 代码单独放置到一个 .css 文件内,然后再引入这个 CSS 文件。标签选择器我们知道一个 HT原创 2020-08-28 13:06:08 · 6473 阅读 · 0 评论 -
CSS 三种样式
本节我们要学习一下 CSS 样式的几种形式,在实际应用中向 HTML 中引入 CSS 样式的方法有三种,分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景,本节我们先来讲一下行内样式。什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的:<p style="font-size: 18px;">行内样式</p>HTML 中的 style 属性提供了一种改原创 2020-08-21 10:15:23 · 3007 阅读 · 0 评论 -
CSS 入门介绍
本教程我们来学习基本的 CSS 知识,在学习 CSS 之前,大家肯定已经学习过了 HTML,在学习 HTML 的时候我们就已经讲到过,有很多的标签和属性其实都能直接通过 CSS 样式来代替实现,并且通过 CSS 样式来实现会更加方便。相对于我们平时看到的网页来说,如果仅仅通过 HTML 代码是无法达到某些比较复杂视觉效果的,但是如果配合 CSS 就能很容易实现啦。CSS 介绍CSS 的英文全称为 Cascading Style Sheets,翻译成中文叫做层叠样式表,是一种用来表现 HTML 或 XM原创 2020-08-10 09:48:26 · 106 阅读 · 0 评论 -
CSS之BEM命名规范
什么是BEMBEM是Block(块)、Element(元素)、Modifier(修饰符)的简写,是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。使用BEM主要是为了将用户界面划分成独立的块,使开发更为简单和快速,有利于团队协作,方便维护。为什么要选择BEM很多新手在开始写网页时,在命名方面可能都比较随心所欲。但是在一个正式的项目中,会有很多开发人员同时进行开发,如...原创 2020-04-01 10:14:28 · 454 阅读 · 1 评论 -
Canvas动画
1:Canvas动画原理快速切换的静态画面。2:基本步骤绘制 - 清空 - 绘制 - 清空 - 绘制 …3:控制函数setTimeoutsetIntervalrequestAnimationFrame4:四种运动线性运动 const canvas = document.getElementById('canvas'); /* 获得 2d 上下文对象...原创 2019-07-23 14:02:36 · 4003 阅读 · 0 评论 -
Canvas的变换
Canvas的变换的相关内容主要是从平移(translate)、旋转(rotate)、缩放(scale)、矩阵变换(Tramsform)、阴影(Shadow)、画布合成和路径裁剪(Clip)多个方面拓展了Canvas的绘图能力。1:Translate(平移) translate(x,y); // x 左右偏移量,y 上下偏移量2:Rotate(旋转) rotate(a...原创 2019-07-23 11:34:29 · 152 阅读 · 0 评论 -
HTML多媒体之Audio 和 Video。
1:Audio基本语法src 指定当前播放的音频文件,controls播放控制器,loop歌曲循环,autoplay自动播放 (chrome66之后被禁止)主流浏览器已经关闭了自动播放,需要js触发才行,preload 预加载,如果使用了autoplay这个属性preload就失效了。 <audio src="xxxx.mp3" controls="controls" l...原创 2019-07-26 14:08:36 · 246 阅读 · 0 评论 -
丰富的Canvas应用
这篇文章主要介绍了多媒体样式,Canvas填充、文本以及图片等多媒体样式应用, 结合状态保存与恢复介绍了Canvas如何绘制多彩的内容。1:添加样式主要有填充样式(fillStyle),轮廓的样式(strokeStyle),然后还有一个透明度(transparency)和线条样式(line style)。它们有一个共同的属性是设置之后都会成为默认属性。填充样式填充(fillStyle)...原创 2019-07-22 13:59:04 · 120 阅读 · 0 评论 -
离线地图
瓦片地图原理瓦片地图由一片一片的地图瓦片构成,它的尺寸是256px256px,是一张张的图片。下面的金字塔图片,从上到下,呈一个指数关系的增长,最上面对应比例尺最小,表示范围最大的地图,一般而言,最大的这个就代表世界地图整个的地球范围。然后依次往下,对应不同的层级。对于瓦片地图256px256px的图片组成结构,有一套自己的坐标系统。坐标系统有三个x,y,z。x,y确定当前瓦片的位置,z表示...原创 2019-07-25 09:49:31 · 485 阅读 · 0 评论 -
BEM命名规范
基本概念CSS 的命名规范又叫做BEM规范,为的是结束混乱的命名方式,达到一个语义化的CSS命名方式。BEM是三个单词的缩写:Block(块)代表更高级别的抽象或组件,Element(元素) Block的后代,以及Modifier(修饰) 不同状态的修饰符。命名方法: .block__element--modifier { display: flex; } ...原创 2019-07-17 18:03:32 · 147 阅读 · 0 评论 -
Canvas 简单介绍
1:基本概念Canvas是HTML5的一个新特性,canvas又叫做画板。顾名思义,我们可以在canvas上绘制我们需要的图形。最开始,canvas它是由苹果公司提出的,当时不叫canvas,叫widget,因为HTML并不存在一套二维的绘图API。Canvas本身是一个HTML元素,需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域,定义区域之后使用JavaScript的脚本绘制图像...原创 2019-07-19 15:22:43 · 2174 阅读 · 0 评论 -
CSS Module
CSS Module产生背景在软件工程里面模块指的是可组合、分解和更换的单元。下面是一张css树,项目里面总的css文件是由一系列小的单元组成,比如下面的reset.css就是一个单元。模块化的概念不光在css里面,在JS里面也是同样适用的,我们把代码按照一定的规则和逻辑拆分,分解成可组合可更换的单元,这样就实现了一个最大限度的代码复用。在css中,代码复用只是一个小的方面,更重要的是解决局部...原创 2019-07-17 10:12:45 · 188 阅读 · 0 评论 -
CSS布局发展史以及预处理器的初步认识
相信对于知道前端这个词的人应该都听说过CSS吧。提到CSS我们应该容易想到传统CSS带来的一些局限性,实际上在CSS的整个发展历史上,总共经历了4次的布局革命,从初代的table布局到CSS+DIV布局,再到现在比较流行的的Flex布局和Grid布局。初代的table布局实际上这个布局在目前的HTML5的规范中已经不存在了,但是还是可以稍微了解一下的:<MULTICOLCOLS="3"...原创 2019-06-14 15:30:45 · 262 阅读 · 0 评论 -
常见的CSS预处理器之Less初体验
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。简单来说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器的技术现在已经很成熟了,而且也出现了各种不同的 CSS 预处理器语言,但是呢不可能一一列出,面面俱到...原创 2019-06-17 10:17:11 · 154 阅读 · 0 评论 -
弹性盒模型常见例子
这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 ),介绍了Flexbox的主要应用场景,并与传统方式对比, 感受Flexbox布局带来的便捷开发体验。1 垂直居中对齐不使用Flexbox <style> .main1 { position: relative; height: 200px; ...原创 2019-06-21 13:54:50 · 769 阅读 · 0 评论 -
常见的CSS预处理器之Sass初体验
SassSass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言,即SassScript,它包括两套语法。最开始的语法叫“缩进语法”,使用缩进来区分代码块并且用回车将不同规则隔开;而较新的语法叫做“SCSS”,使用C...原创 2019-06-18 16:39:59 · 122 阅读 · 0 评论 -
CSS3 渐变(Gradients)
1:基本概念在两个或者多个指定的颜色之间显示平稳的过渡渐变的效果是由浏览器生成的渐变的类型主要分为两种:线性渐变(Linear Gradients)和径向渐变(Radial Gradients);线性渐变是一个向上、向下、向左、向右或者对角方向的渐变,而径向渐变则是由它们的中心定义。作为元素的background-image(background)使用2:浏览器的支持情况因为它是一...原创 2019-06-24 09:42:12 · 137 阅读 · 0 评论 -
Grid 布局
1:基本布局Grid 布局是二维的基于网格的布局系统,它可以同时处理列和行(这是对比flex弹性盒模型布局而言);第一个专门为解决布局问题而生的CSS模块。几个基本概念:Grid Container,又叫做Grid容器,就是设置了display:grid的元素。 .main{ display:grid; }Grid Item,又叫做Grid容器成员,Grid容器下面的直...原创 2019-07-03 09:42:00 · 90 阅读 · 0 评论 -
媒体查询与响应式
1:基本概念根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式(比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小),应用的、了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的,...原创 2019-06-28 18:47:22 · 197 阅读 · 0 评论 -
Transition 过渡
1:基本概念在一定时间内平滑的过渡,也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发;不能主动触发,只能被动触发。常用的基本属性有:Transition-duration(过渡时间)、Transition-property (过渡 CSS 属性名称)、Transition-delay(过渡开始时间)、贝塞尔曲线、Transiti...原创 2019-07-15 09:42:06 · 310 阅读 · 0 评论 -
媒体查询与响应式
1:基本概念根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式(比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小),应用的、了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的,...原创 2019-07-15 17:52:53 · 359 阅读 · 0 评论 -
Web 存储技术
一、背景介绍第一个Web存储的技术叫做Cookie,它是网站的身份证。是网站为了辨别用户身份,进行session(服务端的session)跟踪而存储在用户本地终端上的数据,也就是说它是存在电脑硬盘上的,一个很小的txt类型的文件。Cookie每次都会跟随http请求发送到服务端,也就是说每一个http请求都会带上我们的cookie数据,因此它存在一个安全性的问题。cookie本身也是有很大的局...原创 2019-07-18 09:52:15 · 355 阅读 · 0 评论 -
CSS 动画分类
CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与JS 动画主要是Animate.css 的引入、Animate.css 使用举例和JS 动画。首先,CSS动画分类的基本概念:1...原创 2019-07-16 10:19:53 · 1075 阅读 · 0 评论 -
初始WebWorker
基本概念JS单线程:我们都知道JavaScript它是一个单线程的语言,同一时间只能做一件事。比如:在浏览器中,某一时刻我们在操作DOM,你们这个时刻我们就不能去运行JavaScript代码,反过来也是,当我们在运行JavaScript代码的时候,我们也不能去操作DOM,这个也就是JS的单线程。为什么要JS成单线程?因为在浏览器环境下,如果是多线程的,也就是操作DOM和运行JavaScript代...原创 2019-07-18 16:06:43 · 148 阅读 · 0 评论 -
REM布局原理
加粗样式### 1 em、rem、meta标签的基本概念em 是一个布局的长度单位,当前对象内文本的字体大小的相对单位,也就是说相对于当前元素的font-size。rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系。物理像素是硬件的一个实际像素;而逻辑像素是我们在网页设计中使用的像素。它跟物理像素的关系是有一个设备像...原创 2019-07-16 15:29:39 · 671 阅读 · 0 评论 -
Transform(CSS动态属性的开始)
1、基本概念基本概念:transform 属性向元素应用 2D 或 3D 转换;该属性允许我们对元素进行旋转、缩放、移动或倾斜。这两点是Transform的概念和应用场景,重点在于2D和3D的转换,那么呢?2D和3D的转换是有一定的数学基础的,为什么这么说呢?我们需要了解两个概念第一个:透视投影从某一点发射出去的光线,是互不平行的,然后就会有一个近大远小的效果。比如:家里的灯泡,我们把一个...原创 2019-07-12 15:03:49 · 2205 阅读 · 0 评论 -
WebWorker进阶
WebWorker与主线程之间的通信这篇文章主要分享介绍了WebWorker特殊应用场景, 扩展了WebWorker的能力, 为跨页面通信提供了另外一种思路。在上一篇文章里面也有了解到webworker与主线程之间的通信,使用的是一个PostMessage。在上一篇文章中,有个例子是,从主线程到子线程传了一个json,从子线程到主线程传了一个number,由此可见,Webworker与主线程通信...原创 2019-07-19 09:46:34 · 739 阅读 · 0 评论 -
HTML地理坐标
定位基准说到地理坐标,一定是有一个定位的基准的。在web开发的过程中,它的定位基准一共有那么几种:第一种是IP,根据当前电脑或者是手机设备它的IP地址来确定当前的地理坐标。IP定位是通过ISP机房,也就是每一个登记的机房位置,比如小区,每一栋大楼都会有一个登记的ISP机房。如果使用IP定位的话,它大约能够精确到小区或者是大楼级别,比如一栋和二栋通过这个IP地址就能准确的区分出来。IP定位的误差...原创 2019-07-24 09:49:18 · 606 阅读 · 0 评论 -
Flex弹性盒子
这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程,最后重点介绍了Flex container六个属性以及Flex item的六个属性。下面我们就一一的往下看:基本概念Flex弹性盒模型是2009年W3C提出的一种新的布局方案,叫做Flex布局也叫作弹性盒子模型。它可以完整、简便、响应式的实现各种页面布局。布局的最外层元素叫做Flex容器(flex co...原创 2019-06-19 11:07:24 · 189 阅读 · 0 评论