版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/SevenGirl2017/article/details/82811197
文章目录
控制页面
行内样式
直接对HTML的标记使用style属性，然后将CSS代码直接写在其中
<p style = "color:#FF0000; font-size:20px; ">行内样式显示</p>
内嵌式
将CSS写在与之间，并且用标记进行声明
<head>
<style type ="text/css">
P{
Color:#FF00FF;
Font-weitht:bold;
Font-size:25px;
}
</style>
</head>
<body>
<p> 紫色紫色、粗体、25px的效果</p>
</body>
链接式
它将HTML页面本身与CSS样式风格分离为两个会多个文件，实现了页面框架HTML代码与美工CSS代码的完美分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。
对于同一个CSS文件可以连接到多个HTML文件中是，甚至可以连接到整个网站的所有页面中，使得网站整体风格统一、协调，后期维护工作也可大大减少。
<link href ="1.css" type="text/css" rel="stylesheet"> //其中，1.css则是创建出的CSS样式表
选择器
所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。
标记选择器
类别选择器
ID选择器
继承
文字
字体
font-family:黑体，宋体，sans-serif； /*先找黑体，没有则找宋体，再没有则匹配默认字体*/
大小
font-size: 12pt
颜色
color:blue
color:#00f
Color:rgb(0,0,255)
Color:rgb(0%,0%,100%)
粗细
font-weight:100;
斜体
font-style:italic
下划线
text-decoration:underline;
顶划线
text-decoration:overline;
删除线
text-decoration:line-throuth;
闪烁
text-decoration:blink;
英文字母
单词首字母大写 text-transform:capitalize;
全部大写 text-transform:uppercase;
全部小写 text-transform:lowercase;
段落
水平对齐
text-align:left; /*左对齐*/
text-align:right; /*右对齐*/
text-align:center; /*居中对齐*/
text-align:justify; /*两端对齐*/
垂直方式
vertical-align:top; /*顶端对齐*/
vertical-align:bottom; /*底端对齐*/
vertical-align:middle; /*中间对齐*/
行间距
line-height:8pt; /* 绝对值数，一般小于字体大小*/
字间距
letter-spacing:-2pt; /*绝对数值，负数*/
首字放大
font-size:60px
首字下沉
float:left
与右边间隔
padding-right:5px;
图片
样式
边框
<img src="picture.jpg" class="test1" border="0">
缩放
img.test1{
Width:50%; /*相对宽度*/
Heitht:110px; /*绝对高度*/
}
页面
页面背景色
background-color:#5b8a00;
超链接
动态
<a href="http://baidu.com"> 百度一下</a>
按钮
<a href="#"> 首页</a>
DIV
div 与 span
div：块级元素，前后有换行
span：行内元素，前后不会换行，可包含在div中
盒子模型
内容：content
边框：border
间隙：padding
间隔：margin
元素定位
Float:设置浮动
属性：left、right、noneJ(默认)
Position:指定块的位置
属性：static(默认，保持不变)、absolute(绝对位置)、fixed（绝对位置，随滚动条而动）
z-index空间位置
用于调整定位时重叠块的上下位置。其值为整数，可正可负