CSS学习Day01——基础概念，选择器与字体文本样式

一、CSS基础

1.CSS的语法规则

CSS写在style标签中（head标签里，title标签下）

CSS的常见属性：

属性名	作用
color	字体颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

CSS的位置：

CSS的语法相较于HTML要规范许多 ，标点符号必须是英文，且每行最后要加上分号

2.CSS的引入方法

• 内嵌式：写在style标签中（style标签可以写在任意位置，但通常写在head标签中）
• 外联式：写在一个单独的.css文件中
• 行内式：写在标签的style属性中（配合js使用）

 外联式

1.在单独的.css文件中书写代码

2.使用link标签将新写的.css文件与原文件链接

即可完成：

3.行内式

直接在html文件的标签中添加style属性即可

二、基础选择器 

选择器的作用：找到对应标签，方便后续进行设置 

1.标签选择器 

• 结构：标签名{属性名: 属性值; }
• 作用：通过标签名，找到所有相应的标签进行设置 

标签选择器只能选中一类标签，无法选中单独的标签 

2.类选择器

• 结构：.类名{ 属性名: 属性值; }
• 作用：找到所有带有相应类名的标签进行设置

什么是类名：

• 所有标签上都带有class属性，class属性的属性值就是类名
• 类名可以由数字、字母、下划线和中划线构成，但不能以数字或中划线开头
• 一个标签可以同时有多个类名，类名之间以空格隔开
• 类名可重复  
• 

 3.ID选择器

• 结构：#ID属性值{ 属性名:属性值; }
• 作用：找到所有带有相应ID属性值的标签进行设置

什么是ID属性值：

• 所有标签上都带有ID属性值
• ID属性值不可重复
• 一个标签上只能存在一个ID属性值 

4.通配符选择器 

• 结构：*{ 属性名:属性值;}
• 作用：找到所有标签进行设置
• 实际使用极少

三、字体与文本的相关样式 

1.字体大小 

• 属性名：font-size
• 取值：数字+px（谷歌浏览器默认大小为16px） 

2.字体粗细 

• 属性名：font-weight
• 取值：100~900的整百数
• 通常取值直接使用两种关键字normal（400）和bold（700） 

3.字体倾斜 

• 属性名：font-style
• 取值：normal（正常）和italic（倾斜） 

4.字体系列

• 属性名：font-family
• 取值：具体字体1，2，3，4…… ，字体系列
• 渲染规则：从左到右查询，若未安装当前查询字体则显示下一个字体，若全部字体均为安装则显示最后字体系列的默认字体

5.font相关属性的连写 

• 属性名：font
• 取值顺序：style、weight、size、family
• 若要省略只能省略前两个，后两个不能省略
• eg：font: italic 700 30px 宋体，隶书，微软雅黑, sans-serif 

6.文本缩进

• 属性名：text-indent
• 取值：数字+px或数字+em（1em等于当前标签一个字体的大小） 

7.文本水平对齐 

• 属性名：text-align 
• 取值：left、center、right（左中右对齐）

最终效果 

8.文本修饰 

• 属性名：text-decoration
• 取值 ：underline（下划线）、line-through（删除线）、overline（上划线）、none