我们知道，HTML的作用就是绘制页面的整体布局。在浏览页面的时候，映入眼前的是五彩缤纷的页面，我们通过HTML只能绘制单调的布局，不能呈现出五彩缤纷的页面，那么要怎么才能做出五彩缤纷的页面呢？我们需要借用一个小工具——CSS
CSS简介
CSS是层叠样式表（Cascading Style Sheets）的缩写，样式储存在CSS（层叠样式表）中，样式定义HTML元素在页面中如何显示，起到渲染页面的作用，好比色彩，能让空白的草画变得生动。
引用CSS的方式
CSS作为一个小工具，需要我们添加到我们编写好的元素中，它才会起效。我们要怎么才能添加到指定的元素中呢？我们有以下三种方式：
内联样式表
样式直接写在需要添加样式的元素中，但是我们不能乱添加喔，我们乱添加，它是不会起效的，我们需要按照一定的格式添加样式，它才会起效
在元素起始标记内添加“style”属性，你就在“style”中添加上你喜欢的样式了，注意的是：每个样式之间用英文输入状态下的；隔开
<div style="width: 200px; height: 200px; background-color: lightblue;"></div>
内部样式表
与内联样式表一样，样式添加在HTML文件中，但是内部样式表的样式不是直接写在元素里
在head元素结束标记和body起始标记之间添加一个style元素，样式表就添加在这个元素里，元素依旧写在body元素里。使用内部样式表需要用到CSS选择器的知识（具体另附文章介绍）
</head>
<style>
/* div是选择div这个元素的作用，样式用{}括起来 */
div{
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
<body>
（出现的效果和上面的一样）
外部样式表
这是个特殊且最常用的样式表方式。外部样式表与其余两种样式表不同，它不是添加在HTML文件中
使用外部样式表步骤：创建一个.css文件 > 样式添加在.css文件中 > 在HTML文件中索引.css文件资源；
.css文件中样式添加的格式和内部样式表的一样，需要先选择这个元素，再给这个元素添加样式；
在head元素结束标记和body起始标记之间添加一个link元素，并添加一定格式的属性，如下：
<!-- href=""内填写的是.css文件的地址 -->
<link rel="stylesheet" href="style.css">
样式表的优先级
是不是会有一种疑问：当我们三种样式表都用到时，那元素样式会怎么呈现呢？
当三种样式表都用到时，会有一个优先级的问题：内联样式表 > 内部样式表 > 外部样式表，所以元素内联样式表的样式会覆盖内部样式表和外部样式表中内联样式表有的样式，以此类推；
用一个不是很合适的比喻来说说为什么优先级是这样的：内联样式表比喻成室内的小伙伴，内部样式表比喻成邻居，外部样式表比喻成对面城市的小伙伴，元素比喻成这个屋子的屋主，屋主有需要解决的问题时，会先问谁呢？秉着就近原则，毫无疑问，先问室内的小伙伴，室内小伙伴不能解决再问邻居，最后才问对面城市的小伙伴
常用CSS样式
设置元素空间样式：
- width——设置元素的宽度
- height——设置元素的高度
- marin——设置外边距
- padding——设置内填充
- border——给元素盒子添加边框
div{
width: 100px; /* 盒子宽100px */
height: 100px; /* 盒子高100px */
margin: 50px; /* 四周外边距50px */
/* 为复合样式 margin-right/left/top/buttom：单独设置右边/左边/顶部/底部的外边距 */
/* margin: 0 50px 填写2个值时，第一个表示上下，第二个表示左右*/
/* margin：0 4px 5px 6px 填写4个值时，表示顺序为：上 右 下 左 */
padding: 50px; /* 四周内填充50px */
/* 为复合样式 分部样式同margin */
border: 1px solid black; /* 四周边框大小为1px 实线 黑色 */
/* 复合样式 border-width border-style border-color 顺序不能乱 */
background-color: lightblue;
}
橙色部分为margin外边距，绿色部分为padding内填充，可以看到背景颜色是可以延伸到padding中，而不延伸到margin中；border边框是包裹着padding和盒子内容的
设置元素内文本的样式：
- font-size——设置字体的大小
- font-weight——设置字体是否加粗（bold—加粗/normal—正常）
- font-style——设置字体形式（italic—倾斜/normal—正常）
- font-familly——设置字体（常用：“微软雅黑”“宋体”）
- line-hight——设置行高 （复合样式写法：font：style weight size/line-height familly）
- color——设置字体颜色
- text-align——设置文本对齐方式（center—居中对齐/left—向左对齐/right—向右对齐）
- text-indent——设置首行缩进距离
- text-decoration——设置文本修饰（underline—文本下添加下划线/line-througn—删除线/overline—上划线/）
- letter-spacing——设置字母间的间距
- word-spacing——设置词间距
div{
width: 200px;
height: 25px;
background-color: lightblue;
font-size: 15px; /* 字体大小为15px */
font-weight: bold; /* 字体加粗 */
font-family: "宋体"; /* 字体为宋体 */
font-style: italic; /* 字体为斜体 */
line-height: 25px; /* 行高为25px，当行高和盒子高度一样是，文本会上下居中 */
/* 复合样式: 字体大小、行高和字体不能省略，其余可省略不写 */
/* font: italic bold 15px/25px "宋体" */
color: red;
text-align: center; /* 文本居中 */
}
设置元素盒子背景的样式：
- background-color——设置背景颜色
- background-image——引入一张照片作为背景
- background-repeat——背景图片是否平铺（no-repeat—不平铺）
- background-position——设置背景图片位置
- background-attachment——背景图像是否固定或者随着页面的其余部分滚动。
（复合样式：background：color image repeat attachment position）
div{
width: 300px;
height: 300px;
background-color: lightblue; /* 背景颜色 这是背景颜色不影响引入背景图片 */
background-image: url(../img.jpg); /* 引入图片，url()里填入的是图片的地址 */
background-repeat: no-repeat; /* 不平铺 */
background-position: 50px 50px; /* 图片上左分别移动20px */
background-attachment: fixed; /* 图片固定 */
/* 复合样式 color、repeat、fixed、center可省略*/
/* background: lightblue url(../img.jpg) no-repeat fixed center */
}
除了以上介绍的样式，常用的样式还有：float、position、vitical、display、overflow等，详细知识点另附文章来介绍！
以上是我的一些常用样式总结，有很多地方写的不够详细，大体意思是有的，请多多包涵。
最后，看到不对的地方，希望多多指出。
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
