常用CSS样式

常用CSS样式

CSS：层叠样式表

可以给结构的每一层设置样式

学习CSS的三步骤

CSS的书写位置

内联：直接写在html的标签里写在style

优点：不用额外的选中标签，哪里需要就直接在style里添加即可

缺点：

1、结构和样式耦合了，导致标签冗余，不清晰，不简洁

2、不方便复用

3、优先级太高，不方便后期修改

总结：不推荐使用，只有不常修改的或很简单的样式才使用

内部：在html文件中添加一个style标签，在style中使用CSS样式，一般在head标签内书写

优点：

1、结构和样式分开了，使代码变得简洁明了

2、方便后期修改

缺点：

1、html结构和CSS样式放在同一个文件里，CSS随着html的代码增多后，后期不方便维护

2、同当前文件可复用，无法影响到其他页面(其他文件无法引用此文件的CSS样式)

总结：如果当前文件样式，其他文件用不到时(不会复用时)，也可以使用；

样式代码不多时也可以使用

外部引用：link的href引入 .css文件

方便复用

所以推荐复用

CSS较为常用的选择器

标签选择器

语法：标签名 {}

作用：选中所有的标签名的样式

注意：由于常用标签就那么多，使用标签选择器时要慎重，防止影响到其他同类标签的样式

id选择器

语法：#id属性值{}

作用：选中对应id属性值的结构

注意：

1、不能以数字开头，不能重复，不为汉字

2、建议给外侧不重复的框架，使用id

class选择器

语法：.class属性值{}

作用：选中对应的class值的结构

注意：

1、和id选择器相似，但属性名可以重复

2、使用class属性值，最好配合关系选择器使用，减少冲突

通配选择器

语法：*{}

作用：选中当前html文件中所有的标签

注意：

1、一般情况下，用来设置公共样式的

2、用来去除默认样式

去除默认样式的原因：保证各个不同浏览器的兼容问题

CSS的具体样式

拓展：图片的格式

JPEG(JPG)格式

支持颜色多，可以压缩，不支持透明，一般用于保存颜色丰富的图片

GIF格式

支持动图，支持颜色少，只支持简单透明，图片颜色单一或动态图可以使用

PNG格式

支持颜色多，支持复杂的透明，不支持动图，可以用来显示颜色复杂的透明图片

专门为网页而生的

缺点：占用内存大

webp

谷歌推出的专门用来表示网页的一种格式

拥有其他图片格式的所有优点，而且文件格式还小

缺点：对于除谷歌浏览器外的浏览器兼容性不太好

base64

将图片转化为字符(base64编码)，通过字符形式来引入

一般是需要和网页一起加载的图片才会使用base64

svg

矢量图，放大不会变形