zoukankan      html  css  js  c++  java
  • web(五)CSS引入方式,编写规范及调试

    CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准

    CSS的主要作用:

    • 美化html元素的外观,例如设定背景颜色、字体等。
    • 对网页元素进行布局、以及定位。
    • 对html元素进行响应式布局。
    • 实现动画效果以及2d、3d转换。 配合html、js完成网页特效。

    css的版本介绍

        css1:发布于 1996年12月17 日,制定了css的基本显示样式标准,如选择器、字体、颜色、背景、布局等。

        css2:发布于 1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持,同时扩展了选择器的语法以及定位功能。

        css3:在css2基础上增加了更多的属性,更多单位,扩展了动画、2d与3d转换功能。(此版本至今已经很完善,但少量属性仍在调整中)。

    为html标签引入css样式有如下几种方式:

      内联样式表

        也叫内嵌式或行内式,在html代码中嵌入css样式,只对当前标签起作用。

        基本语法

    1 <div style=“color:yellow;background:red”></div>

        缺点分析:无法对对一组标签进行样式渲染导致css程序多,html与css耦合,影响开发效率与执行效率。(不推荐使用)

      嵌入样式表

        也叫页内样式,在网页上使用style标签包裹样式代码。

        基本语法

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title></title>
     6         <style type="text/css"><!--使用style标签包裹-->
     7             .container{/*选择器*/
     8                 background: red;/*定义属性、值*/
     9             }
    10         </style>
    11     </head>
    12     <body>
    13         <div class="container">这是一个div容器</div>
    14     </body>
    15 </html>

        缺点分析:html文件中包含大量css程序,页面结构与样式耦合,不利于维护。(不推荐使用)

      外联样式表

        也叫外部样式,将样式文件独立的编写在样式文件中,在html中显示的声明引入样式文件。(建议使用)

        引入css文件声明

     1 <head>
     2  ……
     3 <link   href=" href="css/04test.css"   rel="stylesheet"   type="text/css" />
     4 ……
     5 </head>
     6 <!--
     7 link元素:连接元素,是head标签的子标签。
     8 href:设定引入外部文件的路径url。
     9 type:设置或获取对象的 MIME 类型。
    10 -->

      导入样式表

        在css编写容器中使用@import导入外部css文件

    1 <style type="text/css">
    2     @import url(“css/04test.css");
    3 </style>
    4 <!--
    5 @import:导入样式的规则关键字。
    6 url(“css路径”):导入外部css文件的路径。
    7 -->

    编写方式的基本原则:

    • 借助智能提示编写。
    • 使用外部引入方式,元素与样式分离。
    • 编写html、css使用小写字母编写。
    • 良好的缩进格式与注释习惯。
    • 良好的命名规范。

    调试方式:

      通过开发人员选项进行调试(快捷键F12)。如下为两种最长出现的 错误:

        1、部分样式无法渲染

          原因分析:在css文件中出现语法错误,导致浏览器中断执行。

          解决方案:通过半数删除的方式定位错误语法。

        2、布局样式错乱

          原因分析:在css文件某一个子元素尺寸定义错误,导致布局错乱。

          解决方案:通过开发人员选项或检查元素的方式,逐一查看各个元素的大小。

        

  • 相关阅读:
    关于 web service 参数传递的序列化反序列化问题
    (转)GIS理论(墨卡托投影、地理坐标系、地面分辨率、地图比例尺、Bing Maps Tile System)
    (转)如何oracle调试存储过程
    word中字号和磅数的对应
    (转)C# 泛型相关讲解
    16 款最流行的 JavaScript 框架(转)
    mark:about 手势
    UIWebView
    android 无法安装ApiDemos
    Android开发中的单元测试
  • 原文地址:https://www.cnblogs.com/-maji/p/7466771.html
Copyright © 2011-2022 走看看