【CSS3学习系列之盒样式（一）】的更多相关文章

CSS3学习系列之盒样式（一）

盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1中追加的一个盒类型,属于block类型的一种,但是显示时它具有inline类型盒的特点,例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…

CSS3学习系列之盒样式（二）

text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号"-".但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效.例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha…

CSS3学习系列之布局样式（二）

使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用float属性进行布局的示例</title> <style> #container{ display: -moz-box; display: -webkit-box; } #l…

CSS3学习系列之背景相关样式（一）

新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background-break:指定内联元素的背景图像进行平铺时的循环方式 background-clip属性 在HTML页面中,一个具有背景的元素通常由元素的内容.内容补白(padding).边框.外部补白(margin)构成. 元素背景的显示范围在css2与css2.1.css3中的并不相同,在css2中,背景的…

CSS3学习系列之背景相关样式（二）

在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处理方式并不一致,在chrome浏览器与safari浏览器中,会绘制出一个椭圆形边框,第一个半径为椭圆的水平方向半径,第二个半径为椭圆的垂直方向半径,在firefox浏览器与opera浏览器中,将第一个半径作为边框左上角与右下角的园半径来绘制,将第二个半径作为边框右上角与左下角的园半径来绘制.例子如下…

CSS3学习系列之布局样式（一）

多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用float属性进行页面布局的示例</title> <style> div { width: 20em; floa…

[CSS3]学习笔记-CSS基本样式讲解

1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="styl…

css3学习系列之选择器（一）

CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val]属性选择器:选择值以val指定的字符串开头的att属性使用这个样式. [att$=val]属性选择器:选择值以val指定的字符串结尾的att属性使用这个样式. 属性选择器的例子:利用[att$=avl]属性选择器,可以根据超链接中不同的文件扩展符使用不同的样式. <!DOCTYPE html>…

CSS3学习系列之选择器（二）

first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child选择器与last-child选择器使用示例</title> <style> l…

CSS3学习系列之选择器（四）

使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none,然后在不需要插入内容的元素中将class属性值设定为这个给定的类名就可以了.另外,在CSS2.1中,除了none属性值外,还未content属性添加了一个normal属性值,其作用与使用方法none属性值的作用相同,并且使用方法也相同.从css2.1开始,值右当使用before选择与after选择…