CSS 原理
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 原理的更多相关文章
- 前端开发人员需要了解的CSS原理
转自http://web.jobbole.com/10011/ 一.浏览器的发展与CSS 网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页 ...
- 从事前端开发必须要了解的CSS原理
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...
- 我也来谈谈使用Zen Coding快速开发html和css原理
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- angular : ng-animate : css 原理，详解
通过几中指令就能完成1.2.xx的animate ·ng-repeat ·ng-show,ng-hide ·ng-if,ng-include,ng-view ·ng-switch ·ng-class ...
- [转] 深度解剖DIV+CSS工作原理
本文和大家重点讨论一下DIV+CSS工作原理,在一般情况的DIV+CSS开发静态html网页时,我们把html和CSS是分开的,形成html页面和CSS文件. DIV+CSS原理解剖 在一般情况的DI ...
- css的核心原理分为优先级原则与继承原则两大部分
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
- CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- 如何写好CSS？（OOCSS\DRY\SMACSS）
我现在面对的CSS基本上就是一个三头六臂的怪物,一点不夸张,因为真的是三头六臂,同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个 ...
随机推荐
- Java - 28 Java 泛型
Java 泛型 如果我们只写一个排序方法,就能够对整型数组.字符串数组甚至支持排序的任何类型的数组进行排序,这该多好啊. Java泛型方法和泛型类支持程序员使用一个方法指定一组相关方法,或者使用一个类 ...
- 解决IIS7下主机名灰色无法修改问题
打开IIS ,找到网站,右击编辑绑定时: 关于导入iis .pfx格式的证书后,编辑绑定时,主机名为灰色的问题 解决方法 : (1)打开C:\Windows\system32\inetsrv\co ...
- IIS Express内存溢出错误
IIS Express只是vs自带的一个简单版开发调试用的web服务器,所以本身貌似并不能容纳太多内存,有时候内存占用超过一定程度就会出错. 这时候可以试着发布到真正的IIS上查看一下,可能就不会出错 ...
- day6需要记忆（元组字典集合）
一:基本使用:(元组 tuple)优先掌握的操作1.按索引取值(正向取+反向取):只能取2.切片(顾头不顾尾,步长)3.长度 len()4.成员运算in和not in5.循环需要掌握的操作1.cou ...
- vscode 正则 计算代码全部有效行数；清除文件空行
清除空行: 正则表达式:^\s*(?=\r?$)\n 计算全部代码行数: 正则表达式:b*[^:b#/]+.*
- 最小化安装CentOS 7后，图形界面的安装（GNOME、KDE等）
安装图形化界面: 1.首先安装X(X Window System),命令为 yum groupinstall "X Window System" 2.检查一下我们已经安装的软件以及 ...
- 介绍Collection框架的结构；Collection 和 Collections的区别
介绍Collection框架的结构:Collection 和 Collections的区别 集合框架: Collection:List列表,Set集 Map:Hashtable,HashMap,Tre ...
- django---单表操作之展示书籍列表
下面使用python console对数据库进行增删改查 下面我们来举个例子在页面上展示记录 结果: 注意html里面变量的写法 {% for book in book_list %} <tr& ...
- 《GPU高性能编程CUDA实战》第五章 线程并行
▶ 本章介绍了线程并行,并给出四个例子.长向量加法.波纹效果.点积和显示位图. ● 长向量加法(线程块并行 + 线程并行) #include <stdio.h> #include &quo ...
- [记录] Linux Apache隐藏index.php
1. 在项目更目录下新建 .htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEng ...