一、前言

前面写了三篇博客教程，把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教程总结：

零基础必看的Html5+Css3+移动端前端教程（一）

零基础必看的Html5+Css3+移动端前端教程（二）

零基础必看的Html5+Css3+移动端前端教程（三）

零基础必看的Html5+Css3+移动端前端教程(四)相关推荐

python编程入门与案例详解-Python零基础必看的入门书藉：Python编程从入门到实践...
提取码:sc9i 本书是一本针对所有学习Python读者而作的Python 入门书.全书分两部分:第一部分介绍用Python编程所必须了解的基本概念,包括matplotlib.NumPy 和Pygal ...
Java零基础必看学习教程，Java开发环境配置详解
很多Java新手小白在学习Java编程的时候,碰到的第一难题就是不知道如何安装和配置java开发环境. 今天整理了史上最详细的安装及Java开发环境配置教程,通过图文并茂的方式详细讲解每一步骤,手把手 ...
怎么安装Python，超详细，零基础必看
如何下载并安装Python?(以win7 64位系统为例) 首先,通过这个链接进入python官网, Welcome to Python.orgwww.python.org/正在上传-重新上传取消 ...
Python发送微信消息（文字、图片、文件）给指定好友和微信群，零基础可看懂（附源码和教程）
前言本示例是调用Windows API模拟发送,用Python调用win32api这个库来调用Windows API模拟人的手动操作来发送消息. 在使用前,请将你微信的窗口设置为在最前面,这样就便于 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（CSS3）
一.基础班学习路线 Web服务器什么是服务器申请免费空间以及网站上传四.HTML5和CSS3提高 1.CSS3 2D转换 2D转换之移动 translate 让一个盒子水平垂直居中 2D转换之旋 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（HTML5和CSS3）
一.基础班学习路线四.HTML5和CSS3提高 1.HTML5的新特性 HTML5新增语义化标签 HTML5新增视频标签 HTML5新增音频标签 HTML5新增input类型 HTML5新增表单属性 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（边框，阴影，浮动）
一.基础班学习路线三.CSS3基础 1.综合案例-快报模块以上为使用了盒子的底边框后又使用margin的悲剧效果(右边那个才是整个盒子),所以要用padding,又因为h3没有写宽度属性,所以给它 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
一.基础班学习路线三.CSS3基础 1.CSS的三大特性 CSS三大特性之层叠性 CSS三大特性之继承性行高的继承 CSS三大特性之优先级 CSS权重的叠加十个在最后累加会变成0,0,0,10: ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一.基础班学习路线三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（CSS字体，文本）
一.基础班学习路线三.CSS3基础 1.CSS简介 CSS是层叠样式表的简称,有时也称为 CSS样式表 ,级联样式表也是一种标记语言 CSS主要用于设置HTML页面中的文本内容,图片的外形以 ...

零基础必看的Html5+Css3+移动端前端教程(四)