css颜色

常用，记录一下。 css修改滚动条样式: /*滚动条的宽度*/ : : - webkit - scrollbar { width : 6 px ; } //滚动条轨道的颜色 : : - webkit - scrollbar - track { /*background black*/ border - radius : 5 px ; } //滚动条的颜色 : : - webkit - scrollbar - thumb { background : # B5B5B5 ; border - radius : 5 px ; } //鼠标经过滚动条时的颜色 : : - webkit - scrollbar - thumb : hover { background : #dad6bf ; } 简单的隔行变色表格样式 < div class = "table-box" > < table border = "0" > < tr class = "odd-tr" > < th > 地区 < / th > < th > 确诊 < / th > < th > 治愈 < / th > < th > 死亡 < / th > < / tr > < tr : class = "{'even-tr':index%2==0,'odd-tr':index%2==1}" v - for = "(item

CSS （二） 1、 图片效果 1） 图片边框 Border Border-style Border-color Border-width Dotted 点划线 Dashed 虚线 Solid 实线 颜色 宽度 border：solid 1px #f00; 2） 图文混排 例：1.html 2.html 2、设置网页背景 1）背景颜色 Background-color 例：3.html,4.html 3） 背景图片 （1）Background-image:url(xx.jpg) 例：5.html （2）背景图的重复 例：6.html 垂直方向重复 水平方向重复 不重复 Background-repeat:repeat-y Background-repeat:repeat-x Background-repeat:no-repeat （3）背景图片位置 例：7.html Background-position:30% 70% Background-position:300px 25px （4）固定背景图片 例：8.html Background-attachment:fixed; （5）多个背景图片 例：9.html （6）样式综合设置 Background-color:blue; Background-image:url(xx.jpg); Background-repeat:no

css基本概念 css是什么？不需要了解太多文字类介绍，记住css是层叠样式表，HTML是页面结构，css负责页面样式，javascrt负责静态页面的交互。CSS 能够对网页中元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力。详情参考 css百度百科 了解其发展历史，语言特点与语言基础等,也是有好处的。 标签的属性决定了静态页面的展示效果，在早期，标签属性过多，对于浏览器的识别过于麻烦，因为一修改标签，页面的版本什么都需要变动，可谓牵一发而动全身！除此之外，对于开发人员来说，代码过于臃肿冗长，为此W3CS，也就是万维网联盟制定了一个标准，把css与HTML相分离，选择器通过样式属性与标签相关联，这样就提高了html代码与css样式的可用性。 css核心语法 1.css的三种引入方式属于css的核心语法，分为内部样式、外部样式、内联样式（也叫行内样式）,最终展示页面效果都是一样的 2.css组成为:选择器{属性：属性值}，同时{属性：属性值}也称之为选择器声明部分，css的注释与html的注释<!--注释部分-->不同，它的注释表示为/*注释部分*/ 3.css中颜色为RGB红、绿、蓝三种色彩模式，颜色由浅入深，对应数字0-255，这也是系统默认颜色 3.1颜色表示color（255,0,0）红色，如果用百分比表示为（100%,0,0） 3

1. rem基础 rem单位 rem (root em)是一个 相对单位 ，类似于em，em是父元素字体大小，rem的基准是相对于html元素的 字体大小 。 比如，根元素（html）设置 font-size=12px ; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size : 12px ; } /* 此时 div 的字体大小就是 24px */ div { font-size : 2rem ; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 2. 媒体查询 2.1 什么是媒体查询 媒体查询（Media Query）是CSS3新增的语法。 使用 @media查询， 可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询 2.2 媒体查询语法规范 用 @media开头 注意@符号 mediatype 媒体类型 关键字 and not only media feature 媒体特性必须有小括号包含 /* 语法格式 */ @media mediatype and

CSS简介：Cascading Style Sheets(层叠样式表)的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。 CSS的作用： 是定义网页外观（例如，字体、背景、文本、位置、布局、边缘、列表及其他等),它也可以和JavaScript等浏览器端脚本语言合作做出许多动态效果。 所谓的样式表，是样式化HTML的一种方法，HTML是文档的内容，而样式表是文档的表现，或者说是外观。 所谓的层叠，就是将一组样式在一起层叠使用，控制某一个或多个HTML元素，按样式表中的属性一次显示。 一个样式表可以用于多个页面，甚至整个站点，因此CSS具有良好的易用性和扩展性。从总体来说，使用CSS不仅能够弥补HTML对网页格式化功能的不足，例如段落间距、行距、字体变化和大小等，还可以使用CSS动态更新页面格式，进行排版定位等。CSS特点如下。 （1）控制页面中的每个元素（精确定位）。 （2）对HTML语言处理样式的最好补充。 （3）把内容和格式相分离，减少工作量。 CSS的规则组成： CSS和HTML一样都是由W3C制定的标准。 CSS书写格式和注释写法： p{ font-size:30px; /* color:yellow; */ border:1px solid blue; } 注：p 是选择器 {}的包含的内容是声明 font-size: 30px; 属性：属性值；

关于组合选择器可参考: http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS三种常用选择器 CSS三种扩展选择器 CSS的常见操作 CSS概述 CSS （Cascading Style Sheet）是层叠样式表.作用来定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 CSS的优点 1：CSS可以更加精细的控制网页的内容形式。比如说前面的font标签中的size属性，可以用于控制文字的大小，但是，它控制的字体只有7级。 要是出现其他级别的文字，它就实现不了，而css可以办到，它可以任意设置字体的大小。 2：CSS样式是丰富多彩的。 3：CSS的样式定义是灵活多样的。 CSS和HTML结合的方式 sytle属性方式(行内样式) style标签方式(内嵌样式) 导入方式 链接方式 A：style属性方式： 利用标签中style属性来改变每个标签的显示样式。 例： <p style="background-color:#FF0000; color:#FFFFFF"> 　　 p标签段落内容。 </p> 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。 B：style标签方式：（内嵌方式）

HTML：3个大内容 1.路径的三种方式 2.html标签 普通标签 表单标签： 列表标签： 表格标签： CSS3：普通标签/表单标签/表单标签属性/新媒体标签 3.html标签详细内容 标准流布局 CSS特殊样式 HTML自带属性 代码 CSS：10个大容 1. 标准流 2. 层叠 继承 优先 3. 文字 4. 背景 5. 盒子模型 6. 选择器 7. 浮动 8. 定位 9. 过度 10. 小手 1.标准流 块级元素 行内元素 行内块元素 标准流转化 标准流居中：4行 2.层叠 继承 优先 3.文字 文字颜色 文字样式 文本样式 4.背景 背景颜色 背景图片 5.盒子模型 1.内容 2.内边距 3.边框 4.外边距 5.隐藏盒子 6.嵌套盒子溢出情况 7.CSS3: 阴影/圆角/画三角形/溢出文字省略号显示 6.选择器 1.基础选择器 2.复合选择器 3.伪类选择器 4.css3选择器 7.浮动 1.浮动 2.清除浮动 8.定位 1.定位定义 2.定位方式 3.最终位置 4.定位导致覆盖 9.过度 10.小手 来源： CSDN 作者： lzyPM 链接： https://blog.csdn.net/lzyPM/article/details/104267586

chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式 一、使用调试工具 1、ctrl+滚轮可以放大开发者工具代码大小 2、左边是HTML元素结构，右边是CSS样式 3、右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色 4、ctrl+0复原浏览器大小 5、如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。 6、如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。 来源： https://www.cnblogs.com/lisalisalisa/p/12294796.html

1 为什么要存在这三种机制（继承、层叠、特指） 在一个较大的样式表中，可能会有很多条规则都选择同一个元素的统一个属性，但是每个属性只能按照一种规则来进行显示，当多种规则应用于同一属性时，该属性到底是选择何种规则呢？为了解决这种冲突，需要确定一个规则的“优先级”。所以，CSS提供了这三种机制 2 继承 后代可以继承祖先的样式，例如，body是所有元素的祖先，所有标签都是他的后代 body {font-family:helvetica,arial,sans-serif;} 那么，文档中的所有元素，无论它在何种层次结构中，都继承这些样式 CSS中有很多属性是可以继承的，其中相当一部分跟文本相关，比如颜色、字体、字号；然而，也有很多CSS属性不能继承，因为继承这些属性没有意义，这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距等 3 层叠 层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值 3.1 样式来源 a、浏览器有一个默认的样式表 b、用户可以提供样式表 c、作者样式表（网页设计师写的样式表） 浏览器层叠各个来源样式的顺序： 浏览器默认样式表 用户样式表 作者链接样式表 作者嵌入样式表 作者行内样式表 浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定

一.首先从CSS级别来进行优先级划分： CSS控制页面样式的四种方法： 1.行内样式 通过style特性 <p style=”color:#F00; background:#CCC; font-size:12px;”></p> 2.内嵌方式 将CSS代码写在head和/head之间,并用style进行声明 <style type=”text/css”> <!– #div1{width:64px; height:64px; float:left;} #div1 img{width:64px; height:64px;} –> </style> 3.链接方式 <link href=”style.css” type=”text/css” rel=”stylesheet” /> 4.导入方式 导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。(这个目前没遇到过) 四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式 目前有个疑问：如果内嵌定义了p,链接定义了a,那么内嵌应该不会覆盖链接吧？ 二.从CSS内部进行优先级划分 CSS通过一个叫做层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数，其次是用户定义的样式