CSS3秘笈复习：第八章

CSS3秘笈：第八章

给网页添加图片 1. 常用来处理图片的CSS属性: (1) border(边框):给图片添加边框. (2) padding(填充):边框和图片之间填充空间. (3) float(浮动):浮动图片是指将图片移到左侧或者右侧. (4) margin(边距):图片和其他网页元素之间添加空间. 2. 添加图片背景: background-image属性可以给元素添加背景.例如:给网页添加一个背景可以给<body>创建如下样式: body{ background-imag…

CSS3秘笈复习：十三章&十四章&十五章&十六章&十七章

第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮动元素.关键字:left.right或both. (2).浮动外围元素:让包含浮动元素的<div>也浮动.选择这种方法一定要在浮动容器后面的任何元素中添加一个clear属性,确保浮动元素落到容器的下方. (3).利用overflow : hidden.另一种常见的方法是在外围的样式中添加以下属性:…

CSS3秘笈复习：第十一章

1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向的定位,关键字是top.baseline.middle或bottom. 两者的区别是,vertical-align不会被继承,因此只能直接用到<th>和<td>标签上. 2.控制表格单元之间的空格:CSS提供了border-spacing属性来控制这条间隙.将该属性应用到表格本身,并且…

CSS3秘笈复习：第九章&第十章

第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时这四种方式一定要严格按上面的顺序执行否则就会无效. 第十章 1.transform属性: 要旋转一个元素,首先要提供关键字rotate,后面是要旋转的角度,例如: transform : rotate(10deg); //顺时针旋转10度另一个关键字是scale(缩放),让它变得更大或更小,例如: transform :…

CSS3秘笈复习：第七章

1.边距冲突: 当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算,浏览器会忽略小的那个值而使用大的值. 2.边距折叠: 假设要在警告框里插入一个标题,并且要在它与div的顶部和底部之间各留出一点空间,浴室设置标题的margin为10px.但是设置的边距反而出现在了div的上方,这种现象叫做边距折叠,意味着两个边距变成了一个.解决的方法有两种:(1)在<div>标签周围添加少量的padding:(2)给<div>添加一条border. 水…

CSS3秘笈复习：第六章

第六章 1.文本大写化: text-transform:uppercase; 另外三种选项是:lowercase或capitalize以及none. 2.文本修饰: text-decoration:underline/overline/line-through/blink/none 可以使用多个关键字来合并效果. 3.给文本添加阴影:它接收四个参数水平偏移量垂直偏移量阴影的模糊度阴影的颜色 text-shadow:-4px 4px 3px #999999; 可以添加多个阴影,用逗号隔开.…

CSS3秘笈复习：第一章&第二章&第三章

第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@import指令.把这个指令添加到一个HTML的<style>标签中,像这样: <style> @import url(css/styles.css); </style> 要将所有@import行都放在CSS规则之前. 第三章: 1.类选择器命名只允许使用字母数字连字符(-)…

CSS3秘笈第三版涵盖HTML5学习笔记13~17章

第13章,构建基于浮动的布局使用的是float(浮动)属性注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不用用浮动进行布局 LayoutGala网站(http://blog.html.it/layoutgala/)上提供了40种不同的CSS设计,但大多只是基本框架,里面只有<div>标签及其定位用的CSS代码布局生成器,Cridinator(http://gridinator.com)提供了简单的…

CSS3秘笈第三版涵盖HTML5学习笔记9~12章

第9章,装饰网站导航限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.border-color等样式(除非已经为那些链接的正常状态定义了颜.背景色和边框色) 对于<a>标签可以对所有不同的访问状态设置样式,但要让样式有效,必须以特定的顺序指定链接:link.visited.hover.active CSS3按钮生成器:http://css3button.net CSS3按钮优…

CSS3秘笈第三版涵盖HTML5学习笔记6~8章

第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往下搜寻,直到找到备用字体. 若字体名称中包含多个单词,则必须用双引号将它们括起来 font-family:"Times New Roman",Times,serif; sans-serif字体 sans-serif字体看起来干净而简洁,所以常被用于标题.sans-serif字体包括Aria…

CSS3秘笈第三版涵盖HTML5学习笔记1~5章

第一部分----CSS基础知识第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中的章节一样 <aside>标签包含与其周边的内容相关的内容,如纸质杂志上的侧边栏一样 <footer>标签包含通常放在网页底部的一些信息,如版权声明.法律信息.一些网站的导航链接,等等 <nav>标签用来包含重要的导航链接 <figure>标签用于说明图让IE…

CSS3秘笈：第十章

CSS的transform.transition和animation属性 1.transform(倾斜):利用transform属性可以使导航栏稍微倾斜,或者使图片在访问者的鼠标经过它时放大两倍,甚至可以结合更多transform属性设计出其他效果. 例如,要旋转一个元素,要先提供关键字rotate,后面是要旋转的度数: transform:rotate(10deg); 这条声明是将元素沿顺时针方向旋转10°. 解决兼容问题必须这样改写代码: -webkit-transform:rotate…

《CSS3秘笈》备忘录

第一部分 1. 类名称区分大小写:.special和.SPECIAL不一样 2. :focus 是通过单击或跳格集中在某个地方 3. ::selection 没有单冒号,被选中的文本[ 但是在IE8和Firefox中不支持, 使用à ::-moz-selection{} ] 4. :not()一个选择器中只能用一个[:not():not()],不能使用派生选择器[:not(div p)] 5. ^以什么开头,$以什么结尾,*包含什么 6. p* 是指p元素内部的元素第二部分 1…

CSS3秘笈：第十三章

1.float属性能把网页元素移到网页(或者其他外围快)的某一侧.出现在浮动元素之后的所有HTML都能在网页中上移,环绕在浮动元素的周围. float属性接受以下3种不同的值:left(左).right(右)和none(无).假设要把一张图片移到网页的右侧,可以创建下面这个类样式,并把它应用到<img>标签上: .floatRight { float: right; } 将该属性应用到一个装满内容的<div>标签上时,还可以创建一个侧边栏: .sidebar { floa…

CSS3秘笈：第十二章&第十三章

第十二章 1.网页布局类型 (1)固定宽度 (2)流式 (3)响应式Web设计 2.CSS布局的方法通过给元素设置一个宽度,将它浮到左侧或右侧,就可以创建一个列(元素后面的文本会环绕浮动的元素,仿佛是另外一个列一样).如果给多个div或者其他标签使用float属性,就能够实现对多列的布局.进一步使用这种技术,把浮动的div放在浮动的div里面,就能快速创建复杂.多列的布局. 另一种CSS方法:绝对定位,它允许你把元素放在网页的任何位置上,并且可以精确到像素级.一般来说,这种方法适合于比较小的任…

CSS3秘笈：第十一章

表格和表单的格式化 1.表格的各种标签提供了许多有用的“钩子”,可以再上面挂CSS样式.如果创建了<th>标签样式,那么每一个列的标题——<th>标签——看起来就有可能与其他的表格单元不同,也可以使用<colgroup>标签方便地为表格单元列来设置宽度. 2.padding指一个元素的边框与其内容之间的空间.你可以用padding在段落的文本与其边框之间添加一点空间.对于表格而言,边框就是指表格单元的边,因此padding是在表格单元里的内容周围添加空间.它还有一个好处…

CSS3秘笈：第九章

1.链接状态:大部分浏览器支持4中基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接.正被单击的链接.这些状态的4个对应伪类选择器分别是:link.:visited.:hover.:active. 为了实现最大程度的设计控制,必须对所有不同的访问状态都定义样式,但是必须按照指定顺序: a : link{color : #F60; } a : visited{color : #900; } a : hover{color : #F33; } a : active{color…

CSS3秘笈：第七章

第七章 margin.padding和border 1.盒模型:四个属性: (1)padding:内容与其边框线之间的空间. (2)border:盒子周围的直线 (3)background-color:用来填充边框内部空间的,包括padding区域. (4)margin:一个标签和另一个标签之间的间隔. 2.padding和margin的区别:padding是在内容和边框之间增加空间.避免内容被硬塞在方框里面,它还包括背景区域,因此padding占用的空间也可以为空白的内容.而margin则是…

CSS3秘笈：第六章

第六章文本格式化 1.font-family 属性设置字体.除了指定想要的字体之外还要使用备用字体.例如: p{ font-family:Arial ,Helvetica ,sans-serif; } 如果字体的名称中包含多个单词,则必须用双引号(””)将它们括起来. 2.·serif字体,适合冗长的文字信息. ·sans-serif字体看起来干净而整洁因此经常被放在标题上. ·monospaced字体经常用于显示计算机代码.字体中的每个字母都是等宽的. ·其他常用字体:Arial Blac…

CSS3秘笈：第五章

第五章层叠管理样式 1.层叠是决定哪些样式属性要被应用到某一个元素的一套规则. 2.最近的祖先样式胜出:浏览器会采用离相关标签最近的样式. 3.直接应用的样式胜出:任何直接应用于指定标签的样式都战胜了继承来的属性. 4.多个样式可能应用于同一个标签的几种情况: ·标签同时应用了一个标签选择器和一个类样式.例如,<h2>标签有标签样式和类样式.leadHeadline,还有这样的HTML代码:<h2 class=”leadHeadline”>Your Future Reveale…

CSS3秘笈：第四章

第四章继承 1.继承:应用在一个标签上的CSS样式被传到其内嵌标签上的过程. 2.继承的局限性: (1)有些属性不会被继承,如:CSS. (2)以下情况不会严格执行继承: ·影响网页元素位置的属性: ·Web浏览器使用它们自己固有的样式为各种标签设置样式: ·当有样式发生冲突时,更具体的样式会胜出.…

CSS3秘笈：第一章

1.<div>和<span>标签: <div>和<span>标签:就像是一个空的容器,我们要往里面填充内容.一个div就是一个块,意味着它的前后都要空一行:而span则呈嵌套模式,成为一个段落的一部分.<div>标签标示任何不连续的内容块,像一个段落或者标题.<span>标签用于行内元素,出现在一个更大的段落或标题中的文字或者短语.布局如: <div id=”footer”> <p>Copyright 2006…

CSS3秘笈：第二章

1.一个样式由两个元素组成:浏览器对其设置格式的网页元素(选择器,selector)和实际的格式化指令(声明块,declaration block). 2.简单的样式也包含了以下几个元素: (1)Selector(选择器):选择器告诉浏览器网页上的哪个元素以什么样式显示. (2)Declaration Block(声明块):选择器后面的代码包含了所有要应用到选择器的格式化选项.声明块以大括号包围({}). (3)Declaration(声明):在一个声明块的左右大括号之间,添加一个或多个声明,或…

CSS3秘笈：第三章

1.标签选择器:控制整体. 使用标签选择器,只需要输入标签的名称即可. 2.类选择器:精确控制. 假如你要指定一些相同的元素拥有不同的样式,可以给元素添加不同的类名,然后用类选择器来应用对应的样式. 任何使用类选择器呢?以下几点需要注意: (1)所有类选择器的名称都必须以一个原点开头,如 .class 这个类. (2)CSS只允许在类名称中使用字母.数字.连字符(-).下划线(_). 类选择器可以帮助你实现高度精确的设计变更.例如在网页中的<h2>标题设置样式,让该样式只用于某个<h2…

让你的代码量减少3倍！使用kotlin开发Android(二) --秘笈！扩展函数

本文承接上一篇文章:让你的代码量减少3倍!使用kotlin开发Android(一) 创建Kotlin工程本文同步自博主的私人博客wing的地方酒馆上一节说到,kotlin可以省去getter,setter,和findviewbyid,可以看到已经能去除掉不少代码了.本篇再带给大家一篇秘笈,叫做函数扩展. 函数扩展是什么东东捏,一般来说,我们扩展一个类,需要去继承来实现,不过这样又要写N多代码呀~~ 标题说了,kotlin能让你的代码量减少至少3倍!不信?快来跟我看看! 来让我们先把布局的Te…

Kotlin入门(15)独门秘笈之特殊类

上一篇文章介绍了Kotlin的几种开放性修饰符,以及如何从基类派生出子类,其中提到了被abstract修饰的抽象类.除了与Java共有的抽象类,Kotlin还新增了好几种特殊类,这些特殊类分别适应不同的使用场景,极大地方便了开发者的编码工作,下面就来看看Kotlin究竟提供了哪些独门秘笈. 嵌套类一个类可以在单独的代码文件中定义,也可以在另一个类内部定义,后一种情况叫做嵌套类,意即A类嵌套在B类之中.乍看过去,这个嵌套类的定义似乎与Java的嵌套类是一样的,但其实有所差别.Java的嵌套类允许访…