css基础1
day1
css初识
概念：CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
css的目的与作用：让 HTML 从样式中脱离，实现了 HTML 专注去做结构呈现，样式交给css。
作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表（书写位置）：
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
- 行内式
- 内部样式表
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
- 外部样式表
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意：
- link 是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性
css选择器
CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来
（css就是分两件事，选对人，做对事。）
h3{
color：red;
}
这段代码就是2件事， 把h3选出来， 然后 把它变成了 红色。
css基础选择器
1.标签选择器（直接写标签）
2.类选择器（使用"."+类名）
3.类选择器特殊用法- 多类名
例：
<div class="pink fontWeight font20">亚瑟</div>
4.id选择器
5.通配符选择器
通配符选择器用*号表示， *就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
注意：
- 尽量少用通用选择器
* - 尽量少用 ID 选择器
- 不使用无具体语义定义的标签选择器 div span
CSS字体样式属性调试工具
font字体
1.font-size字号
2.font-family字体
3.font-weight粗细
4.font-style字体样式（倾斜是 italic 不倾斜 是 normal）
注意：
font:综合设置字体样式：
选择器 { font: font-style font-weight font-size/line-height font-family;}
注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
CSS外观属性
1.color文本颜色
2.text-align文本水平对齐方式（left，right，center）
3.line-height行间距
4.text-indent首行缩进
5.text-decoration文本的装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
sublime快捷键
mmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。
-
生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
-
如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
-
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
-
如果有兄弟关系的标签，用 + 就可以了 比如 div+p
-
如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
-
如果生成的div 类名是有顺序的， 可以用 自增符号 $
