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

一、前言

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

经验分享 程序员 微信小程序 职场和发展