• css3 的background 渐变

    2019-10-27 21:30:36

    css3 的background 渐变 画了几个漂亮的渐变色,暂时不考虑兼容性问题了,嘿嘿。 background-image: linear-gradient(0deg, #fff 0%,#000 100%); 上面是主代码,括号内的0deg是角度,后面跟着一个颜色和颜色开始的位置,后面跟着另一个颜色和颜色结束的位置,可以写很多个颜色,标注好位置就好。 样式1 background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%); 样式2 background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%); 样式3 background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%); 样...

  • css常见样式命名规则

    2019-10-23 13:49:34

    css常见样式命名规则 前言 也许你曾经看到过很多样式命名规则,也参考了我们制定的命名规范,但是大部分的具体样式还是不知道如何命名,主要思想或者标准是什么,也就是前面.m-panel-后面的应该如何命名,子模块与父模块依赖关系怎么体现,等等类似的问题。如何友好科学的解决问题,能够与最大程度的降低我们后期对样式的维护难度。 本文将带你了解目前前端基本的命名规则,各自的优劣,然后我们会给出具体的方案。 一 指定的格式 驼峰式命...

  • css伪类选择器应该怎样用(上) 什么是伪类选择器 什么是伪类,既然是伪,那就是假的或者不存在的,也只有再特定状态下才会有作用。 即:同一个标签根据其不同状态会显示不同的样式的就是伪类。 伪类选择器分为两种,静态伪类和动态伪类,就是触发和非触发。 当然也有其他分法: 动态伪类(link/visited等) 目标伪类(:target) 语言伪类(:lang) UI状态伪类(disabled/checked/enabled) 结构化伪类(nth等) 对立面伪类(not。。) 不管怎么分,关键还是...

  • CSS选择器如此之多,你了解多少? 前言 css选择器非常之多,常见的如class选择器,id选择器,标签选择器等等。每个的用法都有所区别,虽然很多都能到达同样的效果,但还是有一些更优的选择。 class、id、标签选择器 这个几个就不细说了,class和标签选择器主要用来设置样式上面,id选择器推荐不要用在css样式上,更多是用在js操作dom时,选择元素。 如: div{ background: #fff;}.list { color: red;} $(#li).html(spanweb秀/span) element element div p 选择 div 元素内部的所有...

  • 用好这20个css技巧快速提升你的CSS技能 前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。 如何提升你的CSS技能?掌握这20个css技巧即可[完整版] 如果您对CSS比较陌生,看看这篇文章...

  • css伪类选择器应该怎样用(中) 接上篇css伪类选择器应该怎样用(上)继续整理css选择器。 由于我是将伪类及伪元素一起整理,其中没有去区分,重点写的也是如何使用,所以今天想起来就将伪类与伪元素区别也写一下,以防止进入误区。 伪类与伪元素定义基本一致,都是特殊状态下加样式,伪类是向存在的某个元素加样式,而伪元素是虚拟一个元素加样式。声明的时候伪元素是两个冒号:,伪类是一个冒号。before 和 after就是经常经常使用的伪元素。...

  • 你未必知道的49个CSS知识点 本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。 需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。另外这里,老姚谢谢各位一如既往的支持。 01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似...

  • 了解CSS组合器

    2019-10-23 12:05:36

    了解CSS组合器 如何使用它们,为什么 样式表通过使用所谓的选择器来引用HTML中的特定元素。这些选择器可以是Clsaa,ID,元素本身等。 我们将在本文中重点介绍的选择器是combinator。 它们以一种方式组合其他选择器,使它们彼此之间以及文档中内容的位置具有有用的关系。MDN网络文档 组合器可以通过最大化元素关联而不会使HTML淹没来确保CSS精确。看一下这个例子: div div h1Team 1/h1 ul li div h2Player 1/h2 ul liAverage points per game: 20/li /ul /div /li /ul /div/div 实际上...

  • 前端初学者必须记住的8个css选择器 css选择器是前端css的基础内容,当你灵活运用了选择器,那么写出色彩缤纷炫酷的页面就不成问题,选择器按书中或者网络分类有通用选择器,标签选择器,类选择器,ID选择器,伪类,伪元素,组合器等。那么本文会结合应用直接介绍30个css选择器。 一、* 通配符选择器也是通用选择器,它可以选择页面上的所有元素,并对它们应用样式,用 * 来表示。基本会见到很多页面上先开始就会定义通用选择器。 *{margin:0px;p...

  • 优化CSS并加速网站的21种方法 优化CSS需要一个多维的方法。虽然手工编写的代码可以使用各种技术进行简化,但是手工检查框架代码是低效的。在这些情况下,使用自动化的简化会产生更好的结果。 下面的步骤将带我们进入 CSS 优化的世界。并不是每一个都可以直接应用到你的项目中,但是一定要记住它们。 01. 使用简写 使用缩写语句,如下面所示的 margin 声明,可以从根本上减小 CSS 文件的大小。在 google 上搜索 CSS Shorthand 可以找到许多其他的速记形式...

  • 前端开发CSS学习的3种方法,如何快速的入门CSS? PHP是世界上最好的语言,这是一个老梗。 有不少学习PHP的程序员后来去做了前端开发,毕竟近些年前端开发还是蛮吃香的。 学习PHP不仅仅要学习html,而且还要学习CSS。 CSS是万维网联盟在 HTML 4.0 之外提出,目的是为了让CSS完成样式与内容的分离。 那么,CSS如何入门呢?w3cschool在这里分享几个方法: 0、研究w3cschool CSS教程 w3cschool官方本身就有CSS教程,我们看教程的目的主要还是要了解CSS到底是干什么用的。...

  • 眼下最流行的五大CSS框架,你都知道么? 如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了。作为开发工具,CSS框架一直处于不断进化和改进的状态,因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。 1.Bootstrap 这个框架是GitHub的明星产品之一,被认为是拥有最好的响应性的CSS框架。专为前端开发而设计,有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。 Bootstrap没有任何附加功能,但是...

112条记录

学习推荐

  • CSS
  • CSS3