CSS基础-学习笔记01

1. CSS简介

1.3 CSS 语法规范

选择器 { 属性: 值; 属性: 值 }
eg：

h1 { color: red; font-size: 21px }

2. CSS 基础选择器

2.4 类选择器

1. 多类名使用方式

   <div class = "red font20">xxx</div>
   

   （1） 在标签class属性中写多个类名

   （2） 多个类名中间必须用空格分开

2.5 id 选择器

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

HTML元素以id属性来设置id选择器，css中id选择器以 “#” 来定义

语法

#id名 {
	属性1：属性值1；
	...
}

eg: 将id 为nav元素中的内容设置为红色

#nav {
	color:red;
}

id选择器和类选择器的区别

1. 类选择器（class）不唯一
2. id选择器唯一
3. 类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和js搭配使用

2.6 通配符选择器

使用“*”定义，他表示选取页面中所有元素（标签）。

语法

* {
	属性1：属性值1；
	...
}

2.7 总结

基础选择器	用法
标签选择器	p {color:red;}
类选择器	.nav {color:red;}
id选择器	#nav {color:red;}
通配符选择器	* {color:red;}

3.CSS 字体属性

3.1 字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}

3.2 字体大小

CSS使用font-size属性定义字体大小

p {
	font-size:20px;
}

3.4 字体粗细

CSS使用font-weight 属性设置文本字体的粗细

p {
	font-weight:bold;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold *后不加单位

3.5 文字样式

CSS使用font-style 属性设置文本的风格

p {
	font-style:normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style：normal
italic	浏览器会显示斜体的字体样式

3.6 字体复合属性

body {
	font:font-style font-weight font-size/line-height font-family;
}

• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间可以空格隔开
• 不需要设置的属性可以省略（去默认值），但必须保留font-size和font-family属性，否则font属性将不启作用

3.7 总结

属性	表示	注意点
font-size	字号	单位px
font-family	字体
font-weight	字体粗细	加粗700/bold，不加粗normal/400 *数字不加单位
font-style	字体样式	倾斜itclic 不倾斜normal
font	字体连写	1. 字体连写有顺序，不能更换位置 2. 字号、字体同时出现

4. CSS 文本属性

4.1 文本颜色

color 属性用于定义文本的颜色

div {
	color: red;
}

表示表示	属性值
预定义的颜色值	red，green，bule，
十六进制	#FF0000,#FF6600,#29D794
RGB代码	rgb（255,0,0）/rgb（100%，0%，0%）

4.2 对齐文本

text- align 属性用于设置元素内文本内容的水平对齐方式

div {
	text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

4.3 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

div {
	text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。连接 a 自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

记住如何添加下划线，如何删除下划线

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {
	text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p {
	text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，泽辉按照父元素的1个文字大小。

4.5 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p {
	line-height: 26px;
}

4.6 总结

属性	表示	注意点
color	文本颜色	常用 十六进制 eg: #fff
text-align	文本对齐	可设文字水平的对齐方式
text-indent	文本缩进	常用于段落首行缩进 eg：text-indent： 2em；
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

5. CSS 引入方式

5.1 CSS 的三种样式表

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（连接式）

5.2 内部样式表

内部样式表时写到 HTML页面内部，将所有css代码抽取出来，单独放到一个< style >标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

5.4 行内样式表

在元素标签内部的style属性中设定css样式

<div style="color: red; font-size: 12px;">...</div>

5.5 外部样式表

样式单独写到CSS文件中，之后将其引入到HTML页面中使用

引入外部样式表分为两步：

1. 新建一个后缀名为：.css 的样式文件，把所有CSS代码都放入此文件中
2. 在HTML页面中，使用< link >标签引入这个文件

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

属性	作用
rel	定义当前文档与被连接文档之间的关系
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

5.6 总结

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