css颜色 | 易学教程

CSS学习目录

前面的话　　CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。　　CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从 CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白。　　小火柴将CSS的知识体系进行了梳理和归纳，总结成以下目录基础基础语法　　引入CSS 　　选择器　　选择器新用法　　层叠　　单位　　样式关键字　　 calc() 　　默认可继承样式　　 CSS Why 　　变量Variable 　　属性速查表兼容　　 CSS Hack 　　 CSS兼容性详解　　 haslayout 伪类伪元素　　伪元素　　计数器　　伪类规范　　 CSS reset 　　 CSS命名实践　　 CSS规范　　命名规范　　 CSS编码技巧　

偶然看到的一个css特效实现透明渐变，效果还不错

阅读更多关于偶然看到的一个css特效实现透明渐变，效果还不错

知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关透明transparent也是一种颜色，也是渐变可以设置的下面我把自己的代码贴出来，仅供参考布局 <body> <div class="background-gradient"> <div class="mask"></div> </div> </body> css样式 <style> .background-gradient { margin: 0 auto; background: rgb(244, 195, 77); position: relative; width: 600px; height: 350px; } .background-gradient .mask { background-image: linear-gradient(to right, rgb(244, 195, 77), transparent), url("bg.jpg"); background-position: center; background-blend-mode: normal; position: absolute; height: 100%; width: 250px; right:

HTML/CSS 学习笔记（整理）

阅读更多关于 HTML/CSS 学习笔记（整理）

<html> <head> <title>网页标题</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />元数据标签（编码格式，关键字和内容描述） </head> <body> <h1></h1>文章标题 <p></p>段落 <hr/>水平线 <br/>换行 <strong>内容加粗</strong> <em>内容倾斜</em> <img src="图片地址" title="鼠标悬停显示内容" alt="地址错误显示内容" width="宽" height="高"/> </body> </html> 标签分类： <标签名>内容</标签名> <标签名属性名="属性值" 属性名="属性值"/> 规范要求：标签名小写，属性名小写，属性值加引号，（属性和属性，标签名之间有空格）必须有闭合标签，正确嵌套，子标签注意缩进注意：所有符号必须是英文环境下的符号特殊符号： &文字；空格： > ： > < ： < 版权符号：© 引号：" ----------------------------------------------------- 相对路径：相对于当前html页面所在地址例如： c:/demo/first.html中<img src="pic.jpg"/>

CSS——设置背景

阅读更多关于 CSS——设置背景

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> #style1 { font-family: "微软雅黑"; position: absolute; left: 340px; top: 123px; width: 98px; height: 90px; background-color: aliceblue; } #style2 { font-family: "微软雅黑"; position: absolute; left: 540px; top: 223px; width: 234px; height: 317px; background-image: url(img/1511498485601.jpeg); } </style> </head> <body bgcolor="aquamarine"> <div id="style1"> 床前明月光，<br> 疑是地上霜。 <br> 举头望明月， <br> 低头思故乡。 </div> <div id="style2"> </div> </body> </html> width和height用来控制选区的大小；left、right、top用来控制选区在页面中的位置；background

css 滚动条样式

阅读更多关于 css 滚动条样式

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3自定义滚动条-轩枫阁</title> <style> header { font-family: 'Lobster', cursive; text-align: center; font-size: 25px; } #info { font-size: 18px; color: #555; text-align: center; margin-bottom: 25px; } a{ color: #074E8C; } .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } .force-overflow { min-height: 450px; }

【CSS】Houdini， CSS的成人礼

阅读更多关于【CSS】Houdini， CSS的成人礼

前情提要 CSS ：老板，你看ES9，ES10都出来了，您看我的事情什么时候... W3C : 这不是正在走着流程嘛！小C你不要心急！ W3C ：（语重心长）你看啊，我们先（1）提个开发提案章程，然后再批准成立工作组（2）紧接着工作组建立标准和指南，然后再修改修改。（3）再然后啊，给顾问委员会技术报告审核一下（4）最后浏览器厂商再实现一下这不就完事了吗？大概不到10年咱们就全部搞定了吧 CSS : 。。。。。。 ( 难过 ) W3C ：（顿了顿）：但是这些年啊，你的刻苦努力我们都是看在眼里的！ CSS ：所以!!??(兴奋加期待) W3C ：所以啊，我们要感谢你为前端社区，所作出的贡献！ CSS ：。。。。。。（沮丧） W3C ：但是呢！考虑到你设备老旧，是该更新一下啦。 CSS ：请问是！？(兴奋加期待，还有微微的迟疑) W3C ：没错，这是老板我送给你的步入成年的礼物 —— Houdini 什么是Houdini Houdini包含6组API S1. Paint API 简单地讲，Paint API就是允许你通过JavaScript注册一个背景函数，类似于linear-gradient()那种，在定义时候可以提供Canvas的2Dcontext给你自行绘制，你通过JS注册这个背景函数后呢，就可以自由地在CSS中通过以下方式使用该背景 background:

less 的使用方法总结

阅读更多关于 less 的使用方法总结

一、安装和使用 LESS 　　1.1 安装　　使用命令行安装 LESS　 npm install -g less 　　1.2 使用　　less 有多种的使用方法，在这里我向大家介绍最常用的俩种方法。　　第一种是直接在浏览器中使用：去下载一个你要的 less.js 脚本；创建一个文件来放置你的样式，比如说style.less 添加下面的代码到你的 HTML 的 <head> 中。　 <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 　　请注意“link”的“rel”属性。你需要在属性值后面使用“/less”，LESS才起作用。你也需要在“link”样式表后面引入"script"。如果你正在使用“HTML5”语法，我无法想像为什么你不会用呢？你可以少去“type=‘text/css’”和“type='text/javascript'”。　　第二种就是在命令行中使用：　 lessc style.less style.css 　　然后会在项目目录生成 style.css 文件，在 html 中引入即可。如果在编译过程中出现错误，将会在命令行中提示你。　　Less 是用 JavaScript

css 对div用hover设置border，出现抖动和div走位问题，解决方法

阅读更多关于 css 对div用hover设置border，出现抖动和div走位问题，解决方法

样式设置： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。产生的原因：是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压，导致div偏移。解决方法：第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个div的样式：div {border:1px solid #aaa;}，然后再设置hover动作，div:hover { border:1px solid red;}。第二种方法：将这个div的border颜色设置为透明 div {border:1px solid transparent;}, 然后再引入hover动作 div:hover { border:1px solid red;} 。来源： https://www.cnblogs.com/pengfei25/p/11404840.html

css背景

阅读更多关于 css背景

css背景属性用于定义HTML元素的背景背景属性既可以为单个的单元设置背景，也可以为整个页面设置背景，可以对上述二者的任意组合设置背景，段落、文字、不同状态的链接、图像、内容区域修改其背景样式。设置背景有很多属性可以利用。将在下文中详细解释这些属性的用法。 css属性定义背景效果 background 简写属性，将背景属性设置在一个声明中 background-color 背景颜色 background-image 背景图片 background-position 背景图像定位，设置背景图像的起始位置 background-repeat 背景图像是否重复及如何重复 background-attachment 背景图像是否随着页面滚动 css3背景属性 background-size 背景图像的尺寸 background-origin 背景图像的定位区域 background-cilp 背景图像的绘制区域一、css背景属性（一）修改文本颜色 background-color：可以为所有的元素设置背景颜色，从整体页面到单个元素都可行。 background-color属性取值为color（颜色值）或是transparent（透明） transparent 默认值，如果一个元素没有设置背景颜色，那么他就是默认透明的，允许通过父元素的背景颜色，这样其祖先元素就是可见的。

css day2

阅读更多关于 css day2

外观属性 color：文本颜色用于定义文本的颜色 1.预定义的颜色值，如red、green、blue等 2.十六进制，如#FF0000、#FF6600、#29D794等。十六进制是最常用的定义颜色的方式 3.RGB代码，如红色可以表示为rgb（255,0,0）或rgb（100%，0%，0%） line-height:行间距 <style> p { line-height:20px; } </style> 一般情况下，行间距比字号大7/8像素即可 text-align：水平对齐方式用于设置文本内容的水平对齐，相当于html中的align对齐属性属性 left：左对齐（默认值） right：右对齐 center：居中对齐 <style> h1 { text-align:center; } </style> text-indent：首行缩进设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比% 允许使用负值，建议使用em作为设置单位 1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度 letter-spacing：字间距用于定义字符与字符之间的间距，其属性值可为不同单位的数值，允许使用负值，默认为normal word-spacing：单词间距用于定义英文单词之间的间距，对中文字符无效，与letter

订阅 css颜色