css基础系列教程:背景属性作者：www.divcss.com我们把上一节的作业的答案给大家公布一下：1、 h1 .p1{}：表示h1标签下的所有class为p1的选择符；2、 #content h1{}表示id为content下的所有h1标签；3、 h1 .p1，#content h1并列关系，对class为p1的和ID为#content下的H1作用同一个效果；4、 h1#content h2{} 表示h1下id为content标签下的h2标签，请注意这个地方不是包含没有空格而是紧接着写的。必须是属于H1里面ID为#content下...
利用css3实现一个半月形的西瓜，利用queue实现吃西瓜的动画。练习例子css3:1、圆角border-radius:100%;border-top-left-radius:5px;2、变形2D旋转：transform: rotate(25deg);(正角度为顺时针，负角度为逆时针)。3D旋转：transform: rotateX(25deg);-----效果为div的高度变小，90deg时高度为0。3D旋转：transform: rotateY(25deg);-----效果为div的宽度变小（左右border同时内缩），90deg时宽度为0。缩放:transform:scale(1,0.5);或...
2 文本属性**①颜色:** color**②水平对齐方式:** text-align:left/center/right/justify与margin:0 auto 让块级元素本身居中不同,text-align是让元素内部的行内,行内块,文本居中(如p,div无法居中,p标签在div中居中是p标签继承了div的text-align:center)**③垂直对齐方式:** line-height:px/无单位数字表示字号的倍数如果字号大小小于行高,文本会在行高范围内的垂直中心显示.多行文本不用line-height进行居中,而可以用div将一个文...
1. background-size background-size: cover || contain. 该属性可以是背景图片铺满容器，前者适用于当背景图片原始尺寸小于容器大小，后者适用于图片尺寸大于容器。2. background-clip 取值 ： border-box || padding-box || content-box 需要注意的是 background在Box Model中，他是布满整个元素的Box区域的，并不是从padding内部开始，只不过边框部分遮住了部分background；backgground-color是从左border的左上角到...
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>定位属性</title><style type="text/css">/*position01.relative:相对定位，相对于自身原来的位置02.absolute：绝对定位，相当于父级03.fixed : 固定定位 相对于浏览器04.static ：默认值*/img{position: fixed;/*固定定位*/left: 50px;top: 20px;}#a{position: absolute;/*绝对定位*/top: 20px;height: 50px;width: 50px;background-color: blue;}#b{heigh...
CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简化。下面用一些比较常用的属性来做示例。相关CSS缩写文章：CSS代码缩写实例以及CSS缩写原因总结 CSS缩写6个图例总结margin margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; 代码简化为：margin:1px margin-top:1px; ...
例子：<div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px;opacity:0.5;background-color:silver;color:red">何问起<a href="http://hovertree.com/hvtart/bjae/q3etb2qv.htm" target="_blank">效果</a></div>查看效果：http://hovertree.com/hvtart/bjae/q3etb2qv.htm 设置 div 元素的不透明级别：div{opacity:0.5;}opacity 属性设置元素的不透明级别。默认值： 1继承性： no版本： CSS3JavaScript ...
目录' ref='nofollow'>< table > 标签的特有属性' ref='nofollow'>< table > 标签的特有属性' ref='nofollow'>< td > 标签特有的属性' ref='nofollow'>< td > 标签特有的属性 以 < colgroup >' ref='nofollow'>< col > 以 < colgroup > 特有属性' ref='nofollow'>< col > 特有属性 在css中的可设定样式' ref='nofollow'>< table > 在css中的可设定样式HTMLTableElement对象的方法< table >< table > 标签的特有属性cellpadding:用...
我们先来看看CSS3 Api中对position属性的相关定义：static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，rig...
样式表样式：行内样式表 内部样式表(内联) 外部样式表 (外联) 行内样式表（内联样式表）：内嵌的标签中，通过style标签来操作其的属性 、属性值等多个样式。在样式表中，width是样式的属性，200px是样式的属性值，属性与属性值之间用：隔开，多个属性之间用;隔开 内部样式表：在head标签中使用style标签 外部样式表 ： link:建立与外部CSS文件的链接，href：定义所链接外部样式表文件的URL，可以...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="Keywords" content="多彩文字,Multi Colored Text"/><meta http-equiv="Description" content="利用CSS 的 Clip 属性来创造 多彩文字(Multi Colored...
（注：仅对css3对background的调整、增加的属性进行了翻译）css3对于backgrounds做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。1、多个背景图片在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：background-image: url...
box-shadow: 它可以设置一个或者多个下拉阴影的框语法：box-shadow:h-shadow v-shadow blur spread color inset注意：该属性把一个或者多个下拉阴影添加到框上，该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值，一个可选的颜色值和一个可选的inset关键字来规定。属性参数说明：h-shadow:必需的，水平阴影的位置，允许为负值v-shadow:必需的，垂直阴影的位置，允许为负值blur:可选，模糊距离spread:可选，阴影的大小colo...
语法:columns: column-width column-count;column-width 列的宽度。column-count 列数。浏览器兼容：Internet Explorer 10 和 Opera 支持 column 属性。Firefox 支持替代的 -moz-column 属性。Safari 和 Chrome 支持替代的 -webkit-column 属性。例如以下代码：<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16p...
<!doctype html>无标题文档一、新增的选择器CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）序号选择器含义实例1E[att^="val"]属性att的值以"val"开头的元素div[id^="nav"] { background:#ff0; }2E[att$="val"]属性att的值以"val"结尾的元素 3E[att*="val"]属性att的值包含"val"字符串的元素 结构伪类选择器（过滤选择器） (注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。 由于...