前端初学之CSS初体验

一、从什么是CSS开始（百度一下，你也知道）

CSS：Cascading Style Sheet 层叠样式表。是一组样式设置的规则，用于控制页面的外观样式。

1、特点：

实现内容与样式的分离，便于团队开发；

样式复用，便于网站的后期维护；

页面的精确控制，让页面更精美

2、CSS引用方式：

1.内嵌样式

写在标签属性的位置，style="color:red"引号内写css属性和值

形式也是键值对，通过：连接，通过；分隔

需要尽量避免代码重复

优点：精准，明确样式写在那个元素上

缺点：代码重复，页面元素过多时无法统一设置样式

不建议使用

2.行内样式

也称为嵌入样式，在html中写一个style标签

语法：选择器，声明块

选择器：用于选中页面元素

声明块使用{}包围，用于设置元素样式

声明块的语法键值对，通过：连接，通过；分隔

优点：可同时选中多个页面元素

缺点：只对当前页面生效

3.外部样式

单独写一个样式文件，文件后缀是.css，需要通过link标签引入任一html文件中

优先级：行内样式>内联样式>外部样式(距离页面元素代码越近的样式，优先级越高)

​​​​​​二、选择器

1、基础选择器

1.标签/元素选择器

使用HTML标签作为选择器的名称。

以标签名作为样式应用的依据。

2.类选择器

使用自定义的名称，以 .号作为前缀，然后再通过HTML标签的class属性调用类选择器。

以标签的class属性作为样式应用的依据。

3.ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配。

以标签的id属性作为样式应用的依据，一对一的关系。

4.伪类选择器

根据不同的状态显示不同的样式，一般多用于标签。

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标悬浮到连接上，即移动在连接上时触发

:active 选定的链接，被激活

5.子元素选择器

6.属性选择器

7.通配选择器

优先级：行内样式>ID选择器>类选择器>元素/标签选择器

三、属性

建议直接去浏览器上找完整的属性表，以下仅供参考

font属性：font:font-style  font-weight  font-size  font-family

background属性：background:background-color  background-image  background-repeat 

background-position

列表属性：list-style-type取值：none、disc、circle、square、decimal

list-style属性：list-style:list-style-type  list-style-image  list-style-position

四、盒子模型

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

盒子模型的组成部分：

1、margin--外边距

属性：

margin-left 左外边距

margin-right 右外边距

margin-top 上外边距

margin-bottom 下外边距

2、border--边框

属性：

border-width 边框粗细

border-style    边框样式

border-color 边框颜色

样式：

none：没有边框即忽略所有边框的宽度

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

3、padding--内边距

属性：

padding-left 左内边距

padding-right  右内边距

padding-top 上内边距

padding-bottom 下内边距

padding: 上内边距 右内边距 下内边距 左内边距

4、content--内容区

属性：width，height

五、浮动与定位

 浮动：

1、如何设置浮动

通过控制属性float来控制元素的位置

float取值：

left：向左浮动    right：向右浮动    none：没有浮动

2、什么是文档流

文档中可显示的元素在排列时候的开始位置以及他们所占的区域。因为页面中的元素分为不同的种

类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右

的顺序输出内容。

3、设置浮动后元素脱离文档流会导致父元素高度塌陷，如何解决？

用clear清除 语法：选择器{clear:属性值;}

left 不允许左侧有浮动元素（清除左侧浮动的影响）

right 不允许右侧有浮动元素（清除右侧浮动的影响）

both 同时清除左右两侧浮动的影响

定位：

1、相对定位（relative）：相对于一个元素的正常位置来对其定位。"left:20" 会向元素的 LEFT 位

置添加 20 像素。

2、绝对定位（absolute）：使用绝对值来对元素进行定位。"left", "top", "right"，"bottom"

3、固定定位（fixed）：相对于浏览器窗口来对元素进行定位。"left", "top", "right"，"bottom" 

4、粘滞定位：position：sticky；开启粘滞定位，和相对定位的特点基本一致；不同的是粘滞定位

可以在元素到达某个位置时将其固定,不随滚动条滚动而滚动。相对于body元素。

在下只是一个前端初学者，如有写得不好的地方，敬请斧正。