原创 CSS基础入门学习笔记整理

CSS虽然不是编程语言，但是我们可以把它看作是一种用来表现HTML的计算机语言。CSS能够对网页中元素位置的排版进行像素级精确控制，因此通过CSS的学习，我们就能制作出一个优美的网页。本文主要为大家整理了CSS基础入门学习的笔记，内容包括了CSS的基本概念、作用、使用、语法和属性，下面我们来一起进入CSS的学习世界吧!

1、CSS的基本概念

CSS全称Cascading Style Sheets。在实际网页开发中，作用于同一个元素上的多个样式产生冲突的情况不可避免的经常发生，当多个样式发生重叠时，优先级别高的样式会生效，因此得名层叠样式表。

2、CSS的作用

在网页开发中，CSS高性能强大，是提高工作效率的利器。它可以将内容展示和样式控制分离，从而降低耦合度，解耦，让分工协作更容易，以此提高开发效率。

3、CSS的使用

（1）内联样式：在标签内使用style属性指定css代码。如：<div style="color:red;">hello css</div>

（2）内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码。如：

<style>

div{

color:blue;

}

</style>

<div>hello css</div>

（3）外部样式：它是CSS资源文件。在head标签内，定义link标签，引入外部的资源文件.如：

a.css文件：

div{

color:green;

}

<link rel="stylesheet" href="css/a.css">

<div>hello css</div>

<div>hello css</div>

需要注意的是，前三种方式CSS作用范围越来越大，第一种方式不常用，后期比较常用第二、三种方式。

4、CSS的语法

（1）格式

选择器 {

属性名1:属性值1;

属性名2:属性值2;

...

}

注意：每一对属性需要使用；隔开，最后一对属性可以不加；

5、属性

（1）字体、文本

font-size：字体大小

color：文本颜色

text-align：对其方式

line-height：行高

（2）背景

background：

（3）边框

border：设置边框，符合属性

（4）尺寸

width：宽度

height：高度

（5）盒子模型：控制布局

margin：外边距

padding：内边距

默认情况下内边距会影响整个盒子的大小

box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

float：浮动

left

right

以上就是CSS基础入门学习笔记的全部整理。当然，对于才刚刚入门的初学者来讲，想要完全理解以上的基础内容，可能还比较困难。建议大家在博学谷官网进行相关视频的学习，相信有了在线老师的耐心指导，大家即使是零基础也可以轻轻松松的入门。