css颜色

css 层叠式样式表（2）

由 荒凉一梦 提交于 2020-01-19 03:38:24
一，样式表分类 （1）内联样式。 --优先级最高，代码重复使用最差。 （当特殊的样式需要应用到单独某个元素时，可以使用。 直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。） （2）内嵌样式表。 --优先级别第二，不常用，代码重用性一般。 （当单个文件需要特别样式时可以使用内嵌样式表。在 head 部分通过 <style> 标签定义内部样式表。） （3）外部样式表。 -- 优先级最低，最常用，代码重用性最高。 （当样式需要被应用到很多页面的时候，可以使用。使用外部样式表可以关联多个元素或者文件。） 1、先创建一个样式表 2、写入样式表内容，调整样式表位置 二。选择器 每一条css样式定义由两部分组成，形式如下： 选择器 { 属性 } 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 选择器是选择器，外部样式表只是代码位置 （1）类别选择器（ class选择器） 前面以"." 来标志，如： .d1 { color：red； } 在HTML页中： <div class="d1";>文字</div> 文字颜色为红色 <p class="d1";>文字</p> 文字颜色为红色 定义了一个class类，将样式应用到了元素中。 （2）id选择器 优先级最高 前面以"#"来标志，如： #d2 { color

CSS 三大特性

由 回眸只為那壹抹淺笑 提交于 2020-01-18 22:28:29
CSS 三大特性 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 1、CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 就近原则 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 2、CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 简单的理解就是： 子承父业。 CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。 注意： 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） 3、CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。 在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

高手传授十八般CSS技巧

由 无人久伴 提交于 2020-01-18 12:46:35
一、使用css缩写 　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 　　 二、明确定义单位，除非值为0 　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 　　 三、区分大小写 　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 　　 四、取消class和id前的元素限定 　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如： 　　div#content { /* declarations */ } 　　fieldset.details { /* declarations */ } 　　可以写成 　　#content { /*

CSS颜色及文本字体

由 筅森魡賤 提交于 2020-01-17 22:26:16
CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示，比如：red 红色，yellow黄色，pick粉色 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00 RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0); RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5); 16进制： 0-9 a-f rgb的值：0-255 CSS文本设置 常用的应用文本的css样式： color 设置文字的颜色 font-size 设置文字的大小 font-family 设置文字的字体 font-style 设置字体是否倾斜 line-height 设置文字的行高 text-decoration 设置文字的下划线 text-indent 设置文字首行缩进 text-align 设置文字水平对齐方式 color:red; font-size:12px; font-family:'微软雅黑'; font-style:'normal'; 设置不倾斜 font-style:'italic';设置文字倾斜 font-weight:bold; 设置加粗

web前端入门到实战：Css背景定位

由 …衆ロ難τιáo~ 提交于 2020-01-17 21:43:45
同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。 1.在CSS中有一个叫做background-position：属性，就是专门用来控制背景图片的位置 2.格式：background-position:值1 值2； 值1的取值范围：left center right 值1代表背景图片的水平位置 值2的取值范围：top center bottom 值2代表背景图片的垂直位置 值1和值2也可以设置像素值，来分别表示距离最左边和最上边的像素值(注意可以接受负值，也就是左上角就是坐标的原点，图片的左上角就是坐标值的大小)，记住一定要带单位。默认值为：left top 例子： <style> .box{ height: 1000px; width: 1000px; background-image: url("image/snow.jpg"); background-repeat: no-repeat; background-position: center center; } </style> <div class="box"> </div> 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 3

web前端入门到实战：CSS的文本格式化样式总汇

由 两盒软妹~` 提交于 2020-01-17 21:39:26
长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元素字体大小变化而变化*/ width: 2em; /*百分比随着父元素变化而变化*/ height: 50%; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html> 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px

less的基本用法

由 落花浮王杯 提交于 2020-01-17 05:50:01
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。 使用方式 两种使用方式：第一种全局安装less，利用命令编译less;第二种直接引入less.js. npm安装 npm install -g less npm install -g less-plugin-clean-css 命令行 lessc styles.less styles.css // 编译成css lessc --clean-css styles.less styles.min.css // 编译压缩css 引入less.js 这里注意要在less.js引入前引入.less样式文件 <link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script> 使用 变量 1. 值变量 less 的变量声明是以@开头 /* less */ @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 2. 选择器变量 选择器也可使用变量,变量需要用@{}包括

web前端入门到实战：十个最流行的前端 CSS 库

由 空扰寡人 提交于 2020-01-17 00:38:47
前端 CSS 库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。 为什么要使用 CSS 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的资源，我们不该把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳？答案当然是肯定的。但除非您是位身经百战的 CSS 视觉创意人士，否则把这项工作交给专家才是最好的选择。 与此同时，框架则能够更轻松地快速构建起直观的可用应用程序。凭借着极高的人气，目前市场上存在大量前端框架可供我们选择。 Ant Design 项目概括 “Ant Design 能够帮助每一位项目成员降低设计与原型设计工作的难度，同时提高后台应用程序与产品的开发效率。” ——摘自 Ant Design 官网 Ant Design 是一种面向后台应用的设计语言，由 Ant UED 团队开发而成。他们希望借此统一内部后台项目的用户界面规范、减少设计差异以及不必要的实现成本，从而解放出更多可用于设计以及前端开发的宝贵资源。 特性 一种面向 Web 应用程序的企业级 UI 设计语言。 一套开箱即用的高品质 React 组件。 由 TypeScript 编写而成并拥有完整的定义类型。 整套开发与设计资源及工具。

哪些你知道或不知道的css，在这里或许都齐全

由 ♀尐吖头ヾ 提交于 2020-01-16 20:50:43
暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳： 有问题欢迎讨论 sunseekers 本文所有链接均来自《CSS揭秘》，内容基本都来自原书 css编码技巧 尽量减少代码重复的重复，尽量减少改动时要编辑的地方，易维护，性能高； 使用css变量，currentColor,inherit...目前css变量很少，兼容性有待改善 响应式网页设计，每个媒体查询都会增加成本；避免媒体查询 使用百分比长度来取代固定长度,或者使用与视口相关的单位（vw,vh,vmin,vmax)，她们的值解析为视口宽度或高度的百分比 当你需要在较大分辨率下得到固定宽度， 使用max-width代替width

深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

由 倖福魔咒の 提交于 2020-01-16 13:23:53
标题中的 Cascading 亦可以理解为级联。 进入正文，这是一个很有意思的现象。可以直接跳到 总结一下 部分，看完再回过头来阅读本文。 引子 假设我们有如下结构： <p class="txt" style="color:red">123456789</p> 上面的 p 标签只有一个内联 CSS，很明显，在没有其他样式的干预下，文本 .txt 的颜色肯定就是红色的。 如果此时，我们希望改变 .txt p 标签元素的内容文字的颜色，但是不能去修改内联 CSS，只能通过样式文件去实现，像是这样： .txt { color: green; } 嗯。稍微对 CSS 有点了解的同学都会知道，上面的 CSS 文件设置的样式不会生效，因为内联样式比上述 CSS 中的样式优先级要更高。 上述这种说法不是很严谨，下文会细说。 OK，有同学就会说了，这简单，在 CSS 样式文件中添加 !important 后缀即可 。像是这样： .txt { color: green!important; } 如此操作之后，文本的颜色确实变成了绿色，因为在 CSS 文件中带 !important 后缀的规则优先级大于内联样式中同个但不带 !important 的样式。 内联样式的 !important 与样式表中的 !important 问题来了。 如果在内联样式中，我们也给加上 !important 会怎么样呢？
订阅 css颜色