CSS-01（pink老师课程笔记）

CSS-标记语言

html-网页结构，css-样式

结构：选择器+声明

选择器为html中的标签

CSS代码风格

展开式+字母小写+冒号后保留空格+选择器和大括号间保留空格

基础选择器

标签选择器-HTML的标签名

类选择器

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

不要使用纯数字或中文

文字颜色：color

宽度：width（px）

高度: height（px）

背景颜色: background-color

一个标签指定多个类名

多个类名之间使用空格隔开

id选择器

样式#定义，结构id调用，只能调用一次，别人切勿调用

类相当于姓名，id相当于身份证号（有同名，但是身份证唯一）

通配符选择器

使用*，无需调用，自动给所有元素使用样式。特殊情况使用

基础选择器	作用	特点	使用	用法
标签	选出所有相同的标签	不能差异化选择	较多	p
类	可以选择一个或多个标签	根据需求选择	非常多	.nav
id	一次只能选择一个标签	只能调用一次	和js搭配	#nav
通配符	默认选择所有标签	全选	特殊情况	*

CSS字体属性

font-family:字体类型（微软雅黑）

各种字体之间必须使用英文状态下的逗号隔开

多个单词组成的字体，加引号

通常指定body标签，

font-size：字体大小（20px）

标题（h1-）标签比较特殊，需要单独指定大小

其他使用body标签

font-weight：字体粗细（400，700）

400=normal，可以让加粗字体不加粗（h1）

700=bold，可以加粗字体

没有单位

font-style：文字样式（斜体）

normal

italic

一般用于将em的倾斜字体变正

复合属性font

font：font-style font-weight font-size/line-height font-family;

不能随意颠倒顺序，空格隔开

size和family不可以省略，其他可以省略不写

CSS文本属性

color：文本颜色

三种表示方式：red、#ff0000、rgb（255，0，0）

最常用的是16进制

text-align：文本对齐方式

center、left、right（只能实现水平对齐方式）

text-decoration：文本装饰（下划线，删除线、上划线）

none

underline-下划线

overline-上划线

line-through-删除线

一般用于取消标签a的下划线

text-indent：文本缩进（10px，2em）

仅缩进首行

em是相对单位，1em是一个文字大小的距离

line-height：行间距（26px）

行间距=上间距+文本高度+下间距

CSS引入方式

三类：行内、内部（嵌入）、外部（链接）

内部样式表

html页面内部，一般放在head中的style标签中

行内样式表

style直接放在标签后（<div style="color: pink">）

适合于修改样式较少

外部样式表

样式放在CSS文件

两步走：新建.css文件；link引入

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