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样式，只对当前标签起作用。

　　　　基本语法

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

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

　　嵌入样式表

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

　　　　基本语法

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css"><!--使用style标签包裹-->

             .container{/*选择器*/

                 background: red;/*定义属性、值*/

             }

         </style>

     </head>

     <body>

         <div class="container">这是一个div容器</div>

     </body>

 </html>

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

　　外联样式表

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

　　　　引入css文件声明

 <head>

  ……

 <link   href=" href="css/04test.css"   rel="stylesheet"   type="text/css" />

 ……

 </head>

 <!--

 link元素：连接元素，是head标签的子标签。

 href:设定引入外部文件的路径url。

 type：设置或获取对象的 MIME 类型。

 -->

　　导入样式表

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

 <style type="text/css">

     @import url(“css/04test.css");

 </style>

 <!--

 @import：导入样式的规则关键字。

 url(“css路径”)：导入外部css文件的路径。

 -->

编写方式的基本原则：

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

调试方式：

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

　　　　1、部分样式无法渲染

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

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

　　　　2、布局样式错乱

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

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

　　　　

web(五)CSS引入方式，编写规范及调试的更多相关文章

  1. 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  2. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  3. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  4. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

  5. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  6. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  7. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  8. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  9. web@css引入方式，基本选择器,3大特性,高效运行

    4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素.      1.不要再ID选择器前使用标签名        解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...

随机推荐

  1. 微信小程序，天气预报（百度地图开放平台API）

    小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...

  2. [c/c++] programming之路（19）、数组指针

    一.指针运算 #include<stdio.h> #include<stdlib.h> void main0(){ ; int *p=&a; printf());//变 ...

  3. Linux常用命令——文件搜索命令

    Linux常用命令——文件搜索命令 Linux  以#号开头的内容都是内容描述或配置项 find 描述:文件搜索 语法:find [搜索范围] [范围条件] . 当前目录 示例:[root@local ...

  4. wrk 压测中请求无法响应问题解决过程

    ================= 遇到问题 =================$ 直连压测 wrk -c10000 -t100 -d100m http://localhost:9981/order/ ...

  5. 使用echarts时option可以复用的方法

    其实复用option很简单,在所要展示的图形在其他需求大致一致时,即可写一个option然后设置不同的地方就好了,坐标轴.series等都可以设置,具体代码如下: var barLeft = echa ...

  6. SpringMVC使用Swagger

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服 ...

  7. [JavaScript] 设置函数同名变量为false会导致函数无法执行

    var findEmail=false; function findEmail(){ alert("findEmail");} 这样函数不会运行. 为了保证函数可以运行,修改为: ...

  8. get UI URL

    DATA:LV_APPL_MODEL TYPE REF TO IF_BSP_WD_APPL_MODEL.    DATA:RV_URL TYPE STRING.     cl_bsp_wd_appl_ ...

  9. Python 同一文件中，有unittest不执行“if __name__ == '__main__”，不生成HTMLTestRunner测试报告的解决方案

    1.问题:Python中同一个.py文件中同时用unittest框架和HtmlReport框架后,HtmlReport不被执行. 2.为什么?其实不是HtmlReport不被执行,也不是HtmlRep ...

  10. sass command

    compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir " ...