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

CSS基础_0

时间:2023-04-05 16:13:40 HTML5

第一章CSS内联样式介绍(不推荐)可以将css样式写到元素的style属性中,也可以直接将style写到style属性中。这种样式称为内联样式。内联样式仅适用于当前样式。元素中的内容有效,内联样式不方便重用。内联样式属于结构和性能的耦合,不方便后期维护。不推荐(强烈推荐)的样式选择器也可以把css样式写到head的style标签里,把样式表写在style标签里,然后通过css选择器选择指定的元素,然后给这些设置样式元素,以便样式可以进一步重用。也可以将样式表写入style标签中性能和结构进一步分离,这也是我们推荐的使用方式第2章,外部样式表也可以将样式表写入外部css文件,然后使用链接标签将外部css文件导入当前页面,这样外部文件中的css样式表就会应用到当前页面。将css样式统一写到外部样式表中,将结构和表现完全分离,使样式表可以在不同的页面使用,最大化样式的复用,将样式统一写在样式表中,然后通过引入link标签,可以利用浏览器的缓存来加快用户访问速度,提升用户体验,所以开发中最推荐的方式是外部css文件语法:第三章CSS基本语法css注释类似于HTML注释,只是必须写在style标签中,或者写在css文件中css语法:选择器声明块选择器:选择器中的指定元素页面可以通过选择器进行选择,声明块中的样式应用到选择器对应的元素上声明块:生命块紧跟在选择器后面,用一对{}括起来,声明块实际上是一组名值对结构,这组名值对称为声明。多个声明可以写在一个声明块中,并在多个声明之间使用;单独的声明在样式名称和样式值之间使用:连接第四章,内联和块元素块元素和内联元素div是块元素所谓块元素就是占据一行的元素,不管它的内容有多少,都会占据一整行p,h1-h6,br都属于块元素div这个标签没有语义,是一个纯块元素,不会给里面的元素设置任何默认样式div元素主要用来布局页面:span是一个内联元素(inlineelement)所谓内联元素是指只占自己大小,不占一行的元素常见的内联元素:一个imgiframespanspan没有任何语义,而span标签专门用于选择文本,然后为文本设置样式块元素主要用于页面布局,内联元素主要用于选择文本和设置样式。一般只用块元素来包含行内元素,不会用内联元素来包含块元素a可以包含除自身以外的任何元素p元素不能包含其他块元素第五章,css公共选择器CssCommonSelector:csscommonselectorforallon页面P元素,设置一个字体颜色为红色元素选择器功能:可以通过元素选择器选择页面中所有指定的元素语法:标签名{}id选择器——通过元素的id属性值选择唯一一个元素-语法:#id属性值{}类选择器-通过元素的class属性值选择一组元素-语法:.class属性值{}选择器分组(联合选择器)——通过选择器分组,可以同时选择多个选择器对应的元素——语法:选择器1、选择器2、选择器N{}通用选择器——可以用来选择页面上的所有元素语法:*{}为类??p3span的元素设置背景色为黄色的颜色复合选择器(交集选择器)-功能:-可以选择同时满足多个选择器的元素-语法-选择器1选择器2选择器N{}我们可以为元素设置类属性。class属性与id属性类似,只是class属性可以重复具有class属性值的元素。我们说它们是一组可以同时是一个元素的元素。设置多个类属性值,以空格分隔