CSS颜色表示的几种方式】的更多相关文章

在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法. ①color:blue;  第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束. 这种方法直接了当,但是能表示的颜色的种类很少. ②color:#000000; 第二种,‘#’号开头,每位数字可为:0.1.2.3.4.5.6.7.8. 9.a.b.c.d.e.f.前1,2位表示红色,3,4位表示绿色,5,6 位表示蓝色.与RGB颜色表示法的思路类似,用红绿蓝三原色组合为 各种颜色,种类繁多. ③color:rgb…
说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.可供选择的换肤 对于只提供几种主题方案,让用户来选择的,一般就简单粗暴的写多套主题 一个全局class控制样式切换,直接更改全局class <body class='dark'></body> 使用js去修改 link 的 href <link id='link_theme' href="skin.css" rel="stylesheet" type=…
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分享我的学习成果. 好了,直入主题,大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,分别是: 1>外部样式表 : 将样式规则直接写在*.css文件中,然后再*.html页面中通过<link>标签引入的方式 2>内部样式表 :(位于 <head&g…
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"…
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span,并设置浮动.具体代码如下所示: 由上图可以看出,在给span添加了float之后,父级元素div的高度就变成了0.我们有以下几种方式来解决这个问题 (1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了…
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动影响的布局来避免上述问题. HTML/CSS中清除浮动的本质是需要清除浮动元素对正常文档流的影响. 浮动造成布局问题示例: HTML代码部分: <div class='container'> <div class='son aqua'>水蓝</div> <div cl…
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: 200px;与text-align: center;即可. #test{ width: 200px; height: 200px; line-height: 200px; background: red; margin: 0 auto; text-align: center; } 效果图: 2.元素…
× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差 [1]float + padding + background-clip 使用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景 <style> body…
浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父…
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动后的副作用 那什么是高度塌陷呢?比如下面截图,box1和box2的外层(这里外层指下图箭头所指的紫色部分)    本来应该像下面截图一样,外层包裹住box1和box2,但因为设置浮动导致父元素高度塌陷,所以出现了上图的情况   3种浮动清除方法 以前我喜欢固定用一种方式来清除浮动,其实方法不止一种,…