前言：
css样式即css层叠样式表，是一种表现html文件样式的计算机语言。主要使用场景就是美化网页，用于设置html页面中的文本、图片内容以及版面布局和外观显示。
目录
三种基础选择器
在了解css样式之前需要先了解css选择器，CSS选择器用于选择或控制网页中的标签。CSS提供了三种基础选择器供开发者使用。
1.类选择器(class)
body标签中的所有标签都有class属性。
由下述代码段可得到nss类选择器的基本格式：
.类名{ 样式代码 }
注：1.需要在标签内部定义class属性的名称
2.class名称可以重复使用。
<style>
.one{
color: red;
font-size: 20px;
font-family: '楷体';
}
</style>
<body>
<div class="one">
<h1>学习css类选择器</h1>
<h1>学习css类选择器</h1>
<h1>学习css类选择器</h1>
<h1>学习css类选择器</h1>
</div>
</body>
2.id选择器
body标签中的所有标签都有id属性。
由下述代码段可得到id选择器的基本格式：
#id名{ 样式代码 }
注：1.需要在标签内部定义id属性的名称
2.一个页面中只能使用一个id名，id名必须是唯一。
<style>
#two{
color: blue;
font-size: 20px;
font-family: '楷体';
}
</style>
<body>
<div id="two">
<h1>学习cssid选择器</h1>
<h1>学习cssid选择器</h1>
<h1>学习cssid选择器</h1>
<h1>学习cssid选择器</h1>
</div>
</body> 
3.标签选择器
html中的所有标签都可以作为选择器
由下述代码段可得到标签选择器的基本格式：
标签名{ 样式代码 }
<style>
div{
color: blue;
}
</style>
<body>
<div>
学习css标签选择器
学习css标签选择器
</div>
三类选择器的优先级
分别使用标签选择器，类选择器和id选择器给div容器加背景颜色，最终div样式为id选择器中的样式，将id选择器去掉，剩余标签选择器和类选择器，执行发现div容器的样式是类选择器中设置的样式。
由此，我们可以得到三种选择器的优先级是：
id选择器优先级最高
类选择器优先级居中
标签选择器优先级最低
div{
background-color:blue;
}
div#two{
background-color: green;
}
div.one{
background-color:red;
}
</style>
<body>
<div class="one" id="two">
<h1>学习css选择器</h1>
<h1>学习css选择器</h1>
<h1>学习css选择器</h1>
<h1>学习css选择器</h1>
<h1>学习css选择器</h1>
</div>
css的三种样式表
css样式主要分为行内(内联)样式、内部样式和外部样式。
行内样式：
html中的所有标签都有style属性，在style属性中直接写入css样式。
示例：
<div style=“color:red;font-size:20px;”>
这是内联样式
</div>
内部样式：
将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。
示例：
<style>
div{
color:red;
font-size:20px;
}
</style>
<body>
<div>这是内部样式</div>
</body>
外部样式：
将css样式单独写入到一个 xxx.css外部文件中。
（1）使用link标签引入外部css文件。
<!-- link关键字引入外部样式表
rel:声明外部样式表
href:引入样式文件地址
-->
<link rel="stylesheet" href="./style.css"> 
字体样式
1.font-style
设置元素是否倾斜，属性值有itatic(倾斜)和normal(不倾斜)即默认值
示例如下
<style>
h1{
font-style: italic;
}
</style>
<body>
<h1>测试font-style</h1>
<h1>测试font-style</h1>
<h1>测试font-style</h1>
</body> 
<style>
h1{
font-style: normal;
}
</style>
<body>
<h1>测试font-style</h1>
<h1>测试font-style</h1>
<h1>测试font-style</h1>
</body>
2.font-size
设置元素大小，以像素px为单位
下图上三行为修改后的字体样式，下三行为默认样式。
<style>
span.size{
color: lightseagreen;
font-size: 20px;
}
</style>
<body>
<span class="size">测试font-size</span><br>
<span class="size">测试font-size</span><br>
<span class="size">测试font-size</span><br>
<span >测试font-size</span><br>
<span >测试font-size</span><br>
<span >测试font-size</span><br>
</body>
3.font-weight
设置元素粗细程度范围是100-900.其中100最细，900最粗。下图从上到下分别是100到900，每次递增100.
注：元素粗细的属性值没有单位，要注意和元素大小的单位px区分
<style>
h1.weight1{font-weight: 100;}
h1.weight2{font-weight: 200;}
h1.weight3{font-weight: 300;}
h1.weight4{font-weight: 400;}
h1.weight5{font-weight: 500;}
h1.weight6{font-weight: 600;}
h1.weight7{font-weight: 700;}
h1.weight8{font-weight: 800;}
h1.weight9{font-weight: 900;}
</style>
<body>
<h1 class="weight1">测试font-weight</h1>
<h1 class="weight2">测试font-weight</h1>
<h1 class="weight3">测试font-weight</h1>
<h1 class="weight4">测试font-weight</h1>
<h1 class="weight5">测试font-weight</h1>
<h1 class="weight6">测试font-weight</h1>
<h1 class="weight7">测试font-weight</h1>
<h1 class="weight8">测试font-weight</h1>
<h1 class="weight9">测试font-weight</h1>
</body>由于，元素粗细在小范围内变化并不是很大，因此每次递增基本以100为单位
4.font-family
设置元素字体，可以是个人电脑字体库中现有的字体。字体库查看方法如下：
在电脑中找到此电脑，双击进入C盘 
在C盘目录下找到Windows文件夹，双击进入Windows文件夹 
在Windows文件夹下找到fonts文件夹，双击进入，即可进入字体库查看
元素的默认字体是等线，如下示例修改为楷体：
<style>
h1.family{
font-family: '楷体';
}
</style>
<body>
<h1 class="family">测试font-family</h1>
<h1 class="family">测试font-family</h1>
<h1 class="family">测试font-family</h1>
<h1 class="family">测试font-family</h1>
</body> 
文本样式
1.color
设置元素颜色
设置方法有如下三种
1.颜色的英文单词
2.颜色的十六进制表示
3.rgb()函数 参数为三个0-255之间的数
<style>
h1.color{
color: red;
}
h1.color1{
color: #123abc;
}
h1.color2{
color: rgb(21, 210, 147);
}
</style>
<body>
<h1 class="color">测试color</h1>
<h1 class="color1">测试color</h1>
<h1 class="color2">测试color</h1>
</body> 
2.line-height
设置文本所在行的高度，默认为文本自身高度
由于行高的改变直观来看并没有什么变化，因此在设置之后可以通过为标签加背景颜色来观察行高的变化。
<style>
h1.line_height{
line-height: 100px;
background-color: #123abc;
}
h1.line_height1{
background-color: green;
}
</style>
<body>
<h1 class="line_height">测试line-heigh</h1>
<h1 class="line_height1">测试line-heigh</h1>
</body>
2.text-align
设置文本在网页中的对齐方式，默认为左对齐。
<style>
h1.align_left{
text-align:left;
}h1.align_right{
text-align:right;
}
h1.align_center{
text-align:center;
}
</style>
<body>
<h1 class="align_left">测试水平对齐方式之左对齐</h1>
<h1 class="align_right">测试水平对齐方式之右对齐</h1>
<h1 class="align_center">测试水平对齐方式之居中对齐</h1>
</body>
3.text-indent
设置文本缩进，以像素px为单位，默认无缩进
<style>
h1.indent{
text-indent: 30px;
}
</style>
<body>
<h1 class="indent">测试文本缩进</h1>
<h1 class="indent">测试文本缩进</h1>
<h1 class="indent">测试文本缩进</h1>
</body>
4.text-decoration
设置文本装饰
在demo中，可以利用text-decoration的属性值none去掉超链接的下划线
<style>
h1.none{
text-decoration: none;
}
h1.underline{
text-decoration: underline;
}
h1.through{
text-decoration: line-through;
}
h1.overline{
text-decoration: overline;
}
</style>
<body>
<h1 class="none">设置文本装饰</h1>
<h1 class="underline">设置文本装饰之下划线</h1>
<h1 class="through">设置文本装饰之中划线</h1>
<h1 class="overline">设置文本装饰之上划线</h1>
</body>
鼠标样式
网页中，鼠标悬浮于元素之上显示的样式
| 鼠标样式cursor | 图标 | 关键字 |
| 默认光标 |  | default |
| 超链接指针 |  | pointer |
| 等待状态 |  | wait |
| 可用的帮助 |  | help |
| 提示文档 |  | text |
| 十字指针 |  | crossair |
背景样式
1.background-color
在之前测试行高时，已经设置过背景颜色，此处不再赘述格式如下
h1{
background-color:red;
}
设置背景颜色和设置文本颜色一样，也是三种方式
2.background-image
设置背景图片，将图片引入项目作为背景展示
设置背景图片格式如下：
body{
background-image:url(图片地址);
}
设置背景颜色和设置文本颜色一样，也是三种方式
1.引入图片路径url()
绝对路径
由于代码可能会运行在其他系统上，因此在项目开发过程中，很少使用绝对路径
相对路径
/ 根路径
./ 同级路径 ：与该html文件存放在同一个文件夹中
../ 上一级路径：存放在该html文件的上一级的文件夹中
3.background-repeat
设置背景的重复方式，由于图片的大小不能很好的适配浏览器窗口，因此浏览器默认将图片重复铺满全屏
设置背景图片重复方式格式如下：
body{
background-repeat:重复方式;
}
1.no-repeat 不重复
2.repeat 重复
3.repeat-x 沿x轴方向重复
4.repeat-y 沿y轴方向重复
注：背景图片作用于整个网页时，可在设置样式时，选择body标签，直接设置
4. background-position
背景定位，用于设置背景图片的起始位置，有如下三种方式
设置背景图片起始位置格式如下：
body{
background-position:定位方式;
}
1.像素定位，单位px，通常设置对左侧和顶部的距离
center
left
right
3.垂直方向
top
bottom
center
设置背景样式的简写
background：图片地址，图片重复方式，背景颜色，背景定位
注：属性顺序可以打乱
伪类
伪类是当元素处于某种状态时，为其添加的样式，可以是背景颜色，字体，字号等等.伪类分为四种：单击访问前，单击访问后，鼠标悬浮其上以及单击不放开
<style.
/* 单击访问前 */
a:link{
color: lawngreen;
}
/* 单击访问后 */
a:visited{
color: blueviolet;
}
/* 鼠标悬浮 */
a:hover{
color: rgb(174, 22, 37);
}
/* 单击不放开 */
a:active{
color: rgb(16, 251, 255);
}
</style>
<body>
<a href="#">测试伪类</a>
</body>边框样式
| border-top-style | 上边框样式 |
none
：无边框
solid
：实线边框
dashed:
虚线边
框
dotted
：点状边框
double
：双线边框
hidden
：与
none
相同，应用于解决
边框冲突
|
| border-right-style | 右边框样式 | |
| border-bottom-style | 下边框样式 | |
| border-left-style | 左边框样式 | |
| border-style | 设置四个边框样式 |
边框颜色
| border-top-color | 上边框颜色 |
| border-right-color | 右边框颜色 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框颜色 |
| border-color | 设置四个边框颜色 |
边框粗细
| border-top-width | 上边框粗细 |
| border-right-width | 右边框粗细 |
| border-bottom-width | 下边框粗细 |
| border-left-width | 左边框粗细 |
| border-width | 设置四个边框粗细 |
盒子模型
1.外边距
| margin-top | 距离顶部的外边距 |
| margin-bottom | 距离底部的外边距 |
| margin-left | 距离左侧的外边距 |
| margin-right | 距离右侧的外边距 |
2.内边距
| padding-top | 距离顶部的内边距 |
| padding-bottom | 距离底部的内边距 |
| padding-left | 距离左侧的内边距 |
| padding-right | 距离右侧的内边距 |
box-sizing属性
1.content-box•盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框2.border-box•盒子的实际高度和宽度包括元素内容、边框和内边距
浮动float
float是css样式中的定位属性，用于设置标签对象的浮动布局。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
| float:left | 向左浮动 |
| float:right | 向右浮动 |
| float:none | 不浮动(默认值) |
注意：浮动设置在第一个容器中
若给第一个容器加左浮动，则第一个容器下的容器会占据第一个容器左侧的位置，右浮动同理可得
清除浮动clear
clear属性规定了在元素的哪一侧不允许有浮动
| clear:left | 在左侧不允许浮动元素 |
| clear:right | 在右侧不允许浮动元素 |
| clear:none | 两侧都允许浮动元素 |
| clear:both | 两侧都不允许浮动元素 |
注意：清除浮动设置在第二个容器中
若给第一个容器加左浮动，则第一个容器下的容器会占据第一个容器右侧的位置，因此要清除第一个容器右侧的浮动，就需要给第二个容器加清除左侧浮动，清除右浮动同理可得
小结：有关于css基础样式的记录到这里就告一段落，如果有人看到了这篇博客，发现了其中的一些错误，恳请能够指正，非常感谢！
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
