这篇博客是为0基础的学习者准备的CSS入门教程。介绍了CSS的作用、代码规范和基本选择器，包括元素选择器、类选择器和ID选择器。详细讲解了CSS的边框属性、布局技巧如浮动和display属性，以及字体样式和盒子模型。最后讨论了CSS与HTML的结合方式，包括内部样式和外部样式的应用。
文章目录
前言
0基础CSS
一、CSS入门基础知识
HTML--------》页面的结构--------》人的面部（素颜）
css--------》美化页面--------》给人化妆
CSS (CascadingStyle Sheets):层叠样式表
层叠: 一层一层叠加。
样式表: 存储样式的地方，多个样式
CSS作用:修饰HTML页面，更丰富多彩地展示超文本信息
CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
使用CSS替代HTML属性设置样式
因为HTML属性在单独使用时有一定的局限性,所以要配合CSS样式代码才可以展示更为丰富的效果。
代码规范
放置规范:
在<style>标签内容体中书写css样式代码。
<style>标签放置在<head>标签之中。
格式规范:
选择器名称{属性名1:属性值1;属性名2:属性值2;…….}
选择器:即指定CSS样式作用在哪些HTML标签上
代码规范:
属性名和属性值之间是键值对关系!
属性名和属性值之间用“:”连接，最后“;”结尾;
例如:font-size:120px;
如果一个属性名有多个值，多个值之间用空格隔开。
例如:border : 5px solid red;
CSS注释:/* 注释内容 */ 等同于java多行注释
二、CSS选择器
1.基本选择器
元素选择器
HTML标签又名HTML元素。
元素选择器:即以HTML标签名作为选择器名称。
作用:选择CSS样式代码作用于对应标签名的标签上。
格式:
标签名{
/* CSS样式代码 */
｝
适用范围:适用于将相同样式，作用在多个同名标签上
代码如下（示例）：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
font-size: 120px;
}
</style>
</head>
<body>
<span>今天天气好晴朗</span>
<span>今天天气好低沉</span>
<div>是的！好晴朗</div>
</body>
</html>
类选择器
每个HTML标签都有一个class属性，class属性值即为类名
类选择器:即以HTML的类名lass属性值）作为选择器名称。
作用:选择CSS样式代码作用于对应类名的HTML标签上。
格式:
.类名{
/* 注意类名前面要加 . */
}
适用范围:适用于将样式一次作用在相同类名的标签上。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.redF{
color: red;
}
</style>
</head>
<body>
<span class="redF">今天天气是红色</span>
<span>今天天气是黑色</span>
<div class="redF">是的！红色好晴朗</div>
</body>
</html>
id选择器
每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。
id选择器:即以HTML的id (id属性值）作为选择器名称。
作用:选择CSS样式代码作用于某介规定id值的html标签上
格式:
#id值{
/* CSS样式代码 */
}
适用范围:适用于将样式作用某个标签上，更加有针对性。
手动保证ID值在本页唯一，否则后期开发出问题
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#heise{
font-size: 100px;
}
</style>
</head>
<body>
<span >今天天气是红色</span>
<span id="heise">今天天气是黑色</span>
<div >是的！红色好晴朗</div>
</body>
</html>
2.基本选择器的组合方式
层级关系
标签和标签之间有层级关系，例如:<html>标签的子标签为<body>标签。
我们可以对基本选择器进行组合，表现出层级关系,从而更加针对性地把样式作用于某些标签上。
格式:
选择器1 选择器⒉…{
/* css样式代码 */
}
选择器1 下的 选择器2
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div font{
color: red;
}
</style>
</head>
<body>
<div>
<font>我想变红</font>
保持黑色
</div>
<font>可惜我是黑色</font>
</body>
</html>
三、CSS样式
1.边框属性
border、width、height
设置边框的样式
格式:宽度 样式 颜色
例如: border : 1px solid red; 产生1像素粗的，实线，红色边框。
线条样式 : solid实线，none无边，double双线
width 是宽 height 是高
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid blue;
width: 100px;
height: 100px;
}
div font{
color: blue;
}
</style>
</head>
<body>
<div>
<font>蓝色的边框，蓝色的字,字被局限在边框内(自动换行)</font>
</div>
</body>
</html>
background-color
用于设置标签的背景颜色。
背景颜色设置的两种主流方式:
①英文单词
例如:red,blue,yellow
②颜色代码
格式:#红绿蓝，每一个颜色用两个16进制位数表示
例如:#ff1100,红色是ff，绿色是11，蓝色是00，红色颜色最重，绿色其次，没有蓝色。美工更喜欢用第二种方式
div{
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: #ff55ff;
}
2.布局
float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中,需要左右方式进行排版，就需要使用浮动属性
格式:
选择器{float:属性值;}
常用属性值:.
none:元素不浮动（默认值）。
left:元素向左浮动。
right:元素向右浮动。
注意:因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，所
以设置浮动以后，页面样式需要重新调整
代码如下（示例）： 因为单单给d1设置float 所以d1脱离原有板式，运行结果d1会浮在d2上方。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
background-color: red;
height: 120px;
width: 150px;
float: left;
}
#d2{
background-color: greenyellow;
height: 170px;
width: 110px;
}
#d3{
background-color: blue;
height: 130px;
width: 140px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
如下图：
3.转换
display
HTML提供丰富的标签,这些标签被定义成了不同的类型，一般分为:块级元素和行内元素。
块元素:以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行。
常见的块元素:<h1>、<p>、<div>、<ul>等
行内元素:根据内容多少来占用行内空间，不会自动换行，
常见的行内元素:<span>、<a>等。
display属性可以使得元素在行内元素和块元素之间相互转换。
格式:
选择器{display:属性值}
最根本区别就是块元素会自动换行，行内元素不会自动换行。
常用的属性值:
block:此元素将显为块元素（块元素默认的display属性值）
inline:此元素将显示为行内元素（行内元素默认的display属性值)
none:此元素将被隐藏，不显示，也不占用页面空间。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: inline;
}
a{
display: none;
}
span{
display: block;
}
</style>
</head>
<body>
<div>我要变成行内元素</div>
<div>我要变成行内元素</div>
<a>我不占用任何页面空间</a>
<span>我要变成块元素</span>
<span>我要变成块元素</span>
</body>
</html>
4.字体
font-size、color
用于设置字体大小，字体颜色
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
font-size: 120px;
color: red;
}
</style>
</head>
<body>
呵呵
<span>我要变成红色</span>
嘿嘿
</body>
</html>
四、CSS盒子模型
所有的HTML元素，我们都可以看成一个四边形，即一个盒子。
用CSS来设置元素盒子的内边距、边框和外边距的样式的方式，
相当于设置盒子的样式，所以我们将其称之为盒子模型。
1.边框(border回顾跟再阐述)
边框有四个属性可以设置:
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框
通用性设置:
一次性设置上下左右边框样式为1像素的实体红色线。
border:1px solid red;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
border: 1px solid red;
}
div{
border-top: 1px solid red;
}
</style>
</head>
<body>
呵呵
<span>我要变成红色边框</span>
嘿嘿
<div>我只有上边框是红的</div>
</body>
</html>
2.内边距padding
内边距:HTML元素里的内容体到HTML元素边框的距离
内边距有四个属性可以设置:
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
border: 1px solid red;
padding-bottom: 10px;
}
div{
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
呵呵
<span>内容体距离下边框是10像素</span>
嘿嘿
<div>通用设置上下左右均为10，若内容体不足则右边距视觉上未完成</div>
</body>
</html>
如图：
3.外边距margin
外边距有四个属性可以设置:
margin-top:上边距
margin-right:右边距。
margin-bottom:下边距
margin -left:左边距.
通用性设置:
一次性设置上下左右外边距距离为10px : margin:10px
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
border: 1px solid red;
margin-top: 10px;
}
div{
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
呵呵
<span>内容体下外边距是10像素</span>
嘿嘿
<div>通用设置外边距上下左右均为10</div>
</body>
</html>
五、CSS和HTML的结合方式
1.内部样式
行内样式
行内样式，是通过标签的style属性来设置元素的样式。
格式:
<html 标签 style = “css 样式代码” />
针对性修改某个标签的样式
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span style="color: red;font-size: 120px;">红色</span>
</body>
</html>
<style></style>标签方式
当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免书写重复代码，
我们将样式代码从标签style属性中抽取出来，统一写入到style标签中。
格式:
<style>
CSS 样式代码
</style>
放到head标签内
适合样式复用
例如上述很多html就是我们经常用的方式
2.外部样式
<link/>标签方式
<link/>又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文
件中，通过<link>标签将样式连接到HTML文档中。
格式:
<link rel=“stylesheet” type=“text/css” href=“css文件路径”/>
rel=“stylesheet” ,固定值，表示样式表
type=“text/css”，固定值，表示css类型。
href，表示css文件位置。
适合不同页面进行样式复用
例如：
建立css文件
a{
color: red;
font-size: 120px;
}
在html中
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./demo.css" />
</head>
<body>
<a>红色</span>
</body>
</html>
总结
适合0基础CSS的小白复习用
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
