CSS基础知识（第1部分）

CSS简介

CSS：美化网页，布局页面。

CSS与HTML

结构（HTML）与样式（CSS）相分离。

HTML

只关注内容语义–>丑；
可做简单样式–>繁琐。
HTML做结构：显示元素内容

CSS

层叠样式表简称（CSS样式表、级联样式表）；
CSS也是一种标记语言。
最大价值：让HTML专做结构，呈现样式由CSS。
CSS美化HTML：布局网页

CSS语法规范

CSS样式规则：选择器加一条或多条声明。
例：

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

h1:选择器
color:属性
red:值
color:red:声明
font-size:属性
25px:值
font-size:25px:声明

选择器：指定CSS样式的HTML标签。
{ }：里面是具体样式设置。

CSS代码风格

（非强制规范）

样式格式书写

紧促格式：

h3 {color: deeppink;font-size: 20px;}

展开格式：

h3 {
	color: deeppink;
	font-size: 20px;
}

样式大小写

一般采取小写。

空格规范

属性前面，冒号后面；
选择器和大括号{ }中间。（都保留一个空格）

CSS基础选择器

CSS选择器作用

据不同需求将不同的标签选出来（选择标签）。

选择器分类

基础选择器

（单个选择器组成）
1.标签选择器
2.类选择器
3.id选择器
4.通配符选择器

复合选择器

1.后代选择器
2.子元素选择器
3.并集选择器
4.链接伪类选择器
5.focus伪类选择器

标签选择器

标签名 {
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	...
}	

（元素选择器）用HTML标签名作为选择器，按标签名称分类。
优：为页面中某一类标签指定统一的CSS样式。
缺：不能设计差异化样式，只能选择全部当前标签。

类选择器

可以差异化选择不同的标签，单独选一个或某几个标签。

.类名 {
	属性1:属性值1;
	...
}

例：将所有拥有red类的HTMML元素均变成红色。

.red {
	color: red;
}

语法：
结构要用class属性来调用class类的意思。

<div class='red'>变红色</div>

在CSS中，类选择器以一个点".“号显示。
类选择器使用”."（英文点号）进行标识，后面紧跟类名（自定义）。
自定义—>不能用标签名
    长名称或词组可以用横线来为选择器命名。
    不要使用纯数字、中文等名称（尽量英文字母）。
    拼音用全拼。
    “命名规范”：Web前端开发规范手册.doc
记忆口诀：
    样式点定义，结构类调用。
    一个或多个，开发最常用。
多类名：

<div class="red font20">亚瑟</div>

在标签class属性中写多个类名（用空格隔开）。
使用场景：把相同样式放一个类名里，修改方便。

id选择器

标为特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中以"#"号定义。

#id名 {
	属性1: 属性值1;
	...
}

#nav {
	color: red;
}

id选择器 与 类(class)选择器 的作用：
1.类选择器可被多次使用（如姓名）
 id选择器唯一不可重复（如身份证号）
2.类选择器在修改样式中使用最多
 id选择器一般用于页面唯一性元素上（常搭配JavaScript）
记忆口诀：
    样式"#"号定义，结构"id"来调用。
    只能调用一次，"别人"切勿使用。

通配符选择器

用"*"定义，选取页面中所有元素（标签）。

* {
	属性1: 属性值1;
	...
}

通配符选择器不需要调用，自动给所有元素使用样式。
特殊情况才用（例：清除所有元素标签的内外边距）。

* {
	margin: 0;
	padding: 0;
}

总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可选出所有相同标签	不能差异化选择	较多	p {color: red};
类选择器	可选出1个或多个标签	可按需求选择	非常多	.nav {color: red;}
id选择器	一次只能选1个标签	只能出现1次	一般（和js搭配使用）	#nav {color: red;}
通配符选择器	选择所有标签	选择的部分不需要	特殊才用	*nav {color: red;}

CSS文字属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

字体系列

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

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

1.各种字体之间须用英文状态下的逗号隔开。
2.一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
3.尽量使用系统默认的自带字体，保证在任何浏览器中使用正确。
常见字体：

body {font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

字体大小

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

p{
	font-size:20px;
}

1.px（像素）大小是我们网页的最常用的单位。
2.谷歌浏览器默认的文字大小为16px。
3.不同浏览器可能默认显示的字号大小不一，（尽量给明确值，不用默认）。
4.可以给body指定整个页面文字的大小。
5.标题标签需要单独指定文字大小。

字体粗细

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

p {
	font-weight: bold;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体
100-900	400等同于normal,700等同于bold（数字后无单位）
bolder	IES+ 特粗体
lighter	IES+ 细体

字体样式

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

p {
	font-style: normal;
}

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

平时很少给字体加斜体，反而要给斜体标签（em,i）改为不斜。

字体复合属性

（节约代码）

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

1.使用font属性时，必须按照上面顺序，且各个属性以空格隔开。
2.不需设置的属性可以省略（取默认值），必须保留font-size和font-family属性，否则font属性将不起作用。

字体属性总结

属性	表示	注意点
font-size	字号	通常用的单位是px（像素），一定要跟上单位。
font-family	字体	实际工作中按照团队约定来写字体。
font-weight	字体粗细	加粗:700/bold；不加粗:400/normal（数字无单位）。
font-style	字体样式	倾斜：italic；不倾斜：normal（常用normal）。
font	字体连写	有顺序，不能随意调换位置；字号、字体必须同时出现。

文章内容为观看他人视频学习笔记，仅个人学习记录