CSS 原理

CSS是一个描述HTML文档的样式语言。

CSS描述HTML元素的显示方式。

本教程将教你CSS从基础到网页布局,学完本教程,可以设计出漂亮的网站。

本教程需要HTML知识为基础,学习HTML前往《HTML 教程

如何学习本教程?

教程中的术语、名词、概念、原理,不需要死死记住,了解,再了解,能用自己的复述出来即可。

教程中的示例,刚刚学,有些地方可能不懂,这没关系,不会影响后面的学习,过一阵子回过送来,你会豁然开朗,原来如此呀。

教程中的示例都是浏览器里执行过的,可以完美执行。

学习需要什么工具呢?

你只需下载一个Chrome浏览器和一个Notepad++一样的文本编辑器,另加一个取色器软件,无需其它工具。

将示例代码,敲入你的文本编辑器,保存,用Chrome浏览器打开;这样的事做得越多,你越有自信。


CSS是什么?

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表、级联样式表、串接样式表、阶层式样式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。

CSS的作用

HTML解决了网页结构化问题,并未解决网页美化的问题。CSS解决了美化的问题,CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。

CSS 将文件的内容与它的显示分隔开来。

CSS 节省了大量的工作,它可以控制多个网页的布局。


原理

CSS 的原理是设想每个HTML元素周围都有一个看不见的盒子。

下图是基本的HTML页面。

下图为元素加了边框,这样更容易理解这个设想:元素周围有一个盒子。

<body>元素创建了第一个盒子,然后<h1><h2><p>元素分别创建了自己的盒子。

实现代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第一个CSS程序</title>
        <style>
            *{  margin:8px;
                padding:8px;
                border:1px solid #E3722E;
            }
        </style>
    </head>
    <body>
        <h1>快乐编码</h1>
        <h2>学编程,学CSS</h2>
        <p>study hard, improve every day</p>
    </body>
</html>

块级元素:块元素换行显示,它的实例包括<h1>~<h6>、<p>和<div>元素等。

内联元素:内联元素流动于文本中并且不会换行,它的实例包括<b>、<i>、<img>、<em>和<span>

块元素内联元素示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个CSS程序</title>
    <style>
        *{  margin:8px;
            padding:8px;
            border:1px solid #E3722E;
        }
    </style>
</head>
<body>
<p>study hard, improve every day</p>
<p>世界上没有一样东西可以取代<span>毅力<span></p>
</body>
</html>