CSS学习笔记

CSS名为层叠样式表，是一种用来为结构化文档添加样式的语言，通过CSS可以将网页装饰的更加精美，同时也会大大提高我们进行网页开发的效率。CSS语句由选择器、属性和值三个部分组成。

选择器

基础选择器：

通常情况下，我们会使用通配符选择器清除浏览器默认的内外边距；
注意：类选择器可以同时被多个含有相同类名的元素同时调用，而id选择器只能被一个元素调用。

复合选择器：

属性

字体属性

font-weight：字体粗细
font-size：字号
font-family：字体
font-style：字体样式

复合写法

body {
    font: font-style font-weight font-size/line-height font-family;
}

注意：复合写法只能按照上述顺序书写，不能更换顺序，并且各个属性之间以空格隔开

文本属性

color：文本颜色
text-align：文本对齐
text-indent：文本缩进
text-decoration：文本修饰
line-height：行高

CSS的引入

通常在网页开发中，我们会使用将结构和样式完全分离的方式来完成，因此，需要将单独的CSS文件引入到HTML中，通过标签来完成。

<link rel="stylesheet" href="CSS文件路径">

CSS元素显示模式

块元素

常见的块元素有\<h>,\<p>,\<div>,\<ul>,\<ol>等。
特点：

1. 独占一行
2. 可以调整宽高、内外边距
3. 默认宽度是父级的100%

注意：文字类元素内不能使用块级元素

行内元素

常见的行内元素有\<a>,\<span>,\<strong>,\<i>,\<em>等。
特点：

1. 可以独占一行
2. 宽高设置无效
3. 默认宽度就是其本身的宽度

行内块元素

常见的行内块元素有\<img>,\<input>,\<td>,等。
特点：

1. 和其他相邻的行内块可以在同一行
2. 可以调整宽高、内外边距
3. 默认宽度就是其本身的宽度

各个元素显示模式之间可以通过直接转换

CSS的背景

浮动

可以让多个块级元素在一排内显示

div {
    float: left;
}

注意：

1. 如果一个盒子内有多个子盒子，那么其中一个浮动，另外几个也应当改为浮动
2. 浮动元素有行内块元素特性
3. 当浮动元素影响到下面的标准流时，就要清除浮动