• Html 之div+css布局之css基础


    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=" 400px; height: 200px; border: 1px solid red;">
        这是一个div 元素,显式的区域,使用的是行内样式
        </div>
        </body>
    
    </html>

      执行效果如图: 

    可以看到 整个页面 背景色为黄色,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=" 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

    结果如图:

     

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

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

  • 相关阅读:
    jquery ready()的几种实现方法小结
    jQuery之$(document).ready()使用介绍
    jquery的$(document).ready()和onload的加载顺序
    php var_export与var_dump 输出的不同
    PHP获取和操作配置文件php.ini的几个函数
    PHP 网站保存快捷方式的实现代码
    php 图形验证码的3种方法
    面向对象基础01
    提高记忆力
    Python数据分析环境和工具
  • 原文地址:https://www.cnblogs.com/zhiyin/p/5992435.html
Copyright © 2020-2023  润新知