zoukankan      html  css  js  c++  java
  • 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 一些基本的命名规范。

  • 相关阅读:
    ASE19团队项目 beta阶段 model组 scrum report list
    ASE19团队项目 beta阶段 model组 scrum7 记录
    ASE19团队项目 beta阶段 model组 scrum6 记录
    ASE19团队项目 beta阶段 model组 scrum5 记录
    ASE19团队项目 beta阶段 model组 scrum4 记录
    ASE19团队项目 beta阶段 model组 scrum3 记录
    ASE19团队项目 beta阶段 model组 scrum2 记录
    ASE19团队项目 beta阶段 model组 scrum1 记录
    【ASE模型组】Hint::neural 模型与case study
    【ASE高级软件工程】第二次结对作业
  • 原文地址:https://www.cnblogs.com/zhiyin/p/5992435.html
Copyright © 2011-2022 走看看