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样式，只对当前标签起作用。
基本语法
<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引入方式，编写规范及调试的更多相关文章
- 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性
文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式 各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...
- CSS引入方式的区别详解
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- link标签和css引入方式
link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: <!DOCTYPE h ...
- css引入方式和基本样式
css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...
- css 基础 css引入方式
color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...
- web@css引入方式，基本选择器,3大特性,高效运行
4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素. 1.不要再ID选择器前使用标签名 解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...
随机推荐
- centos7救援模式--rescue模式
前序 经典问题:系统无法进入,如grub损坏或某个配置文件改错 操作 1 按方向键到Boot,选到Hard Driver,按减号,使其下移,最终让CD-ROM Drive到第一行,并按F10保存 2 ...
- ant___令牌过滤器
令牌过滤器允许我们在复制时过滤文件中的数据.要进行过滤,需要使用一个必须与过滤器任务中的@token @设置匹配的标记.任务使用@作为标记分隔符.为了实现此功能,apache ant提供了使用toke ...
- How to use “cat” command on “find” command's output?
You can do this with find alone using the -exec action: find /location -size 1033c -exec cat {} + {} ...
- CSS布局学习（二） - flex属性
flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...
- $set()的正确使用方式
vue给对象新增属性,并触发视图更新 如下代码:给student对象新增age属性 data () { return { student: { name: '', sex: '' } } } 众所周知 ...
- C/C++.判断文件是否存在(_access)
1. int _access(char* path,int mode)头文件<io.h>功能:确定文件或文件夹的访问权限.如果指定的存取方式有效,则函数返回0,否则函数返回-1. 参数pa ...
- Linux下设置svn开机自启动
方式一:centos 7 设置svn开机自启动 使用新的systemctl 服务命令 (笔者成功验证过,该方式可行) [root@iZjvr37lpviqbkZ init.d]# vi /lib/s ...
- Linux出现wrong ELF class: ELFCLASS64
安装软件时出现问题 ×.so.×:wrong ELF class: ELFCLASS64 ,大致的意思是软件是32位的,需要32位的 ×.so.×动态链接库,而系统是64位的所提供的该 动态链接库 ...
- Java集合框架源码分析（2）LinkedList
链表(LinkedList) 数组(array)和数组列表(ArrayList)都有一个重大的缺陷: 从数组的中间位置删除一个元素要付出很大的代价,因为数组中在被删除元素之后的所有元素都要向数组的前端 ...
- NopCommerce 更改发票字体
NopCommerce 默认是用~/App_Data/Pdf/FreeSerif.ttf 这个字体的. 用这个字体,发票里的中文不能显示. 可以把c:\windows\font\simhei.ttf ...