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

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

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

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

CSS是什么？

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

CSS的作用

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

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

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

原理

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

下图是基本的HTML页面。

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

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

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
</body>
</html>

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

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

块元素内联元素示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
<p>世界上没有一样东西可以取代<span>毅力<span></p>
</body>
</html>

CSS 原理的更多相关文章

  1. 前端开发人员需要了解的CSS原理

    转自http://web.jobbole.com/10011/ 一.浏览器的发展与CSS 网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页 ...

  2. 从事前端开发必须要了解的CSS原理

    从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...

  3. 我也来谈谈使用Zen Coding快速开发html和css原理

    zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...

  4. angular : ng-animate : css 原理，详解

    通过几中指令就能完成1.2.xx的animate ·ng-repeat ·ng-show,ng-hide ·ng-if,ng-include,ng-view ·ng-switch ·ng-class ...

  5. [转] 深度解剖DIV+CSS工作原理

    本文和大家重点讨论一下DIV+CSS工作原理,在一般情况的DIV+CSS开发静态html网页时,我们把html和CSS是分开的,形成html页面和CSS文件. DIV+CSS原理解剖 在一般情况的DI ...

  6. css的核心原理分为优先级原则与继承原则两大部分

    css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...

  7. CSS布局 ——从display，position， float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  8. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  9. 如何写好CSS？（OOCSS\DRY\SMACSS）

    我现在面对的CSS基本上就是一个三头六臂的怪物,一点不夸张,因为真的是三头六臂,同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个 ...

随机推荐

  1. phalcon7开发环境搭建

    1.安装apahce服务器 2.安装mysql 3.安装php7 4.编译和安装phalcon7 git clone --depth=1 git://github.com/dreamsxin/cpha ...

  2. MySQL中实现DROP USER if EXISTS `test`，即创建新用户时检测用户是否存在

    MySQL中实现DROP USER if EXISTS `test`,即创建新用户时检测用户是否存在    版权声明:本文为博主原创文章,欢迎大家转载,注明出处即可.有问题可留言,会尽快回复,欢迎探讨 ...

  3. NoSQL学习1

    MongoDB使用C++语言编写的一个基于分布式的文件存储的开源数据库.可以在承受高负载的情况下,保证服务器的性能. MongoDB将数据存储成为一个文档,数据结构有键值对组成.类似于JSON,字段值 ...

  4. Eclipse properties.config.yml 配置文件中文编码问题。Eclipse 配置文件插件解决方案

    写了中文默认转成unicode. 正常应该是这样子的 其实不是什么大问题只需要装一个插件就行了,插件有很多.推荐使用,Properties Editor 安装方式如下 .这里使用的是离线安装.即本地文 ...

  5. 8.2.1.2-MySQL如何优化 WHERE 语句

    这一章节讨论能够在WHERE处理语句中使用的优化. 样例使用SELECT 语句, 但是同样适用于DELETE,UPDATE语句中的WHERE语句. 注意 因为MYSQL优化器在不断的发展,MySQL执 ...

  6. Jenkins 之邮件配置

    Jenkins 之邮件配置其实还是有些麻烦的,坑比较多,一不小心就...我是走了很多弯路的. 这里记录下来,希望大家以后不要重蹈覆辙: 我测试过,这里的 Extended E-mail Notific ...

  7. spark快速大数据分析

    从上层来看,每个Spark 应用都由一个驱动器程序(driver program)来发起集群上的各种并行操作.驱动器程序包含应用的main 函数,并且定义了集群上的分布式数据集,还对这些分布式数据集应 ...

  8. ARP 欺骗攻击与防御

    <一> ARP攻防 理论 和 工具 工具: 01: Wireshark ( 抓包软件 )   02: P2P终结者 ( ARP欺骗工具 )   03: cain & abel  ( ...

  9. 02.photoshop制作透明图片步骤

    1.首先打开PS软件和图片如下.文件-新建. 2.如下图背景内容选择-透明.在确定. 3.出现了白底这就是透明的. 4.将图片背景都去除 5.在选择文件-存储为 6.格式选择.GIF的文件.其它不是透 ...

  10. groovy 从jsonList中读取某个字段

    今天又被groovy的高效吓到了. 想提取所有的itemCodes,两种玩法 一.常规方法:遍历组装 RestResult items = getListPager() def temp = [] i ...