css颜色 | 易学教程

CSS（03）背景

阅读更多关于 CSS（03）背景

CSS 背景属性用于定义HTML元素的背景。所有背景属性都不能继承。 background ：简写属性，作用是将背景属性设置在一个声明中。 background-color ：设置元素的背景颜色。 background-image ：把图像设置为背景。 background-repeat ：设置背景图像是否及如何重复。 background-attachment ：背景图像是否固定或者随着页面的其余部分滚动。 background-position ：设置背景图像的起始位置。一、背景颜色 background-color 属性定义了元素的背景颜色. CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" 页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} 尝试一下 » 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： p {background-color: gray; padding: 20px;} 如需查看本例的效果，可以亲自试一试！可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 background-color 默认值是 transparent

a与a:link、a:visited、a:hover、a:active

阅读更多关于 a与a:link、a:visited、a:hover、a:active

原文地址http://www.cnblogs.com/exmyth/p/3226654.html a与a:link、a:visited、a:hover、a:active 起因： a与a:link的CSS代码处，忽觉茫茫然不知所以然：这a的CSS和a:link什么关系？貌似有些冲突啊？还有这a:link、 a:visited、a:hover、a:active伪类之间有没有相互制约和继承关系？过程：使用软件：Adobe Dreamweaver CS3 ，Internet Explorer8.0 须知： ① 在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的 ② 在 CSS 定义中： 1. a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！ 2. a:active 必须位于 a:hover 之后，这样才能生效！于是得四者顺序： a:link----->a:visited------>a:hover-------->a:active。可以这样记： LoVe HAte（爱恨） [注意大写字母] 结果：在CSS中，一、若存在a{……}的定义 ①如果a:link{}也存在，那么不管a{}放到哪里，a{}和a:link{}冲突的属性都会采用a:link{}的

CSS选择器、盒子模型、浮动与定位等详解

阅读更多关于 CSS选择器、盒子模型、浮动与定位等详解

文章目录一、CSS 1、学习目标 1.1、什么是CSS 1.2、CSS样式的两种写的方法 1.3、CSS的3种导入方式 2、选择器（重要） 2.1、基本选择器 2.2、层次选择器 2.3、结构伪类选择器 2.4、属性选择器 3、美化网页元素 3.1、为什么美化网页 3.2、字体样式 3.3、文本样式 3.4、阴影 3.5、超链接伪类 3.7、背景 4、盒子模型 4.1、什么是盒子模型 4.2、边框 4.3、内外边距 4.4、圆角边框 4.5、盒子阴影 5、浮动 5.2、display 5.3、float 5.4、父级边框塌陷问题 6、定位 6.1、相对定位 6.2、绝对定位 6.3、固定定位 6.4、z-index 一、CSS 1、学习目标 CSS的作用及简单使用（入门） CSS选择器（重难点）美化网页盒子模型浮动与定位网页动画 1.1、什么是CSS CSS：层叠级联样式表（Cascading Style Sheet），作用是为了美化网页，给网页增添样式，包括字体、颜色、位置、背景图、定位与浮动等 CSS发展史： CSS1.0 CSS2.0：DIV（块） + CSS，产生了HTML 与 CSS 结构分离的思想，让网页变得简单 CSS2.1：增添浮动，定位 CSS3.0：增添圆角，阴影，动画…. 浏览器兼容性更好 1.2、CSS样式的两种写的方法

CSS选择器的新用法

阅读更多关于 CSS选择器的新用法

现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法变量一般地，我们在进行web开发时，会有一套变量定义规范，以sass为例，如下所示 // 颜色定义规范 $color-background : #222 $color-background-d : rgba(0, 0, 0, 0.3) $color-highlight-background : #333 //字体定义规范 $font-size-small : 12px $font-size-medium : 14px $font-size-large : 18px 而CSS变量的语法如下【声明变量】变量必须以 -- 开头。例如–example-variable: 20px，意思是将20px赋值给–example-varibale变量可以将声明变量的语句置于任何元素内，如果要设置全局变量，则可以设置为:root、body或html :root{--bgColor:#000;} 变量声明就像普通的样式声明语句一样，也可以使用内联样式 <body style="--bgColor:#000"> 【使用变量】

css实现内凹圆角样式

阅读更多关于 css实现内凹圆角样式

最新开发遇到一个弹框，弹框中间有两个内凹的半圆，而且还是透明的，不能遮挡到底层的内容。基于这个需求，找到了一个比较好的实现方法。先上一下demo效果图：实现这个效果主要是用了background-image 结合径向渐变radial-gradient。示例： background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%); 而对于径向渐变，主要是3个参数控制。一个是原点和大小。大小类似border-radius的感觉，原点使用at表示可以指定点的坐标，或使用left、right、top、bottom来表示。其次是两个颜色和透明度、大小等。这里50px或百分比，亲测第一个只有50才是半圆角，而第二个50%貌似影响不大。下面是代码： <style> p{ margin:0; padding:0; } .top-box{ width:100%; height:200px; background: red; position: relative; margin-bottom:20px; border-radius: 4px 4px 0 0; } .bottom-box{ width:100%; height:100px; background: #fff; position:

css3新特性及css的引入方式

阅读更多关于 css3新特性及css的引入方式

CSS 引入的方式有哪些? link 和@import 的区别是? 答：内联内嵌外链导入区别：同时加载前者无兼容性，后者 CSS2.1 以下浏览器不支持 Link 支持使用 javascript 改变样式，后者不可 CSS3 新特性有哪些？答：1. 颜色：新增 RGBA，HSLA 模式 2. 文字阴影（text-shadow、） 3.边框：圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局 .渐变：linear-gradient、radial-gradient 7. 过渡：transition，可实现动画 8. 自定义动画 9. 在 CSS3 中唯一引入的伪元素是：：selection. 10. 媒体查询，多栏布局 11. border-image 12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y) 13. 3D 转换来源： https://www.cnblogs.com/pangwl/p/8024688.html

CSS中的背景属性background简述

阅读更多关于 CSS中的背景属性background简述

我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。 background-color background-color属性设置元素的背景颜色。它的值可以是任意合法的颜色值或者是transparent关键字。 .left { background-color: #ffdb3a; } .middle { background-color: #67b3dd; } .right { background-color: transparent; } 背景颜色绘制在由[background-clip]（＃backgroundclip）属性指定的盒模型的区域内。如果还设置了任何背景图像，则在它们后面绘制颜色层。与可以有多个的图像层不同，对于一个元素，我们只能有一个颜色层。 background-image background-image属性定义元素的一个或多个背景图像。它的值通常是用url（）符号定义的图像的url。也可以使用none作为它的值，但这样会生成一个空的背景层 .left { background-image: url('ire.png'); } .right { background-image: none; }

CSS-优先级

阅读更多关于 CSS-优先级

优先级：由高到低依次是: 内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置优先级：由高到低依次是1,2,3,4 1.内联样式（在 HTML 元素内部） <html> <body> <div> <p style="color: red;">内联样式（在 HTML 元素内部）</p> </div> </body> </html> 2.内部样式表（位于head 标签内部） <html> <head> <style> #idp { color: red; } </style> </head> <body> <div> <p id="idp">内联样式（在 HTML 元素内部）</p> </div> </body> </html> 3.外部样式表（引入css文件） <html> <head> <link rel="stylesheet" type="text/css" href="test1.css" /> </head> <body> <div> <p id="idp">外部样式表</p> </div> </body> </html> // test1.css #idp { color: red; } 说明：引入"/src/test1.css" 会将test1.css文件插入到body内, body内css优先级低于head中的css 4.浏览器缺省设置当1,2

css的层叠性+继承性+优先级+权重

阅读更多关于 css的层叠性+继承性+优先级+权重

一、层叠性　　1、含义　　　　多种css样式叠加，浏览器处理冲突的能力。　　2、原则　　　　1》一般情况下，若出现冲突，会按照css的书写顺序，以最后的样式为准　　　　2》样式不冲突，就不会层叠二、css的继承性　　1、在浏览器的样式栏显示的是inherited from xxx 　　2、可以继承的属性：1》文本颜色(color:) 2》以font-开头的属性（font-family font-size font-weight）3》以line-开头的(line-height ) 4》以text-开头的属性(text-decorarion text-shadow) 三、css优先级　　1、优先级最高　　　　div{ 　　　　color:red !important; 　　　　} 　　2、行内样式>id选择器>class选择器>标签选择器四、css权重　　继承最低　　选中中id个数、class个数、标签个数、位置来源： https://www.cnblogs.com/dhrwawa/p/10494477.html

web前端【第三篇】CSS选择器

阅读更多关于 web前端【第三篇】CSS选择器

一、css概述 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。例如二、css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 2.内嵌式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： 3.链接式建一个index.css的文件，存放样式在主页面中吧index.css引入 4.导入式将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：要注意导入的路径。。。。注意啦：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。所以还是推荐用链接式。。。。。。。。。。。三、注意嵌套规则

订阅 css颜色