前端css基础知识学习
css主要作用：美化网页、布局页面。
html负责结构、css负责美化布局（一位网页美容师）
css是层叠样式表的简称（style）
css和html一样是一种标记语言；主要设置html页面的文本内容（字体、大小、对齐方式）；
图片外形（宽高边距）、以及版面的布局和外观显示样式。
css作用：美化网页、布局简单。
简单总结：
- html主要做结构，显示元素内容。
- css美化html、布局网页。
- css最大的价值：由html专注做结构呈现、样式交给css，即结构（html）样式（css）分离。
css规则：
两个主要部分构成：选择器+声明（属性对应值{: ;...}）
选择器：
指定css样式的html标签，花括号内是该对象的样式。
属性和属性值以“键值对”的形式出现
属性例如文字字体，大小，颜色
属性与属性值以;分开
css代码风格：
空格规范 选择器后 ：后
css选择器：什么叫做选择器？选择标签 简单来说就两步：找到人 做对事
基础选择器
- 标签选择器
- 类（class）选择器
- 属性（id）选择器
- 通用选择器（*）
复合选择器
标签选择器：为某一标签整体进行修改
作用：
可以把某一类的标签全部选择出来，例如div soan
优点：
快速设置同一类型的标签统一样式
缺点：
不能设计差异化，只能选择全部标签 不能指定某一个标签进行变化
类选择器：
class（.）
注意：
类选择器使用. 标识
可以理解为这个标签起了起个名字
长名称或者词组可以使用横线来命名
不要使用纯数字、中文 尽量使用完整拼写或单词
案例：div盒子创建一个红绿红
可见，类选择器是对指定的标签或者几个标签进行变化。
各个类名中间使用空格隔开
简单理解：就是某个标签添加了多个类
这个标签可以分别具有这些类名的样式
节省css代码 更加独立方便 与编程的是函数一样
多类名选择器在后期布局比较复杂的情况下，使用较多。
id选择选择器：id# 只能使用一次 别人不能使用
与类选择器差不多的用法
id在html里文档只出现一次 口诀：css样式#定义 html结构id调用 别人不要使用。
id选择器和类选择器的区别：
class好比名字 多个人可以叫每一个名字
id好比身份证 身份证是唯一的
最大不同：在于使用次数不同
类选择器在修改样式中用的最多 id选择器一般用于页面唯一的元素
通用选择器：
css中，使用"*"
*{
.....
}
通用选择器不需要调用 自动匹配所有的样式
特殊情况才会使用 清除所有元素标签的内外边距
修改样式类选择器使用较多
设置字体：
font-family属性定义文本的字体系列
各种文体之间必须使用英文逗号隔开
一般情况下 有空格隔开的单词需要加""
尽量使用系统自带的字体规范 保证正确显示
最常使用的字体：body font-family:'Microsoft YaHei',tahoma,"Hiragino Sans GB"
直接在body里面设置
字体大小：
css使用font-size属性定义字体的大小 数字范围（100~900）
px（像素） ，chrome默认16px
,bold设置粗细 font-weight:400/700(namal/bold)
实际开发使用数字（不加单位 没有px）
字体粗细：
font-weight 400标准 700粗大
文字样式：font-style (正常normal/斜体italic)
注意：这个font-style很少使用 一般使用 (em/i)倾斜字体
顺序不能变：
font:style weight size/line-hight family
font:必须含有 size和family!!!
字体属性的总结：
cssFont（字体）属性用于定义字体、系列、粗细、文本样式（如italic斜体）
font-style:字体样式 normal italic
font-weight:字体粗细 400 700 开发中使用num标准
font-size:字体大小 数字 单位px（像素）
font-family:字体 按需要选择
复合属性：font:按顺序书写！！！