CSS基础

CSS3基础入门

一：CSS简介

CSS（层叠式样式表）是用来给HTML标签添加样式的语言。

                                    前端三层
		语言							功能

结构层		HTML				搭建结构、放置部件、描述语义
样式层		CSS				美化页面、实现布局
行为层		JAVAScript			实现交互效果、数据收发、表单验证等

CSS使样式和结构分离，样式和结构不用“杂糅着写”，HTML负责结构，CSS负责样式，选择器为两者的纽带。

CSS就是样式的”清单“，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来。

CSS没有加减乘除、与或非、循环、选择、判断，CSS不是“编程”，就是简单直接的罗列样式。

二：CSS3书写位置

（1)内嵌式 最常用的方式就是内嵌在.html文件中，在< head>< /head>标签对中，书写< style>< /style>标签对，里面书写CSS语句

（2）外链式 将CSS存成.css文件，然后使用< link>标签引入，优点是多个html网页可以共用一个css样式表文件。

例如：<link rel="stylesheet"  href="css/css.css">
            rel关系
	stylesheet样式表
	css/css.css路径和文件名

（3）导入式

导入式是最不常见的的样式表导入方法,因为在使用时不会等待css文件加载完毕，而是会立即渲染HTML结构，所以文件会有几秒钟的“素面朝天”的时间。

例如：< style> @import url(css/css.css); < /style>

（4）行内式

样式可以直接通过style属性写在标签身上 例如：< h2 style="color: red;">二级标题< /h2>

行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用，后台工程师常用行内式。

三：CSS3 的基本语法

例如：

     h1 {
                color: green;
                font-weight: bold;
                font-style: italic;
 }
        p {
                font-size: 20px;
                background-color:orange;
       }

每个选择器最后一条样式可以不写分号，也可以不换行。 CSS的注释为：/* 文本*/

 例如：p{
		/*设置文字字号*/
		font-size: 40px;
		}