本文详细介绍了类选择器与id选择器的区别，类选择器用于常见样式，id选择器通常配合JavaScript使用。通配符选择器虽然能设置所有标签样式，但大型项目中因其性能消耗而较少使用。字体和文本样式方面，讨论了font属性的设置，包括字体大小、粗细、样式和家族，并提到了层叠和连写规则。总结了在实际开发中的最佳实践。
#博学谷IT学习技术支持#
一、类选择器与id选择器的区别
class类名与id属性值的区别：class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值。
类选择器与id选择器的区别：类选择器以.开头；id选择器以#开头。
实际开发的情况:类选择器用的最多,id一般配合js使用，除非特殊情况，否则不要使用id设置样式，实际开发中会遇到冗余代码的抽取问题，可以将一些公共的代码抽取到一个公共的类中去。
二、通配符选择器
结构：* {css}
作用：找到页面中所有的标签，设置样式
注意点：针对于大型的项目，一般不会使用通配符选择器，可能会比较消耗浏览器的性能；之后可能在基础班的小页面中去除标签的默认margin和padding。
三、字体和文本样式
1.字体样式
字体大小：font-size
取值：数字 + px，px：像素
字体粗细：font-weight
取值： 关键字：正常normal、加粗bold
纯数字：正常400、加粗700
字体样式：font-style
取值：关键字：正常normal、倾斜italic
字体类型：font-family
取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体类型；具体字体名称："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……；字体系列名称：sans-serif、serif、monospace等……
渲染规则：1、从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体；2、如果都不支持，则显示最后设置的字体系列的默认字体。（window：微软雅黑。mac：苹方）
样式的层叠问题：如果给同一个标签设置了相同的属性，此时样式会覆盖（层叠），写在最下面的会生效。
font属性的连写问题：
1、顺序问题：font: style weight size family（稍微舒服：swsf）
2、省略问题：只能省略前两个，如果省略了相当于设置了默认值；省略的覆盖问题：如果需要同时设置单独的属性和连写形式，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面。
总结：未完待续哦
扫一扫
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
