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

第十三章

1.在使用浮动时,源代码的顺序非常重要。浮动元素的HTML必须处在要包围它的元素的HTML之前。

2.清楚浮动:

(1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮动元素。关键字:left、right或both。

(2).浮动外围元素:让包含浮动元素的<div>也浮动。选择这种方法一定要在浮动容器后面的任何元素中添加一个clear属性,确保浮动元素落到容器的下方。

(3).利用overflow : hidden。另一种常见的方法是在外围的样式中添加以下属性:overflow:hidden。

第十四章

1.在样式表中添加媒体查询:

(1).使用@import指令

@import url(css/small.css)(max-width:320px);

(2).在样式表中嵌入媒体查询

@media (max-width : 480px){
    body {
        /* style properties go here */
}
    style1{
        /* style properties go here */
    }
}

2.防止浮动下落:

使用box-sizing : 可以重置盒模型。防止因为border产生的宽度超出而导致并排的元素被挤下去。

第十五章

1.position:


定位类型


属性关键字


特点


静态定位


static


position的默认值


绝对定位


absolute


会将元素位置从文档流删除


相对定位


relative


保留元素位置,但是显示在其他位置


固定定位


fixed


元素固定在页面某个位置不随滚动条移动

2.

(1).如果一个标签的位置是绝对定位的,它又不在任何设定了absolute、relative或fixed定位的标签里面,那它就是相对于浏览器窗口进行的定位。

(2).如果一个标签处在另一个设定了absolute、relative或fixed定位的标签里面,那它就是相对于另一个元素的边沿进行定位。

3.堆叠元素

绝对定位的元素处在网页的上层。

4.隐藏


方式


特点


display:none


将元素从网页上不留痕迹的消失


visibility:hidden


将元素在网页上不可见,但是位置还在


opacity:0


将元素的可见度设置为0,可以添加动画

十六章

1.CSS支持10种不同的媒体类型:all、braille、embossed、handheld、print、projection、screen、speech、tty和tv。

2.特别注意以下3中媒体类型:

(1).all:适用于每一种设备

(2).screen:只适用于显示器

(3).print:只适用于打印网页

3. 添加media样式表

(1). 给外部样式表指定媒体类型:

<link rel=”stylesheet” media=”print” href=”print.css”/>

从技术上来讲,CSS规则允许在用@import方法添加外部样式表的同时定义媒体类型,像这样:@import url(print.css)print;但是IE8不支持这行代码因此最好不用。

(2)在样式表中指定媒体类型

可以利用@media指令直接在样式表中定义特定的媒体类型。

@media print{
     /* put your styles for the printer in here */
}

第十七章:

CSS设计习惯

1.添加注释

2.使用多个类来创建样式

3.使用派生选择器

4.在一个外部样式表中使用@import导入多个样式表,然后链接到网页中。

时间: 2024-10-03 08:40:37

CSS3秘笈复习:十三章&十四章&十五章&十六章&十七章的相关文章

CSS3秘笈复习:第九章&amp;第十章

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

CSS3秘笈复习:第一章&amp;第二章&amp;第三章

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

CSS3秘笈复习:第七章

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

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

CSS3秘笈:第十三章

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

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

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

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