css颜色 | 易学教程

HTML与CSS学习笔记(2)

阅读更多关于 HTML与CSS学习笔记(2)

1、CSS背景样式？ background-color 背景色 background-image 背景图 url（背景地址）默认：会水平垂直铺满背景图 background-repeat 平铺方式 repeat-x x轴平铺 repeat-y y轴平铺 repeat（x和y都进行平铺，默认值） no-repeat 都不平铺 background-position 背景位置 x y 如果为正数：图片就会往右和下进行偏移；如果为负数：图片往左和上进行偏移还可以用单词： x：left、center、right y：top、center、bottom 还可以是百分数。 background-attachment ：背景图随滚动条移动的方式 scroll：默认值，跟着滚动条移动（背景位置是按照当前元素进行偏移的） fixed：固定，不随浏览器滚动条移动（背景位置是按照浏览器进行偏移的） 2、CSS边框样式？ border-style：边框样式 solid：实线； dashed：虚线； dotted：点线； border-width：边框大小 px border-color：边框颜色 red、#f00 边框也可以针对某一条边进行单独设置：border-top-style；中间是方向，可以是left、right、top、bottom 颜色：透明颜色 transparent 3、css文字样式

web前端开发规范手册

阅读更多关于 web前端开发规范手册

Web 前端开发规范手册一、规范目的 1.1 概述 ..................................................................................................................................... 1 二、文件规范 2.1 文件命名规则.........................................................................................................................1 2.2 文件存放位置..........................................................................................................................2 2.3 css 书写规范..........................................................................................................................3 2.4 html书写规范...............

Less基础

阅读更多关于 Less基础

维护css的弊端 css是一门非程序式语言，没有变量，函数，SCOPE(作用域)等概念 1、css需要书写大量看似没有逻辑的代码，css的冗余度是比较高的； 2、不方便维护以及进行拓展，不利于复用； 3、css没有很好的计算能力 Less介绍 Less(leaner style sheets)的·缩写是一门css扩展语言，也成为css预处理器，作为css的一种形式扩展语言，它并没有减少css的功能，而是在现有的css的语法基础上，为css加入程序式语言特性。它在css的语言基础上，引入了变量，Mixin(混入)，运算以及函数功能，大大简化了css的缩写，并且降低了css的维护成本，就像它的名称一样，less可以让我们用更少的代码实现更多的事情。 less的中文网址 ;http://lesscss.cn/ 常见的css预处理器：Sass、Less、Stylus 一句话总结： Less是一门css预处理语言，它扩展了css的动态特性在使用less之前需要进行less的安装，但是less的安装之前还需要安装nodejs，在node环境中安装less 一、less的安装安装nodejs, 目前最新版本（12.13.1）安装网址： http://nodejs.cn/download/ 检查是否安装成功，使用cmd命令（window10是 window+r打开运行输入cmd）---输入

CSS：颜色、背景和剪切

阅读更多关于 CSS：颜色、背景和剪切

颜色 CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色，如 red ，但是这些颜色关键字并不常用。 transparent transparent 可以让文字或背景变的完全透明的颜色，它就像 rgba(0,0,0,0) 的缩写。 currentColor currentColor 代表原始的 color 属性的计算值。比如当前元素 color 为红色，背景色设置为 currentColor ，那么现在背景色也为红色。 rgb、rgba 颜色还可以用 rgb 函数表示，如 rgb(255, 255, 255) 代表白色，它每个参数的取值范围是 0 到 255 ，它是用不同比例的红、绿、蓝来组成期望颜色。 rgba 函数代表红-绿-蓝-阿尔法，其中的 a 是透明度，取值范围是 0 到 1 。除了使用 rgb 函数，还可以使用 16 进制来表示，它的语法是 #RRGGBB ，如果 #f3f3f3 ，代表 f3 （16 进制）数量的红-绿-蓝。如果红-绿-蓝数值两两相等，如 #ffffff ，就可以简写成 3 位 16 进制的形式 #fff 。在高版本的浏览器还可以用 16 进制表示透明度 #RRGGBBAA ， AA 的取值范围是 0 到 255 ，如果两两相等也可以简写成 #RGBA 形式。 hsl、hsla hsl 函数是用色相-饱和度-明度（Hue

CSS中层叠和继承的概念。

阅读更多关于 CSS中层叠和继承的概念。

继承 CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码： 1 2 3 4 5 6 7 8 9 <html><br><head> <style> p{ border : 1px solid red } </style> </head> <body> <p> 123 <span> 123 </span> 123 </p> </body> </html> 　　如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。在上面的例子中，span标签没有用处，p标签起到了设置了边框为1像素，实心边框线。特殊性有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？想要理解这个概念，就要先理解权值这个概念。在百度百科中对于权值的概念是这样的：在数学领域，权值指加权平均数中的每个数的频数，也称为权数或权重。计算机领域中（数据结构）权值就是定义的路径上面的值。可以这样理解为结点间的距离。通常指字符对应的二进制编码出现的概率。 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <style> p{ color : red } .first{ color : green } </style>

css高级特性

阅读更多关于 css高级特性

css复合选择器 1、标签指定式选择器标记指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器两个选择器之间不能有空格。 2、后代选择器后代选择器用来选择元素或元素的后代，其写法就是把外层标记写在前边，内层标记下载后面，中间用空格分隔。当发生嵌套时，内标记就成为外标记的后代。 3、并集选择器并集选择器是各个选择器通过逗号连接组成，任何形式的选择器（包括标记选择器、class选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的css样式。 css层叠性和继承性 1、层叠性所谓层叠性是指多种css样式的重叠。例如，当使用内嵌式css样式表定义p标记字号大小为12像素，链入式定义p标记颜色为红色，那么段落文本将显示为12像素红色，及两种样式产生了重叠。 2、继承性所谓继承性是指书写css样式表时，子标记会继承父的表记的某些样式，如文本颜色和字号。例如，定义主体元素 body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标记都嵌套在body标记中，是body标记的子标记。恰当地使用继承可以简化代码，降低css样式的复杂度但以下属性不具有继承性变宽属性外边距属性内边距属性背景属性定义属性布局属性

CSS：var变量的局部作用域（继承）特性

阅读更多关于 CSS：var变量的局部作用域（继承）特性

一、CSS变量非全局最近做项目，发现CSS变量一个有意思的特性，那就是变量作用域非全局。举个例子，如下HTML和CSS： <div class="box"> <div class="a">测试a</div> <div class="b">测试b</div> <div class="c">测试c</div> </div> .box { --color: red; color: var(--color); } .a { --color: green; color: var(--color); } .b { --color: blue; color: var(--color); } .c { --color: yellow; } web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）虽然整个CSS公用一个上下文文档，但是，对于CSS变量，却是有作用域概念的，变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。因此，这里最终的颜色是：绿、蓝和红。如下截图：所以，如果你的变量是全局享用的，则建议放在 :root 上，例如： :root { --color: red; } 当然，也可以使用body或者html标签： body { --color: red; }

CSS：文字下波浪线动画效果

阅读更多关于 CSS：文字下波浪线动画效果

之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的，类似下图gif示意：这里就介绍下是如何实现的。有两种实现方法，各有优劣。一、使用径向渐变纯CSS实现就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以，我们只要使用径向渐变绘制圆弧，再通过 background-position 控制两个圆弧的位置，让其前后拼接在一起就可以实现波浪线效果。相关CSS代码如下： .flow-wave { background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x, radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x; background-size: 20px 20px; background-position: -10px calc(100% + 16px), 0 calc(100% - 4px); } web前端开发学习Q

CSS的基本知识

阅读更多关于 CSS的基本知识

CSS是什么层叠样式表（Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 CSS的作用以统一的方式实现样式的定义提高页面样式的可重用性和可维护性实现了内容（HTML）和表示（CSS）的分离 HTML与CSS之间的关系 HTML：构建网页的结构 CSS ：构建HTML元素的样式样式汇总： color：red 字体颜色 font-size 字体大小 font-family:字体样式 background-color 背景颜色 width：宽度 height：高度字体使用实例（样式） font-family 字体的种类 font-size 字号 color 字体的颜色 font-weigh 字体的粗细样式表分类内联样式表将样式声明在元素的style属性中 <p style="color;red（样式声明）">1</p> 样式声明表示一个具体的显示效果，可以多个同时存在的，多个样式之间用；进行隔开每个样式声明都有两部分组成 color：样式属性

less 的使用

阅读更多关于 less 的使用

less 的使用一、 Less环境安装 1.1 安装安装完成nodejs之后检测是否安装完成 node –v 查看版本然后检测 npm是否自带 npm –v 查看版本若没有安装，则运行 npm install –g less (部分电脑要 sudo 管理权限)即可安装。 Lessc –v 查看版本是否安装成功 Lessc less.less less.css 编译less文件成css 1.2 HbuilderX中的配置直接下载less插件，新建less类型文本文件之后，按下图找到配置文件后，修改onDidSaveExecution为true，设置快捷键为：Ctrl+S。即可实现快速自动编译，生成一个对应的.css文件。如果没有生效，重启HbuilderX。 "extensions": "less", "key": "ctrl+s", "showInParentMenu": false, "onDidSaveExecution": true 二、less用法使用目的：简化 CSS 的编写，并且降低了 CSS 的维护成本，LESS 可以让我们用更少的代码做更多的事情。本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代

订阅 css颜色