
CSS
life is wonderful
pay for life, pay for yourself
展开
-
CSS基础学习六:id选择器
一id选择器 id选择器允许以一种独立于文档元素的方式来指定样式。在某些方面,id选择器类似于类选择器,不过也有一些重要差别。 语法 首先,id选择器前面有一个 # 号,也称为棋盘号或井号。 请看下面的规则:*#intro { font-size:24px;background-color:#000000;col原创 2015-11-05 22:35:49 · 7550 阅读 · 1 评论 -
CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效
学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处。顺便也说一下CSS3新增的样式属性box-shadow和属性transform。 一图文混排CSS布局之图文混排#test {border:#FF00FF solid 2px;width:650px;height:46原创 2015-12-04 18:11:35 · 25065 阅读 · 0 评论 -
CSS基础学习十八:CSS布局之浮动
CSS布局中说到定位就不得不提浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 一float属性的定义和用法 float属性:设置元素浮动 可能的值: none 不浮动,在文档流内,默认 lef原创 2015-11-28 18:29:33 · 2448 阅读 · 4 评论 -
CSS基础学习十七:CSS布局之定位
在我们开始学习CSS布局之前,先来了解一下文档流的概念。文档流即是HTML的布局机制,块级元素占一行,行内元素不占一行。将窗体自上而下分成一行行,并在每行中按从左往右的顺序排放元素。 一CSS定位和浮动概述 CSS定位属性允许你对元素进行定位。CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常原创 2015-11-27 16:38:33 · 3122 阅读 · 5 评论 -
CSS基础学习十五:盒子模型补充之外边距合并
今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属性设置都是介绍了盒子模型中的内容概括。开始今天的主题:外边距合并。 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 (1)外边距合并 外边距合并叠加是一原创 2015-11-21 15:40:58 · 3694 阅读 · 1 评论 -
CSS基础学习五:类选择器
一CSS类选择器概述 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。 二修改 HTML 代码 在使用类选择器之前,需要修改具体的文档标记,原创 2015-11-03 14:42:43 · 2113 阅读 · 0 评论 -
CSS基础学习十三:盒子模型
一CSS盒子模型概述 CSS盒子模型规定了元素框处理元素内容、内边距、边框和外边距的方式。一个完整元素包括内容(content),内边距(填充)(padding),边框(border)和外边距(空白)(margin)。 盒子模型图: 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框原创 2015-11-19 20:23:01 · 2953 阅读 · 3 评论 -
CSS基础学习三:CSS语法
CSS语法分为基础语法和高级语法。 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明。 selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 H原创 2015-10-30 15:41:04 · 2157 阅读 · 4 评论 -
CSS基础学习四:元素选择器
在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识。下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值;属性名:属性值;......} 属性与属性之间用分号隔开;属性与属性值直接使用冒号连接;如果一个属性有多个属性值的话,那么多个属性值用空格隔开。 上述提到了我这一篇博客所要说的主题,就是选择器。选择器就是指定C原创 2015-11-01 15:02:41 · 2441 阅读 · 1 评论 -
CSS基础学习十六:CSS盒子模型补充之border-radius属性
CSS盒子模型有很多的内容和属性,CSS也一直在更新和新增属性,今天我们来说说CSS3新增的盒子模型中的边框中的内容,也就是border-radius属性。 border-radius属性设置元素的边框添加圆角,其实没有边框也可以添加圆角效果。但是要是显示出来,就必须增加背景色或者边框。 可能的值:xpx;圆角是xpx,半径为xpx的四分之一圆。原创 2015-11-22 20:41:16 · 3097 阅读 · 4 评论 -
CSS基础学习十二:CSS样式
CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式。我们就目前用到的CSS样式简单地介绍一下。下面只是总结性的一些东西,具体的可以参考:CSS样式教程 (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,y原创 2015-11-16 20:04:15 · 2346 阅读 · 2 评论 -
CSS基础学习十四:盒子模型补充之display属性设置
我们在CSS原创 2015-11-20 18:45:03 · 4289 阅读 · 1 评论 -
CSS基础学习二:如何创建 CSS
说到底如何创建CSS,就是要说HTML和CSS以怎样的方式结合?如何插入样式表,这是HTML和CSS结合最重要的问题。当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。 插入样式表的方法有四种: 一style属性方式(内联样式) 利用标签中的style属性来改变每个标签的显示样式。每一个HTML标签中都有style样式属性,该属性原创 2015-10-29 17:23:40 · 2072 阅读 · 1 评论 -
CSS基础学习十:伪元素
上一篇博客说的是伪类,这次我们来说说伪元素。先来补充一下上篇博客漏掉的一个伪类::focus 伪类 (1)定义和用法 :focus伪类在元素获得焦点时向元素添加特殊的样式。注释IE浏览器不支持此属性。 (2)说明 这个伪类应用于有焦点的元素。 例如HTML中一个有文本输入焦点的输入框,其中出现了文本输入光标;也就是说,原创 2015-11-14 18:32:05 · 1769 阅读 · 4 评论 -
CSS基础学习九:伪类
CSS伪类 CSS语法中伪类用于向某些选择器添加特殊的效果。常见的伪类有: (1)语法 伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用。 selector.class : pseudo-class {p原创 2015-11-13 20:13:52 · 1932 阅读 · 0 评论 -
CSS基础学习一:CSS概述
CSS 概述 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和原创 2015-10-28 18:11:26 · 2388 阅读 · 0 评论 -
CSS基础学习七:属性选择器
CSS语法中,对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。(注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。) 一属性选择器 先来一个简单的例子:为带有 title 属原创 2015-11-12 21:31:55 · 2587 阅读 · 0 评论 -
CSS基础学习八:派生选择器
CSS语法中通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。 在CSS1中,通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过原创 2015-11-13 14:35:56 · 3014 阅读 · 0 评论 -
CSS基础学习十一:选择器的优先级
在CSS基础学习的篇章中,从第四篇博客开始说选择器,到昨天基本已经说完了。今天我们总结一下,选择器作用:告知浏览器需要设置哪个dom元素的样式。最后来说说选择器一个重要的问题,选择器的优先级。判断优先级的方法就是尝试!!! 一简单选择器的优先级 简单的选择器包括我们在第四篇,第五篇,第六篇博客的元素选择器(标签选择器),类选择器和id选择器。原创 2015-11-15 14:49:30 · 4872 阅读 · 4 评论