有了它，还怕学不会CSS吗！

前端开发是门很考验个人能力的技术活，学好的人年薪几十万不是问题，学不好的连一份糊口的工作都找不到，而css是前端的基础，今天就给大家分享一份爱前端css第一天课程的原版笔记，特别适合计算机小白学习奥！

一、CSS

1.1 简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言(JS)动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

CSS就是：韩国的整容术,中国的PS。简单来说就是让页面看上去不那么恶心。

1.2 书写位置和语法

把CSS放在head中

基本语法：选择器{属性:属性值;属性:属性值;····}

1.3 CSS调试

二、CSS2学习主旨

HTML：标签语义化

----------------------------------------------------------------------------------------

CSS:

      Ⅰ:样式

       Ⅱ:布局

标准流->盒子模型(width/height+padding+border+margin)、块元素和行内元素

浮动流->浮动的由来、浮动造成后果、清除浮动(比如BFC)

定位流->绝对 相对  固定

三、样式属性

3.1 文本

3.1.1 颜色表达

3.1.2 下划线

3.1.3 文本缩进

3.2 字体

3.2.1 字体加粗

3.2.2 字体

c盘->windows->fonts文件夹

3.2.3 符合属性font

3.3 列表

基本语法： list-style: none;  把列表默认的样式清空

3.4 背景

四、常用效果

4.1 鼠标悬浮

4.2 CSS注释

html注释：

css注释：/*注释内容*/

快捷键：ctrl+/

4.3 CSS调错

五、盒子模型

5.1 初识盒子模型

以淘宝举例子 我们可以简单的把淘宝分成上中下三部分。进而还可以继续划分。那么这个划分的各个领域我们称之为盒子。

5.2 盒子组成

盒子=width/height+padding+border+margin

六、块元素和行内元素

6.1 初识

标签 元素 标记都是一回事。

6.2 相互转换

display:block;->转换成块级元素

display:inline;->转换成行内元素元素

display:inline-block;->转换成行内块级元素

6.3 display的特殊值

隐藏显示元素

display:none;->display:block/inline/inlin-block;

七、选择器

基本语法：选择器{属性:属性值;属性:属性值;···}

7.1 基本选择器

7.1.1 通配符选择器*

7.1.2 标签选择器

标签{属性:属性值;属性:属性值;···}

7.1.3 ID选择器

ID命名：以字母 数字 - _组成,但是数字不能开头.咱们建议用英文命名,因为中文同音字、多音字比较多,容易造成命名的模糊,所以推荐使用英文命名。

注意：一个页面只能出现一个ID名

7.1.4 class选择器

7.1.5 优先级关系

权重： id选择器>class选择器>标签选择器>通配符选择器

7.2 高级选择器

7.2.1 并列选择器

7.3 class和id命名规范

1 ①由字母 数字 - 组成

2 ②数字不能开头

3 ③保证其语义化(建议)

福利时间

添加爱前端助理获取更多学习资料

微信：XX1350157805

    qq:  2078256832