目录
一、前言
前面写了三篇博客教程，把Html各种标签的使用做了一个具体的解读，但依靠Html写出来的界面有一个特点，就是丑，接下来就是对CSS样式的学习，让页面更加丰富多彩。
二、简介
1.Html的局限性
-
HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。
-
操作html属性不方便
-
HTML里面添加样式带来的是无尽的臃肿和繁琐
2.网页的美容师CSS
CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
-
作用
-
主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
-
CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。
-
/* 这是注释 */ 快捷键ctr+/三、CSS样式表
1.书写模板
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 具体代码写在head中的style标签中 */
</style>
</head>2.书写样式
主要有两种书写格式，一种是展开格式，另外一种是紧凑格式。具体代码如下：
<style>
/* 紧凑格式 */
p {
width: 200px;height: 200px;
}
/* 展开格式 */
p {
width: 200px;
height: 200px;
}
</style>这里优先推荐使用展开格式，虽然多出一些空间，但看着很直观。
3.书写规范
对于样式大小写：
H3 {
COLOR: RED;
}
h3 {
color: red;
}强烈推荐样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外。
对于空格：
<style>
h3 {
color: red;
}
</style>- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格
对于自定义标签的定义：
对于CSS代码中可以自定义的值，一般使用英文缩写，最好避免使用数字、汉语以及存在的标签。对于前端开发人员来说，团队合作是必要的一环，比如你随便写一个字母mmd，别人还以为你说的是妈妈的,其实你想的是么么哒,造成误会多不好。
HTML教程总结：
扫一扫
3702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
