Html 之div+css布局之css基础

时间：2022-09-05 10:46:08

Css是什么

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等  From baidu

当前文章主要描述css 样式的一些基本的，最新版本的大家可自行抛砖引玉。

让我来看下面Html代码 来简单了解下css

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

        </style>

        <script type="text/javascript">

        </script>

    </head>

    <body style="background-color: yellow">

    <div style="width: 400px; height: 200px; border: 1px solid red;">

    这是一个div 元素，显式的区域，使用的是行内样式

    </div>

    </body>

</html>

执行效果如图:

Html 之div+css布局之css基础

可以看到 整个页面 背景色为黄色，div 块 呈现了 红色边框

不难看出，样式都是以 style="" 嵌套在 html 标记之中的。

CSS属性大全

点击此处查看

使用方法，都是以 style="" 嵌套在 标记之中,   属性名:属性值，多个属性之间以;分号来 分割。

例如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

        </style>

        <script type="text/javascript">

        </script>

    </head>

    <body style="background-color: yellow">

    <div style="width: 400px; height: 200px; border: 1px solid red;font-size: 23px; color: blue; text-indent: 2em;">

    这是一个div 元素，显式的区域，使用的是行内样式

    </div>

    <p style="border:10px dotted red;">测试文本信息 </p>

    </body>

</html>

结果如图:

Html 之div+css布局之css基础

好了，这篇文章就描述了基本的 css 的一些基础的 字体  边框  背景 样式属性，感兴趣的可以去试试其它相关属性，便于对这些属性有一个基本的认识与了解。

下篇文章将会描述css 选择器， css 作用优先级 ，以及css 一些基本的命名规范。

相关文章