css颜色

CSS知识点

纵饮孤独 提交于 2019-11-27 15:23:43
一.三大样式 内联样式:可以将CSS样式编写到元素的style属性当中,将样式直接编写到style属性中,这种样式我们称为内联样式,内联样式只对当前的元素中的内容其中作用,不方便使用。 内部样式:也可以将CSS样式编写到head中的style便签里,将样式表编写在style标签中,然后通过CSS选择器选中指定元素,然后可以同时为这一些元素一起设置样式,这样可以使样式进一步复用,将样式表编写到style标签中,也可以使表现和结构进一步分离,他也是我们推荐的使用方式。 外部样式:还可以将文档编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中,这样外部文件中的css样式将会应用带当前页面中。 将CSS样式统一编写带外部的样式表中,完全使结构和表现分离,可以是样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存,加快用户访问的速度提高用户的体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件。 二.块元素和内联元素 div就是一个块元素, 所谓块元素,就是会独占一行的元素,无论他的内容有多少,他们都会占一整行 p h1 h2 h3 ... div这个标签没有任何语义,就是一个纯粹的的块元素, 并不会为它里边的元素设置任何的默认样式, div元素主要用来对页面进行布局的。

写给同事的前端学习路线

我的梦境 提交于 2019-11-27 10:38:51
前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念: HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层,它的目的是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示。 JS是行为层,它要做的是当用户触发某些行为时,会给内容和样式带来什么样的改变。 1,HTML,CSS部分。 HTML/CSS初学,就照着http://www.w3cschool.cn/的实验做,把http://www.w3cschool.cn/index-6.html 和 http://www.w3cschool.cn/index-7.html 两套做完了就入门了, 一般而言css学个几天就可以了,因为现在很多的高级前端工程师甚至于不用写css,而初级前端工程师又面临就业难的问题,所以我们的学习重点应该放在js以及一些前端框架甚至于源码方面 学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候如果想继续深入学习相关类库和框架,推荐Sass和Compass,推荐两篇阮一峰的博客:http://www.ruanyifeng.com/blog/2012/06/sass.html http://www.ruanyifeng.com/blog/2012/11/compass.html 和这本书:《Sass and Compass

css源码笔记(五)—爱创课堂专业前端培训

元气小坏坏 提交于 2019-11-27 10:09:12
复习: 布局模型三种方式:流动模型、浮动模型、层模型 1. 浮动 float left right none 清除浮动 clear:left || right || both 浮动会使父元素塌陷,造成结构不能按照正常的顺序显示,会影响其他结构: 1.1 给父元素设置高度 1.2 外墙法 1.3 可以在父元素后面同级元素上设置清除浮动 1.4 内墙法:父元素内部的结尾处添加一个空的 div ,设置 clear:both; 1.5 overflow:hidden || auto || scroll; 1.6 利用伪元素 ::after (建议) ele:after{ display:block; height:0; content:””; clear:both; visibility:hidden; zoom:1; } 2. 设置元素不可见 visibility:hidden; 元素消失占位 display:none; 元素消失消失不占位 opcity 设置元素的不透明度,属性值从 0-1 从完全透明到完全不透明 3. 背景相关属性 Background-color 背景颜色 Background-image 背景图片 Background-repeat 设置背景图片的平铺方式 属性值: Repeat Repeat-x Repeat-y No-repeat Round Space

css实现三角形

 ̄綄美尐妖づ 提交于 2019-11-27 08:41:27
方法一:border 先看看四边 border 颜色不同且不透明时的效果: .rect1 { width: 0px; height: 0px; margin: auto; border: 20px solid red; border-left-color: blue; border-right-color: yellow; border-top-color: purple; } .rect2 { width: 0px; height: 0px; margin: auto; border-top: 20px solid red; border-left: 10px solid blue; border-right: 15px solid yellow; border-bottom: 25px solid purple; } .rect3 { width: 10px; height: 0px; margin: auto; border: 20px solid red; border-left-color: blue; border-right-color: yellow; border-top-color: purple; } .rect4 { width: 10px; height: 10px; margin: auto; border: 20px solid red; border

CSS选择器

随声附和 提交于 2019-11-27 08:13:56
开发者工具(Chrome) 此工具是我们的必备工具,以后代码出了问题,我们首先第一反应就是: “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。 菜单: 右击网页空白出---查看 小技巧: 1. ctrl+滚轮 可以 放大开发者工具代码大小。 2. 左边是HTML元素结构 右边是CSS样式。 3. 右边CSS样式可以改动数值和颜色查看更改后效果。 选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称 为选择器(选择符)。 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本 语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。 来源: https://www.cnblogs.com/Chamberlain/p/11353790.html

CSS currentColor 变量

老子叫甜甜 提交于 2019-11-27 08:11:51
㈠currentColor定义及理解 来自MDN的解释: currentColor 代表了当前元素被应用上的 color 颜色值。 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上。 你这可以这么理解, CSS里你可以在任何需要写颜色的地方使用 currentColor 这个变量,这个变量的值是当前元素的 color 值。如果当前元素没有在CSS里显示地指定一个 color 值,那它的颜色值就遵从CSS规则,从父级元素继承而来。父元素未设定color值,会寻找祖先元素直到有设定color的元素为止,如果没有,以浏览器默认颜色为准。 ㈡介绍currentColor相关知识 ⑴来源于SVG,CSS3的变量,可以解决颜色属性无法继承的问题。 ⑵不仅可以设置border,还可以设置outline-color,background,box-shadow、text-shadow等 ⑶样式便于维护,但是需注意那些地方需要用到这个变量,否则可能导致一变全变。 ⑷因为是CSS3提出的,所以IE9以下不支持。 ㈢用法 ⑴当前元素有color设定 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 div{ 7 8 font-size:16px; 9 10 color

CSS Modules入门教程

雨燕双飞 提交于 2019-11-27 07:10:22
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突 过程是这样的:你现在有两个模块,分别为A、B,你可能会单独针对这两个模块编写自己的样式,例如a.css、b.css,看一下代码 // A.js import './a.css' const html = '<h1 class="text">module A</h1>' // B.js import './b.css' const html = '<h1 class="text">module B</h1>' 下面是样式: /* a.css */ .text { color: red; } /* b.css */ .text { color: blue; } 导入到入口APP中 // App.js import A from './A.js' import B from './B.js' element.innerTHML = 'xxx' 由于样式是统一加载到入口中,因此实际上的样式合在一起(这里暂定为mix.css)显示顺序为: /* mix.css */ /* a.css */ .text { color: red; } /* b.css */ .text { color: blue; }

css设置滚动条样式

断了今生、忘了曾经 提交于 2019-11-27 06:30:33
近期在做一个项目,由于主题风格是黑色的,而浏览器默认的滚动条的风格放到页面上颜色太突兀,就想着该给它修改一下样式,以下是我整理的通过css设置滚动条样式。 查了很多资料,由于各个浏览器都有各自不同的滚动条设置方法,有些甚至不支持修改样式,这里就三大浏览器Chrome、IE、firefox说一下他们的样式设置。 1、webkit下面的css设置滚动条 主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分( 可以设置宽度 ) ::-webkit-scrollbar-button 滚动条两端的按钮(没有该属性默认无按钮 ) ::-webkit-scrollbar-track 外层 轨道 滚动槽 ::-webkit-scrollbar-track-piece 底层轨道 滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式 为了有助于理解滚动条样式的控制,你可以查看如下的图片: 上面是滚动条的主要几个设置属性,还有更详尽的CSS属性 :horizontal 水平方向的滚动条 :vertical 垂直 方向的滚动条 :decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置

CSS中关于滚动条样式设置的代码实例

家住魔仙堡 提交于 2019-11-27 06:25:41
因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋) 但是在冒险岛的官网上呈现的样式却是: 明显感觉到视觉上的不同,那么现在我们就来设置滚动条的样式: 在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器······ 下面我们来看一下webkit浏览器是如何强大的吧!首先来了解它的属性: 滚动条的设置 1 . : :-webkit-scrollbar 滚动条整体部分,可以设置宽度等 2 . : :-webkit-scrollbar-button 滚动条两端的按钮 3 . : :-webkit-scrollbar-track 外层轨道 4 . : :-webkit-scrollbar-track-piece 内层滚动槽 5 . : :-webkit-scrollbar-thumb 滚动的滑块 6 . : :-webkit-scrollbar-corner 边角 7 . : :-webkit-resizer 定义右下角拖动块的样式 ::-webkit-scrollbar :滚动条整体部分

css实现图片闪光效果

不问归期 提交于 2019-11-27 05:06:02
1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用 css 写的,真是太帅了!!! 2 .原理:在需要闪光的图片前添加 before 属性;内容为空; 宽为200px,高为100%,left:-150px,overflow:hiddden; background属性设置为渐变;颜色看自己需要;transform-skewX(-25deg) 然后为before的content设置过渡动画:{left:150%, transiton:150px 1s ease 0s } 就可以了; 3:参考代码如下: img{width:800px;height:450px;margin:0 auto;} .img { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .img:before{ content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden; background: -moz-linear-gradient(left, rgba(255,255,255,0)0,