CSS选择器文本字体段落属性及引入方式

1.CSS基础

1.1语法规范

主要由2个部分构成：选择器以及一条或多条声明

• 选择器用于指定css样式的html标签，花括号内是对该对象设置的具体样式

• 属性和属性值以“键值对的形式出现”

• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

• 属性和属性值之间用英文"":"分开

• 多个键值对之间用英文";"进行区分

1.2 CSS代码风格

1.样式格式书写(分行)

2.样式大小写(小写)

3.空格规划

1)属性值前面，冒号后面，保留一个空格；

2)选择器(标签)和大括号中间保留空格

h3 {
   color: pink;
   front: 12px;
}

2.CSS选择器的作用

2.1选择器作用

根据不同需求把不同的标签选出来就是选择器的作用。(选择标签)

<div>
    我是div
</div>
<ul>
    <li></li>
</ul>

2.2选择器分类

选择器分为基础选择器和复合选择器两大类

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

2.3标签选择器

用html标签名称作为选择器

2.4类选择器

类选择器口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用

结构需要用class属性来调用class类的意思

.类名 {
   属性值1: 属性值1;
}
<div class="red">
    变红色
</div>

2.5id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

2.6通配符选择器

在CSS中，通配符选择器用"*"定义，它表示选取页面中所有元素(标签)。

HTML元素以id属性来设置id选择器，CSS中选择器以"#"来定义

* {
   属性值1：属性值1；
}
//清除所有元素标签的内外边距
* {
   margin: 0;
   padding: 0;
}

通配符选择器不需要调用，自动就给所有的元素使用样式

特殊情况才使用

2.7选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p{color: red}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav{color: red}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color: red}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	*{color:red}

3.CSS字体属性

属性	表示	注意点
font-size	字号	用px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	加粗是700或者bold不加粗，400或者normal，数字不要跟单位
font-style	字体样式	倾斜是italic，不倾斜是normal(常用)，
font	字体连写	用顺序，字号和字体必须同时出现

4.CSS文本属性

属性	表示	注意点
color	文本颜色	十六进制 简写#fff
text-align	文本对齐	设定文字水平的对齐方式
text-indent	文本缩进	段落首行缩进2个字的距离 text-indent:2em
text-decoration	文本修饰	下划线underline 取消下划线none
line-height	行高	控制行与行之间的距离

em是一个相对单位，就是(font-size)1个文字的大小

5.CSS引入方式

外部样式表

<link rel="stylesheet" href="css文件路径">

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式漏写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

6.CSS段落属性

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
font-varient	将英文文本转换为"小型"大写字母
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高
letter-spacing	字距
word-spacing	词距