进击的前端之初识CSS

CSS介绍

• CSS：层叠样式表（Cascading style sheets）
• CSS的作用：给页面的HTML标签增加修饰

基础选择器

选择器作用

选中页面中对应的标签，方便后续样式的统一管理

标签选择器

结构：标签名 {css属性名: css属性值; }

作用：页面中所有的这类标签，设置样式。

注意：标签选择器是一类标签，不是单独的一个标签，无论嵌套多深，都能找到对应的标签。

类选择器

结构：.类名{css属性名: css属性值;}

作用：页面中所有带这个类名的标签，设置样式。

注意：一个标签可以同时有多个类名，类名之间以空格隔开。类名可以重复，一个类选择器可以同时选中多个标签

id选择器

结构：#id属性值{css属性名: 属性值;}

作用：页面中所有带这个id属性的标签，设置样式。

注意：一个标签上只能有一个 id 属性值。一个 id 选择器只能选中一个标签。在一个页面中是唯一的，不可重复的。

通配符选择器

结构：* {css属性名: 属性值;}

作用：页面中所有的标签，设置样式。后续用来修改默认的margin和padding

字体和文本的CSS介绍

• 字体大小：font-size:1px
• 字体粗细：font-weight:bold/normal/100
• 字体样式：font-style:normal/italic(倾斜)
• 字体系列：font-family:Microsoft YaHei等
• font的符合属性：font: style weight size family(只能省略前两个)
• 文本缩进：text-indent:1px
• 文本对齐方式：text-align:left/center/right
• 文本修饰：text-decoration:underline(下划线)/none(无装饰线)