Html 之div+css布局之css基础

时间 2019-12-02

标签 html div+css div css 布局基础栏目 HTML 繁體版

原文原文链接

Css是什么

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

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

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

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

执行效果如图: java

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

不难看出，样式都是以 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>

View Code

结果如图:spa

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

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