css颜色

CSS入门(1)

由 自作多情 提交于 2019-12-10 05:38:00
CSS介绍 css是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。它是一个网页的血肉部分。 CSS的引入方式 内联样式 :将样式声明在元素的style属性中 （使用最少） 内部样式：将样式写在head里面的style标签中 （使用较少） 外部样式:使用link标签，引入单独的样式表文件 （使用最多，降低代码的耦合，提高代码的可复用性） CSS选择器 基础选择器 标签选择器（h1，p等等） p{样式属性:属性值} 类别选择器（class） .类名{样式属性:属性值} ID选择器（ID） #ID名{样式属性:属性值} 通配符选择器 (*) *{样式属性:属性值} 复杂选择器 <div id="baba"> <div class="erzi"> <span id="neirong">123</span> </div> </div> 后代选择器 #baba .erzi span{样式属性:属性值} 子代选择器 #baba>.erzi>span{样式属性:属性值} 群组选择器 #baba,.erzi,span{样式属性:属性值} 选择器的优先级问题 单个选择器时: 行内>ID选择器>class选择器>标签选择器>*通配符 多个选择器叠加时:复杂度越高的选择器

兼容性背景颜色半透明CSS代码（不影响内部子元素）

由 独自空忆成欢 提交于 2019-12-09 23:59:09
兼容所有浏览器的背景颜色半透明CSS代码： background-color: rgba(0, 0, 0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000); 注意： startColorStr 和 endColorStr 的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 2位透明度的换算方法： x=alpha*255 ，将计算的结果 x 转换成十六进制即可。 js换算16进制方法： x.toString(16) 例如：上面的 0.25 透明度，换算为IE的AA透明度： var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40 Demo示例： <style type="text/css"> .menu-nav-bg { background-color: rgba

web前端入门到实战：CSS起源

由 …衆ロ難τιáo~ 提交于 2019-12-09 22:45:46
HTML的诞生 HTML是怎么来的？ 在1982年的时候，万维网的发明者 Tim Berners-Lee 爵士为了让全世界的物理学家能够方便的进行合作与信息共享，造了 HTML(HyperText Markup Language) 超文本置标语言。 在1991年3月， Tim Berners-Lee 把 HTML 介绍给了给他在 CERN(欧洲核子研究中心) 工作的朋友，当时网页浏览器被其世界各地的成员用来浏览 CERN 庞大的电话薄。 然后在8年之后的1990年，博士发明了世界上第一个浏览器 WorldWideWeb ，也因此推动着互联网高速发展。 在 WorldWideWeb 问世之后的1993年 NCSA 推出了 Mosaic 浏览器并且迅速火了起来，成为第一个世界级应用的浏览器，推动着互联网发展。随后跟着的有当时的两大霸主 Netscape de Netscape 浏览器与 MicroSoft 的 Internet Explorer 浏览器，这两个浏览器在当时掀起了一场互联网浏览器大战。这场战争的结果是以 Internet Explorer 全胜告终。但也因此大大的推动了互联网的发展。 CSS的诞生 CSS是怎么来的？ 就在承载 HTML 的浏览器迅猛发展的90年代， CSS (Cascading Style Sheet) 也应运而生。不同的浏览器结合各自 HTML

3实战篇 02：项目脚手架

由 对着背影说爱祢 提交于 2019-12-09 13:51:18
实战篇 02：项目脚手架 本节参考代码： react-boilerplate 经过了刀耕火种的插件化时代，伴随着越来越繁荣的 npm 生态，近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化，这也让开发或选择一个合适的项目脚手架（boilerplate）成为了前端项目的第一个难点。在 React 生态中，虽然已经有了像 create-react-app 这样官方指定的脚手架项目，但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题，不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分 在 JavaScript 框架接管了所有 DOM 相关的操作与更新后，HTML 方面的工作量就大量地减少了，很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致，我们可以在模板中添加 HTML5 新引入的 viewport 属性，这对于需要支持移动端的项目非常重要。 < meta name =

3实战篇 02：项目脚手架

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-09 13:49:18
实战篇 02：项目脚手架 本节参考代码： react-boilerplate 经过了刀耕火种的插件化时代，伴随着越来越繁荣的 npm 生态，近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化，这也让开发或选择一个合适的项目脚手架（boilerplate）成为了前端项目的第一个难点。在 React 生态中，虽然已经有了像 create-react-app 这样官方指定的脚手架项目，但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题，不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分 在 JavaScript 框架接管了所有 DOM 相关的操作与更新后，HTML 方面的工作量就大量地减少了，很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致，我们可以在模板中添加 HTML5 新引入的 viewport 属性，这对于需要支持移动端的项目非常重要。 < meta name =

页面制作

由 梦想的初衷 提交于 2019-12-09 12:24:35
##页面制作过程## 页面制作过程前言： <ul> <li>页面的制作过程</li> <li>如何划分区域</li> <li>划分区域中的CSS知识</li> </ul> ###页面制作过程### 由设计师设计好设计稿，再由我们前端工程师制作页面： <br>1.划分页面区域（最重要，且很复杂） <br>2.填充内容 ###如何划分区域### <ul> <li>用合适的元素来表示不同的区域(HTML)</li> <li>设置区域的位置、尺寸、背景等样式(CSS)</li> </ul> ###划分区域中的CSS知识### 每个元素都会在页面中生成一个矩形区域，CSS称该矩形区域为盒子(box) 盒子相关知识： <ul> <li>盒模型：单个盒子的组成</li> <li>视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）</li> <li>布局：实际应用</li> </ul> ##盒模型## ###盒模型概述### ####盒子的分类#### 不同的元素产生的盒子类型可能不同，一个元素，产生什么样的盒子，取决于它CSS的display属性 <br>display:none=>不生成盒子 <br>display:innline=>行盒 <br>display:block=>块盒 <br>display:其他取值=>其他盒子 ####盒子的组成#### <br>margin:外边距

web兼容性 CSS !important 到 CSS hack

由 ⅰ亾dé卋堺 提交于 2019-12-08 15:38:26
css !important作用是提高指定CSS样式规则的应用优先权。 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;} 浏览器识别 ie7，ie8，firefox，chrome等 高端浏览器下，已经可以识别 !important属性， 但是IE 6.0仍然不能完全识别. important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低! important，最主要是为了IE 6.0浏览器。 案例分析： 最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式： colortest { border:20px solid #60A179 !important; border:20px solid #00F; padding: 30px; width : 300px; } 在Mozilla中浏览时候，能够理解!important的优先级，因此显示

解决移动端1px边框问题的几种方法

由 拜拜、爱过 提交于 2019-12-08 01:46:47
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。 物理像素(physical pixel) 物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（参照下文田字示意图理解）。 设备独立像素(device-independent pixel) 设备独立像素又被称为CSS像素，是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。 设备像素比(device pixel ratio)

【译】统一样式语言

由 淺唱寂寞╮ 提交于 2019-12-08 00:37:19
原文地址： A Unified Styling Language 原文作者：本文已获原作者 Mark Dalgleish 授权 译文出自： 掘金翻译计划 译者： ZhangFe 校对者： JackGit , yifili09 , sunshine940326 , sunui 统一样式语言 在过去几年中，我们见证了 CSS-in-JS 的兴起，尤其是在 React 社区。但它也饱含争议，很多人，尤其是那些已经精通 CSS 的人，对此持怀疑态度。 "为什么有人要在 JS 中写 CSS？ 这简直是一个可怕的想法！ 但愿他们学过 CSS !" 如果这是你听到 CSS-in-JS 时的反应，那么请阅读下去。我们来看看为什么在 JavaScript 中编写样式并不是一个可怕的想法，以及为什么我认为你应该长期关注这个快速发展的领域。 相互误解的社区 React 社区经常被 CSS 社区误解，反之亦然。对我来说这很有趣，因为我同时混迹于这两个社区。 我从九十年代后期开始学习 HTML，并且从基于表格布局的黑暗时代就开始专职于 CSS。受 CSS 禅意花园 启发，我是最早一批将现有代码向 语义化标签 和层叠样式表迁移的开发者。不久后我开始痴迷于 HTML 和 JavaScript 的分离工作，在服务器渲染出来的页面中使用 非侵入式 JavaScript 同客户端交互。围绕这些实践

第3部分 css复合选择器，标签显示模式（display）、行高（line-height）、css背景（背景图片及位置设置）、css三大特性及优先级

由 微笑、不失礼 提交于 2019-12-06 18:53:43
CSS 选择器的下一个重点： 复合选择器：后代选择器；并集选择器。 标签显示模式(display)。 CSS背景位置、背景图片等。 CSS三大特性：优先级。 一、CSS复合选择器 css 的基础选择器不能满足快速开发要求，所以要使用复合选择器。 复合选择器可以更准确更精细的选择目标元素。它由两个或多个基础选择器，用不同的方式组合而成。 1、后代选择器（重点），用空格选择 也叫做包含选择器，可用来选择元素或元素的子孙后代。写法是先把外层标签写在前，内层标签写在后面。例如： 父级 子级{属性1: 属性值1; 属性2: 属性值2;} 示例：.class h3 { color: red; font-size: 16px;} 2、子元素选择器，用大于符号选择（>） 只能选择子标签，不能选择孙子标签。写法是：父级标签写在前面，子级标签写在后面，中间用大于符号（>）连接。 示例语法：.class>h3 {color: red; font-size:16px;} 还可以根据关系继续选择下去：.class>h3>span {color: red; font-size:16px;} 注意：只能用来选择子标签（或者叫亲儿子），不能选择孙子标签 3、 交集选择器，用点选择 由两个选择器构成，找到的标签必须满足标签一的特点，也有标签二的特点。例如： h3.class {color: red;}
订阅 css颜色