本文全面介绍了CSS的基础知识，包括语法、插入方式、选择器、样式、框模型和定位等，适合初学者快速掌握CSS核心概念。
本文适合CSS零基础的同学阅读
目录
一、什么是CSS？
在学习css之前，我们首先要知道css是什么。
CSS（Cascading Style Sheets）：通常称为层叠样式表，用来美化我们的网页。举个例子女生会为了让自己更漂亮选择化妆，那么这里HTML是素颜，css就是化妆。比如文本字体、颜色的变化，或为它添加背景、边框等。
如下列代码：
p{
font-size: 20px;
font-style: italic;
font-weight: bold;
color: red;
}
二、基础语法
选择器{
属性名称1:属性值1;
属性名称2: 属性值2;
}
选择器：html中要应用样式规则的元素标签，如上例中的p，样式只会对p标签产生影响，像其他的标签（如span）就不会受到影响。
三、插入css三种方式
插入css样式的方法一共有三种：内联式、嵌入式以及外链式。
1、内联式
在标签内部使用style属性指出样式，用于单独小样式的调整。
<p style="color:red; font-size:20px;>我是小红<p>
2、嵌入式
在head标签中使用style标签，用于独立案例或单个文件。
<head>
<style>
th,td{
width: 100px;
height: 25px;
text-align: center;
}
</style>
</head>
3、外链式
写成一个单独的css文件，在head标签中使用link标签链接外部文件，用于复杂样式。
<head>
<meta charset="UTF-8">
<title>问卷调查</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
注意
1、css样式文件名最好以有意义的英文字母命名，如：base.css。
2、rel=“stylesheet” type="text/css"是固定写法不可更改。
3、优先级：遵循就近原则
四、选择器
选择器{
样式;
}
在{}前面的就是选择器，选择器指明了{}中的样式作用于网页中的哪些元素。
1、元素选择器
就是标签选择器，通过标签名定义css样式。
<head>
<style>
p{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
<p>白白胖胖，充满希望。</p>
</body>
2、类选择器
通过class定义类名，类选择器前加英文的点（.），类名不能是中文。在开发工程中，使用最为频繁。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cute{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
<p class="cute">白白胖胖，充满希望。</p>
</body>
3、id选择器
通过id名定义，#开头。
<style>
#cute{
font-size: 20px;
color: pink;
}
</style>
====================朴实无华的分割线====================
<p id="cute">白白胖胖，充满希望。</p>
类选择器和id选择器的区别
相同点： 可以应用于任何元素。
不同点：id选择器只能使用一次，而类选择器可以使用多次。即id名在文档中的存在是唯一的，不可以重复，而类名可以被应用于多个标签。
4、关系选择器
（1）同伴关系
不同的选择器之间用逗号（,）连接。
选择器1,选择器2{属性: 值;}
（2）子关系
子选择器仅指他的直接后代，即第一代后代。不同选择器之间用大于号（>）连接。
选择器1>选择器2{属性: 值;}
（3）后代关系
后代选择器是作用于所有子后代元素。不同选择器之间用空格连接。
选择器1 选择器2{属性: 值;}
5、通用选择器
功能最强大的选择器，作用于所有标签，使用星号（*）指定。
<style>
*{
color: purple;
}
</style>
====================朴实无华的分割线====================
<p id="cute">白白胖胖，充满希望。</p>
<span>古娜拉黑暗之神，呜呼啦呼，黑魔变身</span>
<h4>巴啦啦能量，沙罗沙罗，小魔仙全身变</h4>
6、伪类选择器
伪类选择器允许给html不存在的标签设置样式。
| 选择器 | 作用 |
|---|---|
| a:link | 链接没被访问时的样式 |
| a:visited | 链接被访问后的样式 |
| a:hover | 鼠标悬浮在链接上时的样式 |
| a:active | 鼠标点击链接时的样式 |
| :target | 链接跳转到锚点，锚点元素的样式 |
注意
a:hover必须置于a:link和a:visited之后才有效
a:active必须置于a:hover之后才有效
7、选择器优先级
行间选择器>>>id选择器>>>类选择器>>>标签选择器
五、CSS样式
1、颜色
- 英文单词表示。如color:red;
- 十六进制表示，颜色代码自行搜索。#开头，使用3个双位数编写。
- 十进制表示。rgb(0-255,0-255,0-255)
透明度 rgba(0-255,0-255,0-255,0-1) 0表示全透明，1表示全部透明
2、字体
| 属性 | 意义 |
|---|---|
| font-size | 字体大小 |
| font-weight | 字体粗细（数值表示：100~900。bold（粗体）lighter（细的）） |
| font-family | 字体 |
| font-style | 字体风格（normal:正常 italic:斜体） |
3、文本
| 属性 | 意义 |
|---|---|
| text-indent | 首行缩进，一个汉字16px |
| text-align | 水平对齐方式。left，center，right |
| line-height | 行间距，规定了盒子高度才有效果。如果与盒子高度相同，文字垂直居中。 |
| vertical-align | 设置字体相对于图片的位置，但要设置在图片样式处 |
| text-decoration | overline:上划线 line-through:中划线 underline:下划线 none:取消线 |
4、背景
| 属性 | 意义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景重复。repeat-x:水平方向重复，repeat-y:垂直方向重复，no-repeat:不重复 |
| background-position | 背景图片位置。英文单词表示：top,bottom,left,right,center 像素表示：x,y（以顶点为参照） |
| background-size | 背景大小 |
| background-attachment | 背景图像是否固定。srcoll：随页面滚动（默认），fixed：固定 |
六、CSS框模型
1、内边距（padding）
边框和内容之间的空白区域
padding-top、padding-bottom、padding-left、padding-right
2、外边距（margin）
边框外部的空白区域，属性值可为任何长度单位、百分数值、负值。
如果缺少左外的值，使用右外的；缺少下外、右外的值，使用上外的。
margin-top、margin-bottom、margin-left、margin-right
注意
简写内外边距的四个值按顺时针取值，即上 右 下 左
3、边框（border）
| 属性 | 意义 |
|---|---|
| border-style | 边框样式。solid:实线，dotted:点线，dashed:虚线，double:双线，groove:3D线 |
| border-width | 边框宽度。可以指定宽度，如2px、2em。也可以用单词表示 ：thin、medium（默认值）、thick |
| border-color | 边框颜色。transparent：透明边框 |
| border-radius | 边框圆角 。 |
边框也可以分开写：border-top、border-right、border-bottom、border-left
<style>
div{
width: 400px;
height: 54px;
margin: auto;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #ff0000;
border-bottom: 3px solid #666666;
font-family: 微软雅黑;
font-weight: bold;
font-size: 20px;
color: royalblue;
text-indent: 16px;
line-height: 54px;
}
</style>
====================朴实无华的分割线====================
<div>
前程似锦
</div>
七、CSS定位
1、定位（position）
| 属性值 | 意义 |
|---|---|
| static | 元素框正常生成。 |
| relative | 相对定位。元素框偏移某个距离。 |
| absolute | 绝对定位。元素框从文档流完全删除，并相对其包含块定位。 |
| fixed | 固定定位。相对于视窗定位。 |
2、块级元素、行内元素、行内块元素
| 元素、标签类型 | 说明、特点 | 举例 |
|---|---|---|
| 块级元素 | 独占一行，支持所有的样式，默认宽度为父元素的100% | div,p,h1-h6,ol,ul,li,dl,dd,dt |
| 行内元素 | 不会独占一行，元素和元素之间并列显示在一行，只是支持部分css样式，不支持宽高属性，不支持margin的上下，元素的高和宽由内容撑开 | a,span,em,b,i,strong,img (支持上下) |
| 行内块元素 | 元素 并在一行，代码换行，元素间会产生间距。支持全部样式。如果没有设置宽高，宽高由内容撑开。 | 新增加元素类型，现有的标签类型没有行内块，可以使用display将块级元素和行内元素转换为行内块元素 |
display属性
| 属性值 | 意义 |
|---|---|
| none | 元素隐藏，不占用位置 |
| inline | 以行内元素显示 |
| block | 以块元素显示 |
| inline-block | 以行内块元素显示 |
3、元素溢出（overflow）
子元素内容超出父元素边界
| 属性值 | 意义 |
|---|---|
| visible | 不采取处理方式（默认），超出部分显示在父类元素外面。 |
| hidden | 超出部分隐藏 |
| srcoll | 超出部分增加滚动条（垂直+水平） |
| auto | 根据超出部分自动增加滚动条 |
text-overflow:ellipsis ——文字超出部分展示为3个点（…）
4、浮动（float）
（1）文档流
文档流指的是盒子按照HTML标签编写顺序依次从上到下，从左到右的顺序排列，块元素独占一行，行内元素在同一行从左到右依次排列，先写的先排，后写的后排列，每个盒子有自己的位置。
（2）浮动特性
浮动指的是标签浮动到指定的位置上，浮动之后不会和之前的元素保持同一层。
- 浮动会脱离文档流，不再占用位置，会覆盖后面的没有浮动的元素
- 浮动只有两个方向，即左浮动（left）和右浮动（right）
- 浮动会造成文字环绕的效果
- 停止浮动
1、当浮动碰到父元素的边界停止浮动
2、如果前面有浮动的元素，碰到前面的浮动元素并列一排显示
3、如果前面有未浮动元素的元素，换行浮动
4、当浮动的元素的宽度，超过父类元素的边界的时候，自动换行
（3）清除浮动
如果父元素没有设置高度，当元素浮动起来之后，无法继续撑开父类元素的高度，基于此解决方案就是清除浮动。
- 方法一：给父类元素设置高度。
- 方法二：在最后一个子元素增加一个空的div，然后设置样式，不推荐使用，代码冗余，所以这里不举例子。
- 方法三：使用成熟的样式，推荐。如下：
扫一扫
274
到【灌水乐园】发言
