css样式配色,css3颜色

CSS样式表在网页制作中的作用

CSS样式是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

成都创新互联公司网络公司拥有十多年的成都网站开发建设经验，千余家客户的共同信赖。提供网站制作、做网站、网站开发、网站定制、友情链接、建网站、网站搭建、响应式网站设计、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，可以很方便的控制网页表现，比如配色，布局等。

CSS样式在网页制作中有什么作用？

样式表可以很方便的控制网页表现，比如配色，布局等。

目前老式的采用表格形式的网页制作方式已经被淘汰了，你看下现在网络上的各大网站，基本全部采用div+css的表现形式了。

如何进行网页配色

网页调色板.[值得收藏]

做网页的好帮手.

flash RGB getor

color palette creator

这是我收藏之一，通过基本色调生成10种不同灰度的相同色，并且能生成png文件。

4096 Color Wheel Version 2.1

非常漂亮的自然色抓取工具，用鼠标点取颜色，非常方便。

technicolor

用鼠标拖动滑杆，再根据基色生成系统推荐的色调，最棒的是还能根据你选择的颜色生成标准的css文件。

color scheme generator 2

这也许是至今为止最专业的调色板了。不但能根据选择的基色生成相关的配色方案，还有根据颜色的饱和度，明亮度等等只有在photoshop里看见的调节功能，系统还提供推荐方案，有专门为色盲和色弱者推荐的颜色方案。

colr.org

从网站Url就能看出这也是一个专业的color site。color.org最酷的就是应用了tag，你可以输入forest(森林)这个词，系统自动根据你给出的词生成相关的颜色方案，输入love后我得到的大多是粉红基色调，很准确吧！系统有11000多种颜色tag和20000种颜色方案、7000多个调色板。当然，这个tag。。这个tag不支持中文的…

color blender

这个也是一个很有特色的调色板。输入两种截然不同的颜色，系统根据这两种颜色生成渐变色带。

color schemer v2

这个是color scheme generator 2的另一个版本

visibone color lab

这是第一个根据网页安全色制作的调色板，使用简单，鼠标不停的点，直到碰上让你感觉满意的效果。

RGB color charts

基于RGB原理的，不过系统生成的颜色很舒服。

full screen picker

这是一个基于浏览器的颜色拾取器，想必下，这种工具还是使用客户端的程序比较方便些。

colormixers

一边拉滑杆，一边看颜色的变化，相当方便。

以下也是一些color tools的相关链接：

当前最热门的十种颜色：

Moroccan blue :#081b55

Glazed ginger:#da4912

American beauty:#d31112

Ruby wine:#780e1a

Atmosphere:#c4a47b

Burnt olive:#565d10

Gloxinia:#530752

Rattan:#ffdc28

Moss:#a9a40c

Burnt orange:#fe690d

css中em和颜色设置

2018.7.16

em,px,都为长度单位，CSS直接设置就可以。

%不是一个长度单位，比如2%就是一个完整的值，是一个整体，比如0.02是一个值，没错，2%也同样是值（出处：《css世界》）

注：有一个特殊情况需要注意，如果，p为span的父元素（如下情况）

css里设置为

p{font-size:14px}

span{font-size:0.8em;}

自然就会继承父元素，然后再进行子元素的独特性，即（14*0.8=11.2px）以父元素的px为单位。

简写：当值为0px时，可以简写为0。(如下图所示)

颜色设置有 三种方法

第一种就是直接用英文名字（p{color:red;}）;第二种就是根据R(red)G(green)B(blue)颜色的比例来配色,每一项地值在0-255之间，也可以用百分比;（p{color:rgb(133,45,200);}）;第三种就是常用的，原理也是rgb设置，但是将255变成了十六进制（p{color:#336699;}）

补充：background-color属性接受任意合法的CSS颜色值，如预定义颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值（这些都是颜色设置的）

tips:1.十六进制的如果每两个之间数字相同可以简写成一个，如上面的p{color:#336699}为p{color:#369;}

2.RGB和我当时学的美术的三原色相类似，美术三原色为红黄蓝。（三间色可以直接用三原色调出，红黄为橙，红蓝为紫，黄蓝为绿）

之前一直分不太清楚，今天试了一下，然后懂了。（如下图）

margin为边界，又可以叫做外边框；padding为内边框，也为“填充”。

流动模型为网页的默认模型，流动模型的块元素是自上而下，行元素是从左到右显示。

模型移动（以层模型中的元素为例）

向右移动和向下移动不是我想的right:XX;bottom:XX;

而是距离左边XX,距离上面XX，距离原来的0，动了XX那么多，自然就是向那里移动了XX。（默认位置为左上角）

另外，层模型使得元素块移动后，它移动前的仍然保留。

CSS accent-color

一般我们的复选框长成下面这样，现在要求你切深色模式的时候，更改复选框选中的强调色为粉色。

审查元素，你发现 Checkbox 是原生 HTML 标签写的，这个时候你挠挠头，想了想 CSS 好像没有更改强调色的属性，没办法，只能自己来自定义了，但是重新自己写问题很大，从头开始构建它最终会比预期的工作多得多，即使用第三方框架也不是最理想的解决方案，浏览器万一更新新增效果就扯犊子了。

最好的解决方案还是利用 CSS 属性来解决。这就是我们的主角：

接下来给出实现的源码：

问题来了，这么好用的 CSS 属性，难道就只支持复选框吗？那肯定不成本着好东西多用，它支持四个元素： checkbox 、 radio 、 range 和 progress 。每个都可以在此处以浅色和深色配色方案预览 。

通过 查询 accent-color 的兼容性很一般，但是你要知道，即使是不支持的浏览器，你写了 CSS 语法是不会报错的，所以作为增强使用完全没问题。