css颜色 | 易学教程

网站变成灰色CSS代码

阅读更多关于网站变成灰色CSS代码

为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。 [css]html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }[/css] 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入： <style> html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} </style> 有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议 [html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>[/html] 请将网页最头部的<html>替换为以上代码。有一些网站FLASH动画的颜色不能被CSS滤镜控制

less 学习笔记

阅读更多关于 less 学习笔记

一、介绍 Less （Leaner Style Sheets 简洁的样式表）是一门向后兼容的 CSS 预处理语言，它扩展了CSS 语言。 less is more. 几种 css 预处理语言的诞生先后顺序： Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。 Less 诞生于 2009 年，受 Sass 的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。二、安装 & 使用 1、在 Node.js 环境： npm install -g less > lessc styles.less styles.css 2、在浏览器环境： <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ><

link rel=alternate网站替换功能

阅读更多关于 link rel=alternate网站替换功能

此方法借助HTML rel属性的alternate属性值实现。 <link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="默认"> <link href="red.css" rel="alternate stylesheet" type="text/css" title="红色"> <link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色"> 上面4个 <link> 元素，共出现了3中不同性质的CSS样式文件加载：没有title属性，rel属性值仅仅是stylesheet的 <link> 无论如何都会加载并渲染，如reset.css；有title属性，rel属性值仅仅是stylesheet的 <link> 作为默认样式CSS文件加载并渲染，如default.css；有title属性，rel属性值同时包含alternate stylesheet的 <link> 作为备选样式CSS文件加载，默认不渲染，如red.css和green.css 实现案例： css代码： /* default.css中 */

CSS-初学3

阅读更多关于 CSS-初学3

CSS三大特性 css层叠性层叠性是指多种css样式的叠加。是浏览器冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个会将另一个属性层叠掉一般情况下，如果出现样式冲突，则会按照css书写顺序，以最后的样式为准样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠 css继承性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。简单的理解就是:子承父业。注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-, font-,，1ine-这些元素开头的都可以继承，以及co1or属性) css优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下: 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖维承来的样式。行内样式优先。应用sty1e属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级

CSS - 浅析css预处理器

阅读更多关于 CSS - 浅析css预处理器

为什么要预处理器 css层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，它不具备任何语法支持，它主要缺陷如下：语法不够强大，比如：无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS 预处理器】的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。什么是CSS预处理器 CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。 CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。常用的CSS预处理器 SASS 基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习

解决ie6上碰到的css兼容问题

阅读更多关于解决ie6上碰到的css兼容问题

ie6上css碰到的坑前两天在给一个项目做东西的时候，碰到一个有意思的项目，是需要兼容ie6，有一些碰到并且解决的问题，给大家写下来，方便大家以后碰到类似的问题哈～ 1.important支持的不够好 1.1为什么说不够好？ important某些情况下不能决定最终的样式属性。 1.2代码！代码！！我们通过对颜色的控制说明这一切~ <style type="text/css"> div { width: 100px; height: 100px; border: aliceblue 2px solid; } .frist { background-color: red !important; background-color: blue; } .second { background-color: red !important; } .third { background-color: blue; } .second { background-color: blue; } </style> <div class="frist"></div> <div class="second third"></div> <div class="second"></div> 1.3 上图！上图！！谷歌 ie6 1.4我们发现了啥？ 1.在同一个css代码块中的important没那么强力

部份css样式详解(附实际应用)

阅读更多关于部份css样式详解(附实际应用)

本文的所有实例均基于博客园的页面定制。所有表格内容来自W3CSchool。页面背景（background）博客开通之后，很多人最先做的事情一定是改页面的背景，换成一张图片或者换上一个自己喜欢的颜色，这时候用到的就是background属性。但是，在什么地方用呢？所有的html标签都支持这个属性。所以，随便用。我们经常能看到类似 background: #fff; 这种使用方式，如果背景是张图片，那可能会看到 background: url('xxx.jpg'); 这种使用方式。即使没有系统的学过css，仅看这两条代码也能知道前者是在设置背景色，后者则是在设置背景图片。实际就是选择图片做背景还是选择颜色做背景。那么现在设置一下博客的背景： body { background: #FFE4C4; } 颜色确实改变了哈，同理可以设置图像背景。我们在浏览器中检查元素（F12），可以看到background实际上是一系列属性的集合。对于单纯的背景颜色来说，这一系列的属性通常可以无视，对于图像背景，则按需设置这些内容（一般是 postion, size, repeat, attachment 这几条）。这些属性的具体使用方式可以通过手册查找到，这里不再叙述。上面换上了背景图像之后，我们使用手机打开，发现图像平铺了（未设置repeat），但是关闭了这条属性

CSS3学习手记（5）渐变

阅读更多关于 CSS3学习手记（5）渐变

CSS渐变线性渐变沿着一根轴线改变颜色，从起点到终点进行顺序渐变径向渐变线性渐变（默认从上到下） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{background: linear-gradient(red,green);width: 100px;height: 100px;} </style> </head> <body> <div></div> </body> </html> 从左到右 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px;height: 100px; background: linear-gradient(to left,red,green) } </style> </head> <body> <div></div> </body> </html> 对角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

less学习笔记

阅读更多关于 less学习笔记

less基础内容使用@来声明变量 url 变量 /* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); } 变量用于字符拼接使用方法： @className: box; @mainColor: #e92323; .@{className} { color: @mainColor; } 等价于 .box{ color: #e92323; } 嵌套使用： &，当需要连接时使用&，代表上层选择器的名字，如： .class { &:hover{ cursor: pointer; } img { ... } } 此时 &:hover 等同于 .class:hover{} ; 此时 img 等同于 .class img{} ; 媒体查询 @media .container{ width: 750px; @media screen { @media (max-width: 768px){ background-color: red; } } @media tv { background-color: yellow; } } 等同于 @media

css盒子模型

阅读更多关于 css盒子模型

Day06 上午（CSS） CSS 三大特性 CSS层叠性 CSS继承性 CSS优先级 CSS特殊性（Specificity）盒子模型盒子模型（Box Model）盒子边框（border）盒子边框写法总结表表格的细线边框圆角边框(CSS3) 内边距（padding）下午上午（CSS） CSS 三大特性 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " utf-8 " > < style > div { color : skyblue ; font-size : 12px ; } div { color : hotpink ; } </ style > </ head > < body > < div > 王可可是一条狗

订阅 css颜色