css颜色 | 易学教程

web学习笔记——CSS整理（一）

阅读更多关于 web学习笔记——CSS整理（一）

　　今天开始学习CSS，一边看书，一边对着博客建立自己的学习笔记。　　CSS的概念，应该稍微记一下，是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即是“样式表”。好的，概念的东西就到这里为止，接下来正式开始学习基本语法。　　CSS的基本语法：选择符 { 样式属性：取值; 样式属性：取值;}（记得要有分号）　　选择符被分为“类选择符”，“ID选择符”，“包含选择符”三种。　　话说我还不知道怎样正确去定义选择符，不过先照着书看吧。　　1，类选择符的语法是：标记名.类名{ 样式属性：取值；样式属性：取值;} 　　　　书上说，其中的类名是类选择符，这是可以自己定义的名称。在实际应用中，还可以省去HTML的标记名。　　　　例如：p.red {color:red}可以写成：.red {color:red} 　　　　三是与直接定义HTML中的标记样式不同的是：这段代码仅仅是定义了样式，并没有应用样式。如果要应用样式中的red类，还需要在正文中添加如下代码：　　　　<p class=red> 　　2，ID选择符　　　　先学习一下什么是ID，我也不知道，不过书上写着：在HTML中，需要唯一标识一个元素时，就会赋予它一个ID标识，以便在对整个文档进行处理时能够很快地找到这个元素。而ID选择符则用来对这个单一元素定义单独的样式

CSS技巧：超轻量实现边缘立体感

阅读更多关于 CSS技巧：超轻量实现边缘立体感

昨天朋友推荐了一个抽奖网站万物网，上去后，老毛病发作，开着FireBug分析了一遍，发现人家的Head Div做的还是很有技术含量，特此分享一下。首先放张图仔细看看的话，会发现Head Div的下边缘比其他的地方要深，还有点渐变的效果。一提到渐变，包括我在内的大多数人一定会想到background-repeat:repeat-x;做个竖直的长条图片，设置上这个CSS属性，就OK了。没错，这样的确能实现，而且下载量也很小。不过我想说的是，其实还有更小的办法。好吧，为了证明更小，那要先看看这段CSS怎么写的： background : url ("../ imgs / public / head _ bg . png ") repeat-x scroll center bottom #1E9CCE ; 好的，他也用到repeat-x了，不过再来看看head_bg.png的图片，由于太小了我就不放上来了，是一个1x7的图片。大家看到这个大小是不是有点吃惊，这样的话repeat-x是无法填充整个Head区域的，那么是什么填充的呢？关键就在后面的部分。 center bottom把这个图片的重复限定到了底部，形成底部的渐变条；#1E9CCE就是大面积的蓝色，刚好和底部边条衔接，于是就形成上图的效果。把那个背景颜色去了就一目了然了当然做纯渐变是不能用这种方法

CSS技巧：继承父元素颜色实现泡泡下方的箭头

阅读更多关于 CSS技巧：继承父元素颜色实现泡泡下方的箭头

原文： http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/ 由于这是一个改良的问题，所以原文前面哪些洛里啰嗦的话就不讲了，大概说说要做什么。要实现的是下面的那个三角。通常我们会用一个width 和 height 都为0的div，然后通过设置各个边的border来实现。但是这样会有复用问题，如果我们有多重颜色的气泡，那就要写多个颜色了，维护起来十分麻烦。原文作者利用的pseudo元素，实现了这种继承，通过设置content:""来把pseudo元素设置为0宽高，再设置border。下面上代码。 < div class ="speech-bubble" style ="border-color: pink; background: pink;" > I like bananas, because they have no bones. </ div > .speech-bubble:after { content : "" ; position : absolute ; top : 100% ; left : 20px ; border-top : 20px solid black ; border-top-color : inherit ; border-left : 20px solid

CSS 学习手册--Super精心整理

阅读更多关于 CSS 学习手册--Super精心整理

目录 CSS 简介 1.CSS 简介 CSS 概述层叠次序 2.CSS 基础语法 CSS 语法值的不同写法和单位记得写引号多重声明：空格和大小写 3.CSS 高级语法选择器的分组继承及其问题友善地对待Netscape 4 继承是一个诅咒吗？ 4.CSS 派生选择器派生选择器 5.CSS id 选择器 id 选择器 id 选择器和派生选择器单独的选择器 6.CSS 类选择器 7.CSS 属性选择器对带有指定属性的 HTML 元素设置样式。 8.CSS 创建如何插入样式表多重样式 CSS样式 9.CSS 背景 10.CSS 文本缩进文本水平对齐字间隔字母间隔字符转换文本装饰处理空白符文本方向 11.CSS 字体 CSS 字体系列指定字体系列字体风格字体变形字体加粗字体大小 CSS 字体属性 12.CSS 链接设置链接的样式常见的链接样式 13.CSS 列表 14.CSS 表格 15.CSS 轮廓轮廓（Outline）实例： CSS 边框属性 CSS 框模型 16.CSS 框模型概述浏览器兼容性 17.CSS 内边距 CSS padding 属性单边内边距属性内边距的百分比数值 CSS 内边距属性 18.CSS 边框 CSS 边框边框与背景边框的样式边框的宽度边框的颜色 19.CSS 外边距 CSS margin

CSS清除浮动清除float浮动

阅读更多关于 CSS清除浮动清除float浮动

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。 1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float 属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 <!DOCTYPE html> <html> <head> <title>CSS清除浮动清除float浮动</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa { background: #ddd; border: 5px solid green; margin:0 auto; width:400px; /*height: 80px;*/ /*方法一：对父级设置适合CSS高度*

CSS清除浮动_清除float浮动

阅读更多关于 CSS清除浮动_清除float浮动

CSS清除浮动_清除float浮动 CSS清除浮动方法集合一、浮动产生原因 - TOP 一般浮动是什么情况呢？一般是一个盒子里使用了 CSS float 浮动属性，导致父级对象盒子不能被撑开，这样 CSS float浮动就产生了。浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了 float 浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。简单地说，浮动是因为使用了 float:left 或 float:right 或两者都是有了而产生的浮动。二、浮动产生负作用 - TOP 1、背景不能显示由于浮动产生，如果对父级设置了（ CSS background背景） CSS背景颜色或 CSS背景图片，而父级不能被撑开，所以导致 CSS背景不能显示。 2、边框不能撑开如上图中，如果父级设置了 CSS边框属性（ css border ），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、 css margin 属性的值不能正确表达。特别是上下边的padding和 margin 不能正确显示。三、css解决浮动，清除浮动方法 - TOP 这里 DIVCSS5

CSS清除浮动_清除float浮动

阅读更多关于 CSS清除浮动_清除float浮动

CSS清除浮动方法集合(三种方法) 个人建议：使用第二种和第三种一、浮动产生原因一般浮动是什么情况呢？一般是一个盒子里使用了 float 浮动属性，导致父级对象盒子不能被撑开，这样 float浮动就产生了。浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了 float 浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。简单地说，浮动是因为使用了 float:left 或 float:right 或两者都是有了而产生的浮动。二、浮动产生负作用 1、背景不能显示由于浮动产生，如果对父级设置了（ CSS background背景） CSS背景颜色或 CSS背景图片，而父级不能被撑开，所以导致 CSS背景不能显示。 2、边框不能撑开如上图中，如果父级设置了 CSS边框属性（ css border ），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、 css margin 属性的值不能正确表达。特别是上下边的padding和 margin 不能正确显示。三、css解决浮动，清除浮动方法这里 DIVCSS5 为了统一讲解浮动解决方法，假设了有三个盒子对象

css自定义属性和简单效果

阅读更多关于 css自定义属性和简单效果

简介 CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。之前使用变量的时候，需要借助sass、less等预处理工具来实现，现在我们可以直接使用css来声明变量。兼容性老规矩，先来看下兼容性兼容性兼容性一片绿，红的那不是还有两个吗？做大事怎么能拘小节呢，让它咕噜（gun）一边去吧。语法语法有点难看但很简单， --* 来声明变量名， var(--*) 来使用，也许你要问了，为什么使用 -- 不用 $ 一类的呢，唉，那不是sass、less两个货用了吗声明和使用必须放在{}代码块里 body{ --bg-color: lightblue; background-color: var(--bg-color); } 效果代码是不是很简单，可以直接看效果，就不赘述了。全局变量与变量覆盖在 :root 代码块里面声明的变量就是全局变量，并且局部变量会覆盖全局变量 :root{ --bg-color: red; } body{ --bg-color: lightblue; background-color: var(--bg-color); } 最后生效的是 --bg-color: lightblue ， bg-color 变量的值也就变成了 lightblue 变量的缺省值完整的变量使用语法 var( [, ]? ) ，当变量没有定义的时候

HTML基础3

阅读更多关于 HTML基础3

页面的制作过程 1 页面的制作过程 1 设计师制作设计图划分区域最重要最复杂 2 前端工程师制作页面填充内容 2 如何划分区域用合适的元素来表示不同的区域已学习 HTML 设置区域的位置、尺寸、背景等样式 CSS 3 划分区域中的 CSS 知识每个元素都会在页面中生成一个矩形区域 CSS 称该矩形区域为盒子 (box) 2. 盒模型概述 1 盒子的分类不同的元素产生的盒子类型可能不同一个元素，产生什么样的盒子，取决于它 CSS 的 display 属性 2 盒子的组成一个盒子由： margin 、 border 、 padding 、 content 组成 3. CSS 的尺寸单位在 CSS 中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成。 4. 盒模型 content 内容含义用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间相关 CSS属性 Overflow 含义：内容溢出时的处理方式不可继承默认值： visible 溢出部分仍然显示其他取值 hidden溢出部分隐藏 scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用 auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现 min-width 含义：最小宽度保证 width属性的值不小于该属性值不可继承默认值

day51

阅读更多关于 day51

CSS简介 ## CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 ## CSS语法 CSS实例：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。例如： h1 {color: red; font-size: 14px} 选择器属性声明值属性声明值 ## CSS注释 /*这是注释*/ 快捷键是 ctrl + / CSS的几种引入方式 ## 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用 <p style="color; red">Hello world.</p> ## 内部样式嵌入式是将CSS样式集中写在网页<head></head>标签对中，格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> <p>Hello world</p> ## 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel=

订阅 css颜色