搜索
您的当前位置:首页正文

css权威指南--笔记

2023-11-28 来源:莱芜美食

第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的浏览器能正常读取样式表。

5,css注释:/* */。

第2章 选择器

1,对声明分组时,一定要在各个声明的最后使用分号。

2,p.warming.help {background:red;} 只匹配class包含warming和help的p元素,如果p包含warming和其他的则不能匹配。

3,实际上,浏览器并不检查html中id的唯一性,但这会导致编写dom更困难。

4,属性选择器:h1[class] {...}

h1[class=''] {...}完全匹配

h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素

*[lang|='en']特定属性选择器,会选择lang属性等于en或以en-开头的所有元素。

5,选择子元素:h1>strong;选择相邻兄弟元素h1+p(h1和p有共同父元素,最终选择p)。

6,链接伪类:未访问链接:link,访问过链接:visited(它们都是静态的),等同于。

动态伪类:焦点:focus,鼠标停留:hover,激活:active。(动态伪类可以用于任何元素)

建议伪类顺序:link-visited-focus-hover-active。

选择第一个子元素(:first-child),很容易误解,是所有第一个子元素(在下面例子中,作为第一个子元素的元素包括第一个p,第一个li和strong及em)。

 1 
2

helooo

3 4
  • 111
  • 5
  • 222
  • 6 7

    8 333 9

    10

    根据语言选择(:lang()),如*:lang(fr){color:red;} 这是将所有法语元素变成红色。

    伪元素选择器:首字母:first-letter,用户代理动态构成假象元素

    第一行:first-line;

    之前和之后:before :after。

    第3章 结构和层叠

    1,实际上,所有样式冲突的解决都是由层叠来处理。

    选择器的特殊性:id选择器(0,1,0,0);类 属性 伪类(0,0,1,0);各个元素和伪元素(0,0,0,1);通配选择器(0,0,0,0);内联样式(1,0,0,0)。

    重要性:!important放在声明的结束分号之前。

    2,例外:应用到body元素的背景样式可以传递到html元素(html是文档的根元素),相应的可以定义其画布。

    大多数框模型属性都不能继承(包括外边距 内边距 背景 边框),继承的值没有特殊性,0特殊性比无特殊性要强。

    3,声明权重由大到小:读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明。

    通过将伪类链接在一起,可以缓解特殊性和顺序带来的问题。

    第4章 值和单位

    1,函数式rgb颜色:rgb(color),color用一个百分数(0%-100%)或者整数三元组(0-255)表示。

    十六进制rgb颜色:将三个介于00-FF的十六进制数连起来,就可以设置一种颜色。

    web安全颜色:在256色计算机系统上总能避免抖动的颜色。rgb值20%和51的倍数,0% 0也是,十六进制值00,33,66,99,cc,ff。

    2,绝对长度单位:in cm mm pt pc。

    相对长度单位:1个em定义为一种给定字体的font-size值(这个值随元素的不同而不同),ex指所用字体中小写x的高度,px非常适合用于度量图像大小(一小网格就是1像素)。

    3,a{color:inherit}可以让链接使用继承的color值而非用户代理的默认样式。

    4,角度值:度(deg),梯度(grad),弧度(rad),都允许度数。

    时间值:ms,s,不允许负值。

    频率值:Hz,MHz,不允许负值。

    小编还为您整理了以下内容,可能对您也有帮助:

    CSS权威指南的内容简介

    《CSS权威指南》(第3版)是著名的CSS专家EricA.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发表了看法。你所要知道的就是HTML4.0的知识,这样就可以创建整洁、易于维护的脚本,以与桌面出版系统同样的优雅和控制能力管理网站布局和分页。你将会学到:·精妙地设计文本风格·用户界面、表格布局、列表以及自动生成的内容·浮动和定位的细节·Fontfamilv和Fallback机制·盒模型(boxmodel)的工作机制·IE7、Firefox及其他一些浏览器所支持的最新CSS3的选择器(selector)经过彻底地更新,新版的《CSS权威指南》已经适用于IE7。它详细讲述TESS的各个属性,告诉你怎样同其他属*互,怎样在编写CSS时避免常见的错误。不管你是一个有经验的Web开发人员还是一个彻底的初学者,这《CSS权威指南》(第3版)都是你的CSS学习源泉。

    CSS权威指南的内容简介

    《CSS权威指南》(第3版)是著名的CSS专家EricA.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发表了看法。你所要知道的就是HTML4.0的知识,这样就可以创建整洁、易于维护的脚本,以与桌面出版系统同样的优雅和控制能力管理网站布局和分页。你将会学到:·精妙地设计文本风格·用户界面、表格布局、列表以及自动生成的内容·浮动和定位的细节·Fontfamilv和Fallback机制·盒模型(boxmodel)的工作机制·IE7、Firefox及其他一些浏览器所支持的最新CSS3的选择器(selector)经过彻底地更新,新版的《CSS权威指南》已经适用于IE7。它详细讲述TESS的各个属性,告诉你怎样同其他属*互,怎样在编写CSS时避免常见的错误。不管你是一个有经验的Web开发人员还是一个彻底的初学者,这《CSS权威指南》(第3版)都是你的CSS学习源泉。

    Css权威指南(4th,第四版中文翻译)-8.Padding,Borders,Outlines,Margins

    在上一章节,我们讨论了元素显示的基本特点。而在这一章,我们将看到css属性是如果改变元素显示外观的,这包括了padding,border,margin。

    众所周知,所有的document元素都会生成一个长方形的box来布局,称为元素box,而且这个box是具有排他性的,同一个区域是不允许有多个box交叠的。这就是前端最熟悉的盒模型:

    一般来说,这里说的宽度和高度指的都是上面图中inner edge的宽和高。而这两个属性最重要的一点就是它们不作用于inline的不可替代元素。举例来说,

    如果你给链接设置了宽高,那么浏览器就会忽略这些声明:

    在盒模型中,从里到外的第2层就是padding:

    该属性接受任何的长度值,包括百分比。例如:

    从上图中我们发现,padding也是在背景的覆盖范围的。

    默认来说,元素是没有padding的。但一般情况下我们还是希望有padding的,不然border有时候看起来就离内容太近了:

    另外padding是由方向的设置顺序的,来看下:

    而且每个方向上,你所用的长度单位都可以是不一样的,举个列子:

    有时候你会碰到相同的padding数值,例如

    这可以简化为:

    这是怎么实现的呢?其实在CSS内部定义了一套规则:

    换句话说,如果只给了三个值,那么第四个left就会拷贝right的值。如果只给定2个值,那么第三个拷贝第一个,第4个拷贝第二个。如果只给了一个值,那么所有值都从它身上拷贝。

    这个属于大家非常熟悉的部分了:

    百分比的计算核心在于标准的确定,在padding中,其标准就是父元素的内容区域的宽度。举个例子:

    设置百分比的padding存在一个问题,就是当父元素未设置宽度,而且随着浏览器会变化宽度的情况,那么这个padding的宽度也会跟着一起变动。

    如果对一个inline元素施加padding是不会改变元素的高度的,例如:

    这是因为对于不可见的背景情况下,padding是被设置为透明的,所以上面的声明不会改变行高。但如果设置了背景,情况就不一样了:

    上面我们看到了处理padding top和bottom的情况,但是left和right的padding有点不同。如果对inline元素设置了left和right的padding是有效果的:

    那如果inline元素跨行了会怎么样呢?

    很自然的,left作用于开头,而right作用于结尾。

    我们还是拿图片来举例,试着为图片添加padding:

    不管可替换元素是block的还是inline的,这一padding都会加上,如下图所示:

    在padding外面一层的为border,默认来说,background的颜色的边界就是在border这层。而每个border都有三部分组成:宽度,厚度和样式。对于宽度来说,默认值为medium,一般来说是2px。但有没有发现平常我们很少注意到,每个元素的border宽度已经设置好了?那是因为border的样式默认设置为none,所以我们压根看不到。最后来说说border默认的颜色,就是它的前景色(foreground color)。

    另外刚说了背景区域到border位置,但是到border的内边界还是外边界没说。其实按照CSS的标准定义,这个需要扩展到外边界,因为有些border是dotted的。

    border的样式是最重要的,因为你不设置,它就压根不出来。

    CSS中定义了10中不同的样式,包括默认的none,列举如下:

    其中最难搞得就是double,border样式为两行,而其中的空白的宽度就是border-width的宽度。而且CSS标准中并没有规定两条线的粗细的标准,都依赖浏览器去实现。

    下面来看看另外需要颜色的border类型:inset,outset,groove,ridge

    默认来说,border的颜色是基于元素的颜色。但是颜色的变化又得完全依赖浏览器去实现,来看看不同的实现:

    在border-style属性中是允许同时定义多种border的:

    这样设置的结果是什么呢?那就是top border为solid,right border为dashed, bottom border为dotted ,left border为solid。就像之前定义的padding一样。

    来看个具体的例子:

    如果想要设置单侧的样式,可以使用下列的一系列属性:

    来看个具体的例子,设置h1三边包围:

    上面需要注意的是,针对第二种方案,必须将border-left-style样式放在后面,不然就会被后者替换。

    设置完style后,接下来就需要设置宽度width:

    对应的单侧的设置为:

    总共有4种方式来设置border的宽度,可以是像4px这样的数值,也可以是另外3个关键词(thin,medium,thick)。但要注意这三个关键词没有对应具体的数值,按照CSS标准,只要层层加厚就可以,依赖于浏览器实现。

    我们假定一个段落p有个背景色和border style

    border的width默认为medium,我们将其修改下:

    来玩个极限的,将宽度设置为50px:

    当然也可以设置单侧的宽度:

    想要去掉border非常简单:

    哪怕设置了宽度,如果style被设置为了none,那么border也不会显示,那这是为什么呢?这是因为如果将style设置为none,那么CSS就会将其视为是不存在的,然后自动将其宽度设置为0,无论你自己定义了什么。就像一个杯子已经空了,那么再来描述他是半满的是没有任何意义的。

    这一点为什么重要呢,因为很多人容易忘记来声明一个border的样式。例如:

    来看个颜色的示例:

    当然也可以为不同的side设置不同的颜色:

    如果没有设置颜色,那么就会获取当前元素的前景色:

    当然也可以设置单侧的border颜色:

    就像我们上面提到的,如果border没有style,那么久没有宽度。那如果碰到需要设置宽度但是border又不可见的情况怎么办?答案是将颜色设置为transparent。例如:

    试想下这种情况,如果要针对某一边添加widith,style和color。如果单独设置的话其实还是蛮麻烦的:

    但如果可以简化的话,那就方便很多了:

    针对每个side属性的简化顺序为:

    完全可以按照上面的定义来设置更复杂的border设置:

    而且这些值得顺序也是不用担心的,下面的规则和上面的是一样的:

    另外值得注意的是,在简化版中避免重复的类型值,比如两个width等:

    这会导致浏览器直接忽略这条规则。

    现在我们回到border属性本身:

    来看看怎么用的吧:

    这个会自动应用到每个方向上:

    inline元素之前已经讲了很多了,现在主要简单讲几个需要注意的点。

    首先就是不论border设置的width多厚,inline元素的line height都不会改变:

    top和bottom的border是不可以的,但是left和right都是可以的:

    而对于可替换元素来说,border是会影响行高的:

    为了支持圆角的边框,border引入了border-radius属性来设置:

    如果想要实现边角的圆角过渡,可以如下设置:

    如果给定的是一个百分比值,那么结果很可能就是一个椭圆,因为长宽的基准值不一样:

    另外,跟其他元素一样,border-radius也可以设置多个值,位置从左上沿顺时针到底部左侧。

    而参数个数为3个的时候也是一样的,第4个参考第2个:

    而在上图中重点到不是边角,而在于内容区域的右下角也发生了圆滑过渡,这是因为内容区域的背景和padding的背景不同所致,我们将在后面一章中详细讨论。

    border-radius在原理上修改的是border和background的渲染,而不是盒子模型本身,来具体看下:

    刚刚我们看到了设置单个值得情况,那如果设置2个值会怎么样呢?如果我们想要在水平方向设置3英寸,而在垂直高度设置1英寸。我们不能直接这样写:

    因为这样我们会将左上,右下对角线一个宽度,而右上和左下对角线有一个宽度。而是应该使用:

    而这相当于下面的表达式:

    下面是一个简单的例子:

    接下来来个更复杂的:

    不同的颜色和样式在角的位置的渲染效果是不同的:

    上面第一个是简单的圆角,第二个在厚度上出现了变化。第三个颜色和厚度是一样的,但是角的曲线从solid变成了double。而且样式间的过渡被阻断了。第四个我们把厚度和样式做了改变。第5第6个开始出现颜色的变化,但是都是直接的改变而没有渐变。而第七种情况则是厚度相同,颜色发生渐变,但是可以看到,只有外侧发生了变化,而内侧还是直角,示例如下:

    值得注意的是,这次是不同在水平和垂直方向加/的,来看下:

    上面两个是一样的。

    如果你想要使用一张图片来作为border,那么可以使用border-image-source:

    让我们使用一张单个圆点的图片作为border背景:

    这里需要注意几个地方,如果没有定义border:25px solid; 按照之前的说法,没有style,border其实默认是不显示的。另外就是border-width其实就是后面border图片的宽度。

    那令人奇怪的是,为什么图片只出现在角落里,边上为什么没有,而这就需要用到下面这个属性了:

    slice也是接收4个值,完全遵从top,right,bottom, right的CSS默认赋值流程,而且数值也是基于百分比的值。

    我们就以3 x 3 的网格图为例来看下效果:

    注意到中间的一块空了,这是因为css中自动把中间的内容设置为empty,具体会在后面讲解原理。

    slice属性的不同百分比对应不同的边缘裁切效果:

    这就是我们为什么选取3 x 3网格图的原因,可以清晰的看到裁剪后的边框效果。除了上面的百分比,我们也可以使用数字,一般对于栅格图来说就是像素值,来看个例子:

    回到之前的中心空白问题,这其实可以通过fill来填充回来:

    而且从效果上来说会覆盖到其他的背景元素之上,因此可以作为背景的替代。

    同时之前我们看到的宽度都是相同的,而其实可以为border的4个方向设置不同的宽度,然后border-image会自动匹配到对应宽度:

    如果想要自己来设置border图片的宽度,可以使用border-image-width:

    border-image-width其实和border-image-slice差不多,而不同的是前者就是border box本身。为了更好理解这个意思,我们假定宽度设置为1em:

    其示意图如下:

    边框都是1em宽,那么如果来填充呢,这里涉及多个属性,由border-image-slice生成的图片要经过border-image-repeat的处理,然后显示在border-image-width定义的盒子里面。

    《CSS权威指南(第三版)》epub下载在线阅读,求百度网盘云资源

    《CSS权威指南(第三版)》([美] Eric A.Meyer)电子书网盘下载免费在线阅读

    链接:https://pan.baidu.com/s/1QqfhaRg5o59jYuyrpqoBbw

    提取码:hfib

    书名:CSS权威指南(第三版)

    作者:[美] Eric A.Meyer

    译者:侯妍

    豆瓣评分:8.5

    出版社:中国电力出版社

    出版年份:2007-10

    页数:508

    内容简介:

    你是否既想获得丰富复杂的网页样式,同时又想节省时间和精力?本书为你展示了如何遵循CSS最新规范(CSS2和CSS2.1)将层叠样式表的方方面面应用于实践。

    通过本书提供的诸多示例,你将了解如何做到仅在一处建立样式表就能创建或修改整个网站的外观,以及如何得到HTML力不能及的更丰富的表现效果。

    资深CSS专家Eric A.Meyer。利用他独有的睿智和丰富的经验对属性、标记、标记属性和实现做了深入的研究,另外在浏览器支持和设计原则等实际问题上也有独到的见解。你所需要的就是HTML 4.0的知识即可以为网站布局和分页创建简明而且易于维护的脚本,同时兼具桌面系统的美观性和可控性。在本书中你将学到以下内容:

    ·用多种方式对文本应用样式

    ·用户界面、表布局、列表和生成内容

    ·浮动和定位的优缺点

    ·字体系列和后路

    ·框模型的工作原理

    ·IE7、Firefox和其他浏览器支持的新CSS3选择器

    最新版《CSS权威指南》一书经过全面更新,涵盖了Internet Explorer 7,详细介绍了各个CSS属性以及属性之间的相互作用,并指导你如何避免一些常见的错误。不论你是一位经验丰富的web创作人员,还是一无所知的新手,都可以把它作为内容翔实的CSS参考资料放在手边。Eric A.Meyer。在HTML、CSS和web标准领域是国际上公认的专家,他从1993年就开始从事web方面的工作。他也是complex spiral consulting公司的奠基人,其客户包括美国在线、苹果计算机公司、富国银行和Macromedia等著名公司。

    莱芜美食还为您提供以下相关内容希望对您有帮助:

    CSS权威指南的内容简介

    《CSS权威指南》(第3版)是著名的CSS专家EricA.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发表了看法。

    Css权威指南(4th,第四版中文翻译)-8.Padding,Borders,Outlines,Margins...

    总共有4种方式来设置border的宽度,可以是像4px这样的数值,也可以是另外3个关键词(thin,medium,thick)。但要注意这三个关键词没有对应具体的数值,按照CSS标准,只要层层加厚就可以,依赖于浏览器实现。 我们假定一个段落p有个背景色和bor...

    css中p标记是行内元素还是块级元素 急需呀!!!

    CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时...

    CSS中什么是块级元素?

    一、块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;...

    《CSS权威指南(第三版)》epub下载在线阅读,求百度网盘云资源_百度知 ...

    链接:https://pan.baidu.com/s/1QqfhaRg5o59jYuyrpqoBbw 提取码:hfib 书名:CSS权威指南(第三版)作者:[美] Eric A.Meyer 译者:侯妍 豆瓣评分:8.5 出版社:中国电力出版社 出版年份:2007-10 页数:508 ...

    《HTML5与CSS3权威指南(第2版·下册)下册》epub下载在线阅读全文,求百 ...

    链接:提取码:OFCF 书名:HTML 5与CSS 3权威指南(第2版·下册)作者:陆凌牛 豆瓣评分:7.6 出版社:机械工业出版社华章公司 出版年份:2013-3-31 页数:264 内容简介:第1版2年内印刷近10次,累计销量超过50000册...

    求推荐html到css到js相关的书籍

    第一本,入门《Head first HTML&CSS》最好的入门书。看两遍就对HTML & CSS 有个大概印象了。此时把w3cschool作为备查手册收藏起来 第二本《CSS权威指南(第三版)》最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就...

    CSS权威指南翻译的是哪本书

    《CSS权威指南》(第3版)

    web前端推荐书籍有什么??

    入门建议看看w3cschool就行了;《Head First HTML与CSS(第2版)》Head First 系列的图书以图画和问答题为主,并不是枯燥的文字理论堆砌,所以对于初学者十分友好,能激发学习的兴趣,属于html\css的书籍。买书的话个人觉得...

    初学前端有什么推荐的书籍

    三、《CSS权威指南》内容介绍:《CSS权威指南》通过诸多示例,详细讲解了如何做到仅在一处建立样式表就能创建或修改整个网站的外观,以及如何得到html力不能及的更丰富的表现效果。同时展示了如何遵循css最新规范(css2和css2....

    Top