CSS 原理

最新推荐文章于 2021-09-09 21:58:34 发布

转载最新推荐文章于 2021-09-09 21:58:34 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lszw/p/10577286.html

本博客介绍了CSS相关知识。CSS是描述HTML文档的样式语言，能解决网页美化问题，将内容与显示分隔，还可控制多网页布局。其原理是设想每个HTML元素周围有看不见的盒子，同时介绍了块级元素和内联元素。

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>元素分别创建了自己的盒子。

实现代码：

 
          <!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>

块元素内联元素示例：

 
          <!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
          >