零基础必看的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教程总结: