背景样式

1.背景颜色
语法:background-color : transparent | color

body { background-color:#CCCCCC;}

2.渐变色彩
语法:background: linear-gradient(方向,color,color,……) 设置渐变,默认为均匀分布
,可在color 后设置百分比
方向:to buttom(默认)、to top、to right、to left、to bottom right,to top right

background-image:linear-gradient(to left, red 30%,blue);

3.背景图片
语法:background-image : none | url ( url )

body { background-image:url(images/bg.gif);}

4.背景平铺方式
语法:background-repeat : repeat | no-repeat | repeat-x | repeat-y

body { background-repeat:repeat-x;}

5.背景定位
语法:background-position : 左对齐方式 上对齐方式

body { background-position:left bottom;}

body { background-position:30% 20px;}

6.背景原点
语法:background-origin : border-box | padding-box | content-box;
说明:设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat
此属性才会生效。

padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。

7.背景的显示区域
语法:background-clip : border-box | padding-box | content-box | text
说明:设定背景图像向外裁剪的区域。

text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为

填充色之类的遮罩效果。

8.背景尺寸
语法:background-size:<length> | <percentage> | auto | cover | contain
说明:设置背景图片的大小

auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包

含在容器内。

9.背景样式缩写
语法:background: 背景色 背景图片 背景平铺方式 背景定位

body {
background:#EDEDED url(images/bg.png) no-repeat 50% 30px;
}

10.多重背景
语法: background : [background-color] | [background-image] | [background-
position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
注意
用逗号隔开每组 background 的缩写值;
如果有 size 值,需要紧跟 position 并且
用 "/" 隔开;
如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明
所有背景图片应用该属性值。
background-color 只能设置一个。

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;列表样式

列表样式

1.项目符号
语法:list-style-type : disc | circle | square | decimal | lower-roman | upper-
roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
说明:控制列表每一项头部图标

disc: 实心圆(CSS1)
circle: 空心圆(CSS1)
square: 实心方块(CSS1)
decimal: 阿拉伯数字(CSS1)
lower-roman: 小写罗马数字(CSS1)
upper-roman: 大写罗马数字(CSS1)
lower-alpha: 小写英文字母(CSS1)
upper-alpha: 大写英文字母(CSS1)
none: 不使用项目符号(CSS1)
armenian: 传统的亚美尼亚数字(CSS2)
cjk-ideographic: 浅白的表意数字(CSS2)
georgian: 传统的乔治数字(CSS2)
lower-greek: 基本的希腊小写字母(CSS2)
hebrew: 传统的希伯莱数字(CSS2)
hiragana: 日文平假名字符(CSS2)
hiragana-iroha: 日文平假名序号(CSS2)
katakana: 日文片假名字符(CSS2)
katakana-iroha: 日文片假名序号(CSS2)
lower-latin: 小写拉丁字母(CSS2)
upper-latin: 大写拉丁字母(CSS2)

ul { list-style-type:disc;}/*默认*/

2.自定义项目符号
语法
list-style-image : none | url ( url )
说明:用图片来定义列表的每一项的头部图标

ul {list-style-image:url(images/arrow.gif)}

变形样式

语法:transform:各类函数
说明:改变元素的大小,透明,旋转角度,扭曲度等。

各类函数:

translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对
应Y轴。如果第二个参数未提供,则默认值为0
transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴
和Y轴的50%处。
translateX(): 指定对象X轴(水平方向)的平移
translateY(): 指定对象Y轴(垂直方向)的平移
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的
定义
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如
果第二个参数未提供,则默认取第一个参数的值 skew(): 指定对象skew transformation(
斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值
为0
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对
应Z轴,参数不允许省略

过渡动画

1.transition-property(过渡属性):

说明:设置对象中的参与过渡的属性。

div{
  transition-property:width,height,color;
}

2. transition-duration(过渡所需时间):

说明:主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。

div{
  transition-duration: .5s;
}

3. transition-timing-function(动画--过渡函数) :
说明:指过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况。
取值
ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))

ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)

div{
  transition-timing-function:ease-in;
}

4. transition-delay(动画--过渡延迟时间):  
说明:transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。

div {
transition-delay:.1s;
}

5. transition(过渡):
语法
transition:[ none | <transition-property> ] || < transition-duration > || <transition-timing-function> || < transition-delay> [,*]

说明:通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

/*all代表所有属性*/
div{
transition: all .5s ease-in .1s;
}

CSS3初学篇章_5(背景样式/列表样式/过渡动画)的更多相关文章

  1. CSS3初学篇章_7(布局/浏览器默认样式重置)

    CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...

  2. CSS元素、边框、背景、列表样式

    一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两 ...

  3. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  4. CSS3初学篇章_4(边框样式/段落样式)

    边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...

  5. CSS3初学篇章_3(属性选择符/字体样式/元素样式)

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  6. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

  7. CSS3初学篇章_2(伪类选择符)

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  8. 织梦系统dedecms实现列表页双样式,列表样式循环交替变化

    有时候做列表页需要交替变换样式,那如何实现列表页双样式呢? 在DeDeCMS里面有这样一个函数,可以循环赋予html代码不同的样式,如下: [field:global function=MagicVa ...

  9. CSS3初学篇章_1

    CSS 层叠样式表 不同的浏览器需要不同的前缀,虽然目前最新版本的浏览器的不需要,但为了向下兼容,前缀还是少不了. 前缀 浏览器  -webkit  chrome和safari  -moz  fire ...

随机推荐

  1. filter应用案例一:分IP统计访问次数

    统计工作需要在所有资源之前都执行,那么就可以放到Filter中了.用Map<String,Integer>装载统计的数据.Map创建时间(使用ServletContextListener, ...

  2. Android Manifest 权限描述大全

    权限 名称 描述 android.permission.ACCESS_CHECKIN_PROPERTIES 访问登记属性 读取或写入登记check-in数据库属性表的权限 android.permis ...

  3. sprint 1 的总结

    sprint 1 的总结   做完第一个sprint冲刺,休息了两天,今天我们来总结一下. 1.之前没有看清楚要求,没有把我们的项目具体负责人的名单发出来,现在进行补充说明一下,便于大家了解我们的身份 ...

  4. The 13th Zhejiang Provincial Collegiate Contest(2016年浙江省赛)

      前4道水题就不说了,其中我做了C题,1Y,小心仔细写代码并且提交之前得确认无误后提交才能减少出错率. 结果后面2题都由波神做掉,学长带我们飞~ 终榜 官方题解   ZOJ 3946 Highway ...

  5. Handling events in an MVVM WPF application

      Posted: June 30, 2013 | Filed under: MVVM, WPF, XAML |1 Comment In a WPF application that uses the ...

  6. Ubuntu 16.04 LTS 安装R及RStudio Server

    1.R的安装 1.1首先添加镜像源 # Ctrl+Alt+T打开终端 $ sudo gedit /etc/apt/sources.list # 加入新镜像源 回车之后会自动跳出一个文本框,然后在相似的 ...

  7. CF#335 Intergalaxy Trips

     Intergalaxy Trips time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. iOS学习36数据处理之SQLite数据库

    1. 数据库管理系统 1> SQL语言概述 SQL: SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集, 是一种功能齐全的 ...

  9. AIM Tech Round 3 (Div. 2)

    #include <iostream> using namespace std; ]; int main() { int n, b, d; cin >> n >> ...

  10. ccc 模拟重力 正太分布

    ball.js cc.Class({ extends: cc.Component, properties: { x_vel:{ default:0 }, y_vel:{ default:0 }, gr ...