前端css基础知识学习

css主要作用：美化网页、布局页面。

html负责结构、css负责美化布局（一位网页美容师）

css是层叠样式表的简称（style）

css和html一样是一种标记语言；主要设置html页面的文本内容（字体、大小、对齐方式）；

图片外形（宽高边距）、以及版面的布局和外观显示样式。

css作用：美化网页、布局简单。

简单总结：

1. html主要做结构，显示元素内容。
2. css美化html、布局网页。
3. css最大的价值：由html专注做结构呈现、样式交给css，即结构（html）样式（css）分离。

css规则：
两个主要部分构成：选择器+声明（属性对应值{: ;...}）

选择器：

指定css样式的html标签，花括号内是该对象的样式。

属性和属性值以“键值对”的形式出现

属性例如文字字体，大小，颜色

属性与属性值以;分开

css代码风格：
空格规范 选择器后 ：后

css选择器：什么叫做选择器？选择标签  简单来说就两步：找到人 做对事

基础选择器

1. 标签选择器
2. 类（class）选择器
3. 属性（id）选择器
4. 通用选择器（*）

复合选择器

标签选择器：为某一标签整体进行修改

作用：

可以把某一类的标签全部选择出来，例如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:按顺序书写！！！