css中em和颜色设置

html-css015

css中em和颜色设置,第1张

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:XXbottom:XX

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

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

网页设计中色彩搭配原则及方法

色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配。以下是我搜索整理网页设计中色彩搭配原则及方法,欢迎大家阅读!

一、色彩搭配原则

在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。

1.色彩的鲜明性:

如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。

2.色彩的独特性:

要有与众不同色彩,网页的用色必须要有自己独特的风格,这样才能给人浏览者留下深刻的印象。

3.色彩的艺术性:

网站设计是一种艺术活动,因此必须遵循艺术规律。按照内容决定形式的原则,在考虑网站本身特点的同时,大胆进行艺术创新,设计出既符合网站要求,又具有一定艺术特色的网站。

4.色彩搭配的合理性:

色彩要根据主题来确定,不同的主题选用不同的色彩。例如,用蓝色体现科技型网站的专业,用粉红色体现女性的柔情等。

二、网页色彩搭配方法

网页配色很重要,网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力,不恰当的色彩搭配则会让访问者浮躁不安。

1.同种色彩搭配:

同种色彩搭配是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感。

2.邻近色彩搭配:

邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱,易于达到页面和谐统一的效果。

3.对比色彩搭配:

一般来说,色彩的.三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力,能够起到几种实现的作用。对比色可以突出重点,产 生强烈的视觉效果。通过合理使用对比色,能够使网站特色鲜明、重点突出。在设计时,通常以一种颜色为主色调,其对比色作为点缀,以起到画龙点睛的作用。

4.暖色色彩搭配:

暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。

5.冷色色彩搭配:

冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配,这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。

6.有主色的混合色彩搭配:

有主色的混合色彩搭配是指以一种颜色作为主要颜色,同色辅以其他色彩混合搭配,形成缤纷而不杂乱的搭配效果。

7.文字与网页的背景色对比要突出:

文字内容的颜色与网页的背景色对比要突出,底色深,文字的颜色就应浅,以深色的背景衬托浅色的内容(文字或图片)反之,底色淡,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。

根据研究表明,90%的快速购买决定完全是由颜色感知决定的。网页颜色搭配的是否合理会直接影响到访问者的情绪,它有助于创建想法,传达信息,调用情感和提高兴致。

普通用户的注意力跨度为15秒,因此最好的方式就是让用户在你的网站上多停留一会。利用好的色彩搭配会给访问者带来很强的视觉冲击,不恰当的色彩搭配则会让访问者浮躁不安。因此网站颜色会在一定程度上影响着访问者是否要继续浏览网站内容。

网站色彩搭配法

1>同种色彩搭配:

同种色彩搭配是指首先选定一种颜色,然后调整其透明度和饱和度,将颜色变淡或加深,而产生新的颜色,这样的页面看起来色彩统一,具有层次感。

2>临近色彩搭配:

邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱,易于达到页面和谐统一的效果。

3>对比色彩搭配:

一般来说,色彩的三原色(红、黄、蓝)最能体现色彩间的差异。通过合理使用对比色,能够使网站特色鲜明、重点突出。在设计时,通常以一种颜色为主色调,其对比色作为点缀,以起到画龙点睛的作用。

4>暖色色彩搭配:

暖色色彩搭配是指使用红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用可为网页营造出温馨、和煦和热情的气氛。

5>冷色色彩搭配:

冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配,这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色调与白色搭配一般会有较好的视觉效果。

配色禁忌须知

选择网站配色前,需要明确知道一个能够让用户舒适地浏览的网站,有什么需要注意的点:

01|网站的配色尽量不要超过3种颜色,(黑白灰在网站配色中不属于配色);

02|背景和前文的对比尽量要大,不要用花纹繁复的图案做背景。

网站的辅助色很重要

大家需要明确的是,黑、白、灰在网站的配色中属于辅助颜色,它可以让网站的内容呈现更加清晰,也可以让用户浏览了大面积的颜色后,能够短暂地让眼睛得到休息的作用。

常见行业网站颜色推荐

01|蓝色

蓝色给人以沉稳的感觉,且具有深远、永恒、沉静、博大、理智、诚实和寒冷的意象。同时,蓝色还能够营造出和平淡雅洁净及可靠等氛围。

适用行业:科技类、电子类、五金、企业宣传类等

02|绿色

在商业网页设计中,绿色所传递的是清爽、理想、希望和生长的意象,绿色通常与环保意识有关,也经常使人联想到有关健康方面的事物。

适用行业:环保类、服务业、卫生类、教育业、农业类等

03|橙色

橙色是十分活泼的光辉色彩,是最暖的色彩,给人以华贵而温暖、兴奋而热烈的感觉,也是令人振奋的颜色。橙色具有健康、活力、勇敢和自由等象征意义,能给人以庄严尊贵神秘等感觉。

适用行业:时尚类、美食类、亲子类等

04|红色

红色是一种对人刺激性很强的颜色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动。红色除了具有较佳的明视效果外,更被用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。

适用行业:政府类、教育类、电子商务、艺术类等

只有当网站的颜色搭配好了,才能够让访问者能够舒适地浏览网站,对网站和企业形象产生记忆,才能有效地提高访问者对企业网站的观感。