css权威指南笔记(知识点总结)

第一章 css和文档

?1.替换元素与非替换元素,替换元素如 img input等,大多数html元素都是非替换元素。

2.块级元素和行内元素?,块级元素会自动填满父级元素的内容框,表格与其他块级元素一致,唯一有区别的是表格会生成一个标记符,就是小黑点。在html中块级元素不能继承行内元素,也就是说块级元素不能嵌套在行内元素里面,但是css中块级元素能继承行内元素的样式。

3.link里面包含以下几个属性,rel:来源;href:路径;media:默认为all(一般浏览器支持all、print、screen);  还有一个属性是title,一般不用,但是以后会有用,他的主要作用就是让读者自己可以选择想要的样式,在浏览器上面有一个view来控制css样式,读者可以根据自己的需求选择相应的css样式。

[email protected]必须放在第一位。如@import url(sheet.css)      @import与link区别在与link有时候有些样式文本是不会使用的,但是@import是一定会使用到的,而且可以写很多个@import?

第二章 选择器

1.?每个规则都分为2块,一块是选择器,一块是声明块。选择器和声明都可以分组。

2.将2个选择器链接在一起,只能选择同时包含这些类名的元素(类名的顺序不限制),如"p class="warning urgent">

",可以写成.warning .urgent{}。

3.4类属性选择器,                                                                                                            1.简单属性选择器,如:h1[class]{}、img[alt]{}、a[href][title]                                      2.?具体属性值选择器 如:h1[class=‘name‘]{}                                                                3.根据部分属性值选择器 如:p[class~=‘warning‘]{}  img[title~="page"]  表示包含‘warning‘这个单词的所有p元素 。                                                                                    ?p[class^="bar"]{}表示class中以bar开头的所有元素                                                        p[class$="bar"]{}表示class中以bar结尾的所有元素                                                        p[class*="bar"]{}表示class中包含bar字符串的所有元素                                               4.根据特定属性值选择器 如:*[lang|="en"]{}  表示lang属性中以en开头的所有元素,这种属性选择器一般都匹配语言值。

4.?子级选择器中可以用>表示,但是这里有一点要注意,假设一个div下面有3个p,如果写成div>P+P{color:red};显示结果是第二个和第三个p都会显示红色,如果只想第二个p显示红色必须写成div>p:first-child+p{color:red}

5.a元素如果是一个链接的话一定要带a:link{},因为如果不带的话,会影响到文档中其他a元素的样式,所以最好还是用:link。:link和:visited都是静态伪类,一般都是使用一次后不会再改变原本的文档样式,而:focus :hover :active?属于动态伪类。

6.设置首个子元素:first-child ,设置首字母:first-letter  设置首行:first-line?

第三章 结构与层叠

1.?特殊性 内联样式特殊性为1 0 0 0 id为0 1 0 0 class类属性值为0 0 1 0 元素标签属性值为0 0 0 1 通配符特殊性为0 0 0 0 ,需要注意的是0 0 1 0的特殊性比0 0 0 13要高。id="kk"的属性值为0 1 0 0,而[id="kk"]的属性值为0 0 1 0,这个也是需要注意的.伪类元素没有特殊性。

2.重要性 ?文档会将有!important的放在一组,而把没有!important的放在另外一组当中,有!important的级别总是要高于没有!important的,所以要应用某个css样式,首先比较有没有重要性,其次在比较特殊性。

3.权重 读者重要声明>创作人重要声明>创作人一般声明>读者一般声明

4.层叠 其实就是顺序 简单点就是后面的会覆盖前面的样式(其他如重要性、特殊性,权重、来源一致的情况下)。这里有一个案例,为什么伪类要按照:link :visited :hover :active的顺序来排列,因为这四个的特殊性都是0 0 1 0;如果点击未访问的链接时候,会触发:link :hover :active这3个样式,我们希望得到的是:active的样式,这时候由于顺序的原因,会出现:active的样式,如果不按照这种排序的话,可能会出现:hover或者:link的样式。?

第四章 值与单位

1.em ex px em的值会随着元素px的值改变而改变。ex是所用字体中小写的x的高度。?

2.em默认为16px;em会继承父级元素的字体大小?

3.rem是css3里面新增的,它根据根的字体大小来的,拥有相对大小和绝对大小的特点。?

第五章 字体

1.在font-family里面当字体名中出现了空格如new time或者出现$等符号以及字体名称为关键词时候需要将其表上引号?。

?2.font-weight里面100-400显示效果可能相同,500-600显示效果可能相同,700-900显示效果可能相同。

3.在fon-size中,css1中对顶2个相连的字体大小之间的比率为1.5(向上)或者0.66(向下),比如medium设置为10px的时候,larger的值为15px;?但是实际上一般默认缩放因子为1.2倍。

4.在font的设置中前面3个值可以随意替换,但是font-size以及font-family的位置不能改变,而且必须有,如果有line-height的话就必须写在font-size后面。

5.font-style font-varient font-weight font-size line-height font-family;?

[email protected] 已经在css2.1中删除了,                                                                     @font-face{font-family;微软雅黑;src:url(www.baidu.com)}? 这样写的意思就是从url的地址上面下载微软雅黑这款字体。

第六章 文本属性

?1.text-index这个属性只能应用于块级元素,不能应用于行内元素。这个属性可以继承。

2.text-align这个属性也是应用于块级元素的内联内容。?

3.line-height作用域所有元素(除了替换元素)。实际上line-height只会影响到行内元素,并不会影响块级元素。line-height和字体高度之间的差距就是行间距。line-height应用于块级元素时候,它表示的是相邻基线之间的最小距离。当文本是定义在一个行内元素的时候,基线的距离要比line-height要高,所以line-height只是定义文本基线之间一个最小的距离 ,而不是一个绝对数值

4.行内框就是元素的内容框(在其他条件没有影响的情况下),line-height可以通过增加或者减少行间距的方式来提高或者降低行内框。

5.对于块级元素来说,行间距就是等于line-height的值。line-height是相对于其本身的font-size来设定的。假设

,这时候line-height的值为20px。

6. line-height可以继承,在继承中需要注意的是最好是设置为一个缩放因子,如line-height:1.5,这样它的子级继承的是子元素本身高度的1.5倍,如果设置为line-height:1.5e(假设为20px)的话,子元素继承的是父级元素的值,若子元素font-size超过20px(如25px),这样字就会部分重叠在一起

7.vertical-align只是作用域行内元素和替换元素,不能够继承?,他的值为bottom的时候,对齐的是行框的地步,值为text-bottom的时候,对齐的是文本的底部。它的值也可以为数值(如5px),它表示的是相对之前对齐提高了5px的高度。设置图片和文字对齐的时候可以用。

8.letter-space不会受到text-align:justify的影响,而word-space会受到text-align:justify的影响。

9.white-space:normal pre等值,如果设置为pre的时候他的格式会按照我们输入的内容格式,而不会发生改变。?

第七章 基于视觉格式化

1.元素框表示包含元素内容,外边距、内边距、边这些。元素宽度指的是做内边距到有内边距的距离。

2.padding没有auto的属性,只有宽度和左右外边距有auto的属性。?

3.margin-left和margin-right设置为auto的话,会水平居中,但是margin-top和margin-bottom设置为auto的话,会默认为0,也就说不会垂直居中。让块垂直居中唯一的办法就是margin-top:25%。?

4.em框表示字体形成的框(每一个字都有其em框),有时候字形会超过em框

5.内容框就是包含了所有的em框。?

5.对于非替换元素line-height的高度就是行内框的高度,外边距、内边距、边框不会对非替换元素的高度有影响。对于替换元素,内容框的高度就是line-height的高度,?替换元素行内框的高度等于内容框的高度+外边距+内边距+边框

6.替换元素没有行间距,因为它不会换行,但是line-height能改变其高度。

7.行框是以行作为对象来研究的,其高度是其里面的很多行内框的最高和最低决定的。?

第八章 内边距 边框和外边距

1.border-color也是有4个值,它的用法和margin是一样的,如果没有颜色,默认是前景色。不能为其设置多个样式,因为这样会导致其忽略样式。

2.透明边框,可以用border-color:transparent。?

3.这点比较特别,如果为行内非替换元素设置border属性时候,如果上下(top,bottom)宽度足够大会覆盖其他内容,但是左右2边即使宽度非常非常大都不会覆盖其他内容,这时候有点类似于padding-left或者padding-right的样式。

4.padding-left、padding-right如果用百分比去设置的话是根据其包含块的宽度设置的。?

第九章 颜色和背景

1.使用background:red url("images/2.png")? 如果背景图片有空隙,会看到红色。

2.background-position应用于块级元素以及替换元素。4个属性值 top button left right center,如background-position:top right;background-position:0% 0%;如果是用百分比的话,同时应用于图片以及元素,表示图片中心点和(元素-图片四个角而形成的矩形对齐),例子: 下图中的超人图片中心会在黄色的矩形上运行,当设置为0% 0%的时候,图片中心会和黄色左上角的地方对齐。为100% 100%时候图片中心会和黄色图片右下角对齐。?假设只提供一个值的话,第二个值默认为center。如果是数值的话,意思就是相对元素左上角开始水平偏移多少,垂直偏移多少。

?

第十章 浮动和定位

1. 浮动元素与周围元素外边距不会合并。如果浮动元素是一个非替换元素的话,必须要给他一个宽度值和高度值。

2.浮动元素会自动生成一个块级元素,而无论该元素之前是块级元素还是行内元素。

3.1 浮动元素的左右外边框不能超过父级元素的左右内边距。

3.2 浮动元素的左外边框必须在之前浮动元素的右外边框后面,除非发生了换行?。

3.3 左浮动元素和右浮动元素不会相互交叉

3.4 浮动元素的顶端不能高于其父级元素内边距顶部,

3.5 浮动元素顶部不能高于其之前的浮动元素顶部。

3.6 浮动元素顶部不能高于之前浮动元素包含快的顶部。

3.7浮动元素如果之前有一个浮动元素a的话,其左外边距不能超过?a元素包含块的右边。

3.8 浮动元素应该尽可能的高。

3.9 左浮动元素尽可能往左,有浮动元素尽可能往右。

4 浮动元素可以超过其 本身包含块的高度,所以之前一直强调不能超过其包含块的左右、上内边距,但是遗漏了说明不能超过其下内边距。

5,。如果一个元素是浮动元素,如果想让其包含块把该浮动元素的高度计算在内的话,可以选择把浮动元素变成为浮动元素。

6 负外边距能是浮动元素超过其包含块元素。

7.行内框和浮动元素交叉时候,其边框、背景、内容都在浮动元素上面,如果是块级元素和浮动元素交叉时候,其背景和边框在浮动元素下面,但是内容却在浮动元素上面。?

8.浮动元素如果如果垂直外边距设置为margin:auto 0的话,在垂直方向上会居中显示。?

第十一章 表布局

1 css内部表元素没有外边距

2 表格中每一行的高度可以设置为不一样。

?3. 如果结构不完善,html会自动添加使得结构完善, 比如缺少table,则渲染时候会自动补充

4 border-sapcing可以用来控制单元格之间的间隙。

5 empty cell可以清楚空的单元格?

第十二章? 列表与生成内容

1.系统字体关键词。caption(标题控件) icon(操作系统图标) menu(下拉菜单) message-box(对话框字体) small-caption(小控件标签字体) status-bar(窗口状态条字体)?

?2. list-type-image 可以在ul或者ol前面添加图片

3 改变list-style的那个黑点的距离可以用ul{margin-left:40px}这样来设置,默认用户代理是用40px的值?

4 list-style-position设置为inset或者outside

5.计数器,用于类似于1.1 1.12等。?

?第十三章 用户界面样式

第十四章? 非屏幕媒体

时间: 2024-07-29 12:54:00

css权威指南笔记(知识点总结)的相关文章

css 权威指南笔记

部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支持 包括ie7 特定属性选择器: css 权威指南笔记

css 权威指南笔记( 五)结构和层叠之三种样式来源

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我

css权威指南--笔记

第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet):type(text/css):media:(all(所有表现媒体, screen,print),title(配合候选使用). 3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前. 4,向后可访问性:<style><!-- 样式 -->

css权威指南笔记

替换元素和非替换元素 替换元素:用来替换元素内容的部分并非由文档内容直接表示,用作其他内容的占位符(img, 表单元素,embed等嵌入元素) 非替换元素:元素的内容内容包含在文档流中,大部分元素都是替换元素. 替换元素和非替换行内元素的区别:替换元素可以设置width.height.margin和padding:非替换行内元素不可以设置width.heigt.垂直margin和padding,可以设置水平margin和padding. 2. 候选样式表 将link标签的rel属性设置为alte

css 权威指南笔记( 五)结构和层叠

特殊性

css 权威指南笔记(二)元素

替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会填充父元素的内容区,旁边不能有其他元素,换句话说,他在元素前后生成分隔符.替换元素可以是块级元素,不过通常都不是. 行内元素 行内元素在一个文本行内生成元素框,而不会打断这行文本.可以出现在另一个元素的内容中,而不会破坏其显示. 块级元素行内元素图文 在HTML和XHTML中,块级元素不能继承自行内

css 权威指南笔记(三)结合css和XHTML

link rel stylesheet alternate stylesheet(候选样式表) title type media all screen print ..... 内联样式

css 权威指南笔记(四)选择器

规则结构 每个规则都有两个基本部分组成:选择器和声明块.声明块由一个或多个声明组成,每个声明则是一个属性-值对. 元素选择器 声明和关键字 关键字一般由空格隔开:有一种情况例外 font属性中的  斜线(/)分割 元素的字体大小和行高两个关键字. 分组 选择器分组 通配选择器 (*)css2引入 声明分组 各个声明最后使用分号: 类选择器和ID选择器 类选择器 多类选择器 各个词之间用空格分隔 不同平台的Internet Explorer 处理不同 ID选择器 属性选择器 简单属性选择器   h

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称