css中em和颜色设置

html-css013

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.设置float属性

将块级元素的css格式设置为float:left/right,比如,有两个panel,panelA和panelB,想要使其位于同一行,只需要设置A的css格式为float:left/right即可。

注意:只是设置A的float属性哦,若设置了B的float属性,则B后面的元素也会与其位于同一行。若使用该方法,则两个块级元素紧挨着。

2.设置display

display为inline-block,即编写css代码为display:inline-block.使用该方法,两个块级元素中间有一定间隔。

注意,该方法与上一方法相同,仍然需要设置A的display属性,而非B的属性。

链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式。下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助。 在讨论CSS属性之前,先了解链接的状态是非常重要的。链接可以存在于不同的状态,并且可以使用伪类进行样式设置。下面给出了四种链接状态:● a:link =>这是一个正常的,未访问过的链接。 ● a:visited =>这是用户至少访问过一次的链接 ● a:hover =>当鼠标悬停在它上面时,这是一个链接 ● a:active =>这是一个刚刚点击的链接。语法:color_name可以采用任何格式,如颜色名称(green)、十六进制值(#5570f0)或RGB值-rgb(25, 255, 2)。还有另一个状态“a:focus”,用于在用户使用Tab键浏览链接时进行聚焦。链接的默认值:● 默认情况下,创建的链接带有下划线。 ● 当鼠标悬停在链接上方时,它会变为手形图标。 ● 正常/未访问的链接为蓝色。 ● 访问过的链接有紫色。 ● 活动链接为红色。 ● 链接聚焦时,它周围有一个轮廓。 例: 效果图:CSS如何设置链接的样式?下面是链接的一些基本CSS属性: ● color属性 ● font-family属性 ● text-decoration属性 ● background-color属性1、color属性: 此CSS属性用于更改链接文本的颜色。 语法: 例: 效果图:2、font-family属性 :此属性用于使用font-family属性更改链接的字体类型。 语法:3、text-decoration属性: 此属性主要用于向链接删除或添加下划线等修饰。 语法: 例: 效果图:4、background-color属性 :此属性用于设置链接的背景颜色。 语法: 例:使用以下css属性 效果图: 更多 web前端 知识,请查阅 HTML中文网 !!