Css
深入理解CSS背景
背景和字体一样，是一个复合属性，而且它是一个使用频率很高的属性。在CSS3中，背景属性在保持以前用法的同时，增加了新的相关属性。本文将详细介绍关于背景的知识 背景颜色 背景色background接受所有合法的颜色，还可以接受一个使背景透明的关键字。关于颜色的设置请移步至此。背景颜色不能继承。其默认值是t...
CSS颜色模式转换器的实现
在CSS中，颜色的表示方式主要包括关键字、16进制、RGB模式、RGBA模式、HSL模式、HSLA模式。关于颜色模式的详细信息移步至此。本文就16进制、RGB模式及HSL模式的互相转换进行实现。 模式转换【1】16进制->RGB 16进制是设置颜色值的常用方式，将三个介于00-FF的十六进制数连接...
理解CSS前景色和透明度
颜色的出现让网页不再只是黑白，运用好颜色设计，能让网页增色不少。一个网页给人们留下的第一印象实际上就是它的整体颜色。关于如何设置颜色，请移步CSS的6种颜色模式。实际上，颜色的应用主要分为前景色、背景色和透明三个部分。本文主要介绍前景色和透明度。 color color前景色 值:<color&...
深入理解CSS六种颜色模式
赏心悦目的颜色搭配让人感到舒服，修改元素颜色的功能让人趋之若鹜。但颜色规划不当，会让网站用户无所适从。颜色从<fontcolor="">发展至今，保留了很多内容，也增加了新的内容，本文将介绍关于颜色模式的内容 以前主要采用关键字、16进制和RGB这三种设置颜色的方式。CSS3出现后，增加了...
CSS画出的图
矩形div{width:100px;height:100px;background-color:red;} 圆形div{width:100px;height:100px;background-color:red;border-radius:50%;} 椭圆【整个椭圆】div{width:100px;...
深入理解CSS计数器
我们对计数器已经不陌生了，有序列表中的列表项标志就是计数器。 创建计数器 创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量。counter-resetcounter-reset:none;(默认)counter-reset:<identifier><inte...
CSS字体
字体系列【1】5种通用字体系列：拥有相似外观的字体系列 serif字体:字体成比例，且有上下短线(衬线字体)，包括TimesGeorgiaNewcenturySchoolbook sans-serif字体:字体成比例，且没有上下短线(无衬线字体)，包括HelveticaGenevaVerdanaArialUnive...
CSS层叠
层叠样式表CSS最基本的一个特性就是层叠。冲突的声明通过层叠进行排序，由此确定最终的文档表示。而这个过程的核心就是选择器及其相关声明的特殊性、重要性、来源及继承机制。本文将详细介绍CSS层叠 特殊性 选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分(如：0,0,0,0)。下面来介绍不同的选择...
IE浏览器下常见的CSS兼容问题
【1】IE6-浏览器下子元素能撑开父级设置好的宽高<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>body{...
引入CSS
Web早期，HTML是一种很有限的语言，这种语言不关心外观，它只是一种简洁的小型标记机制。随着Mosaic网页浏览器的出现，网站开始到处涌现。对于页面改变外观的需求增加，于是增加了类似<font>和<big>之类的标记元素。几年之后，大多数网站标记几乎完全由表格和font元素组成，且对于所要...
在vue中使用css modules替代scroped
cssmodules是一种流行的模块化和组合CSS的系统。vue-loader提供了与cssmodules的集成，作为scopeCSS的替代方案。本文将详细介绍cssmodules 引入 最开始使用Vue的时候，提倡并大量使用的是scoped这种技术<stylescoped>@media(m...
CSS选择器的新用法
现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法 变量 一般地，我们在进行we...
CSS以图换字的9种方法
CSS以图换字的技术，很久都没人提起了。它是一种在h1标签内，使用图像替换文本元素的技术，使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法 文字隐藏 在h1标签中，新增span标签来保存标题内容，然后将其样式设置为display:none<style>h1{widt...
CSS文本效果
本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景；但它也可用于深色底、浅色字的场景，只要文字不是黑色并且背景不是纯黑或纯白就行【浅色背景深色文本】background:hsl(210,13%,60%);color:hsl(210,13%,30%);text-s...
CSS遮罩效果和毛玻璃效果
本文将详细介绍CSS遮罩效果和毛玻璃效果 普通遮罩 一般地，处理全屏遮罩的方法是使用额外标签<style>.overlay{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.8);}.lightbox{p...
