当前位置: 首页 > Web前端 > CSS

《CSS设计指南》读书笔记

时间:2023-03-30 15:00:54 CSS

前言代码网址:http://www.stylinwithcss.com/第一章HTML标记与文档结构1.html的含义HTML标记内容的目的是赋予网页语义。就是给你的网页内容一个某种用户代理(useragent)可以理解的含义。用户代理:浏览器、为视障用户阅读网页的屏幕阅读器,以及来自搜索引擎的网络爬虫都是需要显示、阅读和分析网页的用户代理。2.结束标签和自闭标签的区别结束标签包含实际要显示的内容,而自结束标签只是给浏览器提供一个要显示内容的引用。当加载HTML页面时,浏览器会向服务器发送一个额外的请求,以获取自关闭标签所引用的内容。3.alt属性的作用视障用户使用的屏幕阅读器会大声朗读alt属性的内容,因此需要在alt属性中加入人们一眼就能看懂的内容(或一目了然)标签。4、搜索引擎关键词来源title>h15。段落的作用段落用于标记主要的文本内容,是所有文本元素中出现率最高的段落。简而言之,任何不适合其他文本标签的文本都可以放在段落中。6、的意思是简化的DOCTYPE。这一行是为了声明:“以下是一个HTML文档。”7.html标签标签,也就是所谓的根级标签,标签只有两个直接子标签:和。8、head标签帮助浏览器理解页面的信息包含在标签中。9.焦点无论你想了解哪个HTML元素,首先要问的问题应该是:它是块级元素还是内联元素?元素?知道了这一点,您就可以编写标记以预期元素在其初始状态下的定位方式,这样您就可以更进一步,弄清楚将来如何使用CSS重新定位它。10.Blockquote引用,使用cite标签包含作者姓名。11.关于domDOM是一个文档对象模型,它从浏览器的角度观察页面中的元素和每个元素的属性,从而推导出这些元素的家谱2019.01.20看完本书第一章,感觉大部分已经明白了,但也有收获。补充:html实体字符:http://www.w3school.com.cn/html/html_entities.asp第二章css工作原理1.样式表样式表:扩展名为.css的文本文件2.@import指令中的方法链接样式表中其他样式表:@import指令如:@importurl(css/styles2.css)需要注意的是@import指令必须出现在样式表中其他样式之前,否则引用的样式表@import不会被加载。3.css选择器上下文选择器1)A,B同时选择元素A和B2)AB选择以A为祖先(父)元素的B元素3)A>B选择以A为父元素的元素(Ancestor元素是不算)B元素4)A+B选择A后面紧跟(中间没有其他元素)的第一个B元素5)A~B选择元素中紧跟(不是紧跟)AB元素的所有兄弟6)通配符:*p*{color:red;}只会将p包含的所有元素的文本变成红色。这个选择器有一个很有意思的用法,就是用它来组成一个非子选择器,比如:section*a{font-size:1.3em;}任何一个是section的孙元素但不是子元素的a标签将被选中。a的父元素是什么并不重要。b.类选择器这里span标签mayormaynotbestyled.

同时选择两个类名的元素,可以这样写:`.specialtext.featured{font-size:120%;}`请注意,CSS选择器的两个类名之间没有空格,因为我们只想选择具有两个类名的元素。如果添加一个空格,它将成为“祖先/后代”关系的上下文选择器。为每个类名使用HTML类属性是一个常见的错误。正确的做法是像上面代码一样只使用一个class属性,但是给它设置多个值(没看懂,不过感觉是重点,估计后面会有说明)C。ID选择器BiographyBiography#在href中表示该链接的目标在当前页面,所以浏览器不会被触发加载页面(如果没有#,浏览器会尝试加载bio目录下的默认页面)。当用户点击上一个链接时,页面会滚动到ID值为bioLocation的h3元素。如果链接的href属性中只有一个#,点击链接会回到页面顶部。那么返回顶部的代码可以写成BacktoTop注意:如果不知道某个href应该放什么URL,也可以用#作为占位符,但不能将此属性留空。因为具有空href属性值的链接与普通链接的行为不同。这样,将来团队中的其他人可以用中间层(如PHP)变量替换#以从数据库动态接收URL。总结:什么时候用ID,什么时候用classID的作用是在一个页面中唯一标识一个元素,每个ID名在一个页面中只能使用一次。后面的读者会发现,我经常在页面中的每个顶级区域都加上一个ID,从而得到一个非常清晰的上下文,这样在写CSS的时候,只选择嵌套在相应区域的标签。(mark一下,后面注意)类的作用是标识一组具有相同特征的元素,每个类可以被多个元素使用。避免Web开发专家JeffreyZeldman所说的“类泛滥——标记麻疹”。这意味着什么?也就是说,你不需要像使用ID一样为每个类指定不同的类名,然后为每个类编写规则。如果您确实随意使用类,那么您可能就像大多数不了解继承和上下文选择器功能的充满热情的CSS初学者一样。因此,您可能会为每个标签重复编写相同的样式(例如为页面中的多个标签指定相同的字体)。事实上,继承和上下文选择器允许不同的标签共享样式,减少您需要编写和维护的CSS量。e.属性选择器1)属性名称选择img[title]{border:2pxsolidblue;}带有html的title属性img元素,title属性的值是多少并不重要。小知识:如果图像由于某种原因无法加载或无法被屏幕阅读器朗读,alt属性中的文本将被显示。当用户将鼠标移到图像上时,title属性将显示包含相应文本的提示。2)属性值选择img[title="redflower"]{border:4pxsolidgreen;}。只有当图片的title属性值为redflower时,才会给图片添加边框。F。伪类和伪元素之前已经总结过了,结合这本书的新知识,我们再来回顾一下。https://segmentfault.com/a/1190000018001646伪类和伪元素4.关于colorcolor属性设置前景色(?)。前景色影响文本和边框,但人们通常只用它来设置文本颜色。2019.1.21今天一直忙着生活中的事情,一堆乱七八糟的事情,烦心事。晚上做了个蛋挞,也翻车了==。但是做蛋挞的时候我很开心,因为总觉得会有甜脆软滑的蛋挞,可以吃到隔壁爱哭的孩子们的蛋挞。有良好的期望总是让人充满动力!!2019.1.24多看了一点,记录一下。