css颜色 | 易学教程

css--图片整合（精灵图）

阅读更多关于 css--图片整合（精灵图）

图片整合（精灵图）精灵图的优点：减少图片的字节减少了网页的http请求，从而大大的提高了页面的性能解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。通用代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片整合</title> <style> .box{ width:200px; margin:0 auto; overflow:hidden; background:url(img_navsprites_hover.gif )0 0; background:no-repeat; } .into{ float:left; width:43px; margin-left:10px; height: 44px; } .span1{ background:url(img_navsprites_hover.gif )0 0; } .span1:hover{background: url('img_navsprites_hover.gif') 0 -45px;} .span2{background:url('img

CSS基础

阅读更多关于 CSS基础

css语法:选择器{声明}; 声明由 css属性:属性值; 组成 p{background-color: #ccc;} css属性 width 宽度(单位：px) height 高度（单位:px） background-color 背景颜色(颜色的英文或者十六进制颜色) color 字体颜色 font-size 字体大小 …… css注释 /*h3{width:300px;}*/ 单行注释 /* p{ width:300px; height: 300px; } */多行注释 css样式表 1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> h3{ width:300px; height:300px; background-color:red; } </style> </head> <body> <h3>内部样式表</h3> </body> </html> 2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件

[转]CSS clear both清除浮动

阅读更多关于 [转]CSS clear both清除浮动

本文转载于: 猿2048 网站 [转]CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了 css float 浮动会产生 css浮动，这个时候就需要清理清除浮动，我们就用 clear 样式属性即可实现。接下来我们来认识与学习 css clear 知识与用法。 clear清除浮动目录 clear语法与结构 div clear常用地方 css+div案例 DIVCSS5总结一、clear语法与结构 - TOP 1、clear语法： clear : none | left|right| both 2、clear参数值说明： none : 　允许两边都可以有浮动对象 both : 　不允许有浮动对象 left : 　不允许左边有浮动对象 right : 　不允许右边有浮动对象 3、clear解释：该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。 4、css结构 div {clear:left} div{clear:right} div{clear:both} 二、div clear常用地方 - TOP 我们常常用于使用了float css样式后产生浮动，最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动

关于sass、scss、less的概念性知识汇总

阅读更多关于关于sass、scss、less的概念性知识汇总

这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的比较 4、为什么选择使用Sass而不是Less？什么是Sass和Less？ Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。为什么要使用CSS预处理器？作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。 CSS有具体以下几个缺点：语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。但是

html--前端css常用属性

阅读更多关于 html--前端css常用属性

1、颜色属性　　<div style="color:blueviolet">ppppp</div> 输入颜色英文单词　　<div style="color:#ffee33">ppppp</div> 16进制颜色样式　　<div style="color:rgb(255,0,0)">ppppp</div> 红绿蓝三原色按顺序　　<div style="color:rgba(255,0,0,0.5)">ppppp</div> a代指透明度 2、字体属性：　　font-size: 20px/50%/larger 字体大小　　font-family:'Lucida Bright' 字体样式　　font-weight: lighter/bold/border/ 字体粗细　　line-height:40px; 字体上下调到居中位置　　<h1 style="font-style: oblique">老男孩</h1> 斜体 3、背景属性　　　 margin-bottom: 2px; padding: 0px; box-sizing: border-box; color: rgb(85, 84, 84); font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color:

css布局

阅读更多关于 css布局

目录标签样式设置字体颜色样式 06a0de 直接用pycharm提供的取色器即可 a标签的样式设置边框背景样式设置 display 盒子模型浮动浮动带来的影响 clear 定位相对定位：relative 绝对定位：absolute 固定定位（回到顶部）fixed opacity 位置的变化是否脱离文当流 z-index 标签样式设置只有块级标签才可以设置长宽行内标签设置了没有任何作用字体颜色样式颜色英文如red 06a0de 直接用pycharm提供的取色器即可 rgb(1,1,1) 可以利用截图软件获取三基色数字 rgba(0,128,128,0.3) 最后一个数字是用来调节颜色的透明度 a标签的样式设置 a{ text_decoration:none; } 背景图片，默认是铺满整取区域通常一个页面上的一个个的小图标并不是单独的通常一个页面上的一个个的小图标并不是单独的而是一张非常大的图片该图片上有网址所用到的所有的小图标通过控制背景图片的位置来显示不同的图标样式边框 border 后面写三个参数和位置没有关系：颜色，字体，样式如red 3px solid 也可以单独设置样式，颜色，粗细 border-top-style:dotted; border-top-color: red; border-right-style:solid

css标签样式边框盒子模型定位溢出 z-index 透明度

阅读更多关于 css标签样式边框盒子模型定位溢出 z-index 透明度

目录一、CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色（3种表示方法） 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换二、盒子模型三、浮动（ ************ ）三、溢出四、定位五、z-index 控制z轴六、位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流七、透明度一、CSS设置标签样式 1. 给标签设置长和宽只有块级标签才可以设置长宽行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小） 2.字体的颜色（3种表示方法）颜色的英文 6aode 直接使用pycharm提供的取色器即可 rgb(1，2，3) 可利用截图软件获取三基色数字 rgba(0,128,128,0.5) 最后一个数字，只能用来调节颜色的透明度 <style> p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; font-size: 24px; font-weight: lighter; /*color: 'red';*/ /*color: #06a0de;*/ /*color: rgb(0,128,128); !* 数字范围只能是0~255*!*/ color: rgba(0,128,128,0.9); } </style

CSS尺寸样式属性

阅读更多关于 CSS尺寸样式属性

尺寸样式属性介绍属性值含义 height auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度设置元素高度 width 同上设置元素的宽度 height属性和width属性接下来让我们进入 height 属性、 width 属性实践，笔者用 class 属性值为 .box ，给 div 标签设置宽度和高度以及 div 标签背景颜色。代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>尺寸样式属性</title> <style> .box{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box"> </div> </body> </html> 代码块假设我们不给 div 标签设置宽度，会变成什么样呢？那咱们就试试看哦。代码块 <!DOCTYPE

利用CSS改变图片颜色的100种方法！

阅读更多关于利用CSS改变图片颜色的100种方法！

前言 “说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。” 你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。强大的 CSS:filter CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN CSS标准里包含了一些已实现预定义效果的函数。 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();  <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原图"> filter: none 没有任何效果，默认filter就为none filter:blur( <length> ) 高斯模糊给图像一个高斯模糊效果

CSS 背景

阅读更多关于 CSS 背景

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: 实例 body {background-color:#b0c4de;} 尝试一下 » CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" 以下实例中, h1, p, 和 div 元素拥有不同的背景颜色: 实例 h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} 尝试一下 » 背景图像 background-image 属性描述了元素的背景图像. 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 页面背景图片设置实例: 实例 body {background-image:url('paper.gif');} 尝试一下 » 下面是一个例子是一个糟糕的文字和背景图像组合

订阅 css颜色