css（一）-- 概述以及引入方式
概述
简单的来说：css在一个网页中负责页面数据的样式，从而使得页面的结构和表现分离。
引入方式
css引入到html中的方式一共分为三种：
1、内部样式：在style标签中编写css代码。此种引入方式只能作用于本页面，复用性不强。
格式：
<style type="text\css">
编写css的代码。
</style>
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a{
color: red;
font-size: 20px;
}
</style>
</head> <body>
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.aiqiyi.com">爱奇艺</a><br />
<a href="http://www.youku.com">优酷</a><br />
</body>
</html>
2、外联样式：可以引入外部的css文件。 推荐使用。
css文件代码
a{
color: red;
font-size: 20px;
text-decoration: none;
}
外联样式的格式分为两种：
格式一：使用link标签。 推荐使用...
具体格式：
<link href="css文件的路径" rel="stylesheet">
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/1.css" rel="stylesheet" />
</head> <body>
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.aiqiyi.com">爱奇艺</a><br />
<a href="http://www.youku.com">优酷</a><br />
</body>
</html>
格式二：使用<style>引入
具体格式：
<style type="text/css" >
@import url("css的路径");
</style>
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("css/1.css");
</style>
</head> <body>
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.aiqiyi.com">爱奇艺</a><br />
<a href="http://www.youku.com">优酷</a><br />
</body>
</html>
link和@import引入外部样式的区别：
(1)、隶属上的差别
link属于HTML标签，而@import完全是CSS提供的一种方式。
(2)、@import次数限制
@import只能引入31次css文件。
(3)、加载顺序的不同
当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
(4)、兼容性上的差别
由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题
(5)、使用DOM控制样式时的差别
当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
3、行内样式：直接在html标签使用style属性编写。 只能用于本标签中，复用性较差。 不推荐使用。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> </head> <body>
<a href="http://www.baidu.com" style="color: black; text-decoration: none;">百度</a><br />
<a href="http://www.aiqiyi.com">爱奇艺</a><br />
<a href="http://www.youku.com">优酷</a><br />
</body>
</html>
css中的注释格式：/* css的注释 ..*/
注意：注释不可以嵌套。
css（一）-- 概述以及引入方式的更多相关文章
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
- html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- CSS（一） 引入方式 选择器 权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
- CSS三：CSS的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
随机推荐
- Python作用域
以下依据Python 3 1.Python变量查找顺序为LEGB(L:Local,E:Enclosing,G:Global,B:Built-in). 2.实际上,在Python中,只有模块,类以及函数 ...
- FZU 1912 Divisibility by Thirty-six（整除问题+字符串维护+贪心）
这个整除36的与整除45的完全一样,就是被4整除的有点多,但都是两位数,所以枚举后面两位就可以了. #include <stdio.h> #include <string.h> ...
- java 工作内存
所谓线程的“工作内存”到底是个什么东西?有的人认为是线程的栈,其实这种理解是不正确的.看看JLS(java语言规范)对线程工作 内存的描述,线程的working memory只是cpu的寄存器和高速缓 ...
- Linux学习 -- Shell基础 -- Bash变量
变量 默认是字符串型,数值型需要显示指定 等号两侧都不能有空格 单引号:原始字符串 双引号:保留转义 命令结果作为值:反引号 或 $() 环境变量一般用大写 自定义变量 变量定义 name=& ...
- 河南多校联合训练 F 不是匹配
描述 有N个人,N个活动, 每个人只会对2个或者3个活动感兴趣, 每个活动也只有两个人或者两个活动对它兴趣,每个人参加一个 感兴趣的活动需要一天 ,且当天该活动被参加时,其他的人不能参加 如果 ...
- 最简单的epoll的使用范例 ： 监听 标准输入 ，并将数据回显到终端
#include<stdio.h>#include<stdlib.h>#include<unistd.h>#include<sys/epoll.h> # ...
- Linux中防火墙centos
一般的防火墙用下面这些简单的配置都能达到目的 1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开 ...
- zepto学习之路--核心函数$()的实现
$()可以说是jquery的精华了,为dom操作带来了极大的灵活和方便.zepto号称“移动版的jquery”,那么它是怎么来实现这个核心函数呢?我们来详细探讨下. 1.首先,我们看下zepto中它是 ...
- JS 从一个字符串中截取两个字符串之间的字符串
/************************************************* 函数说明:从一个字符串中截取 两个字符串之间的字符串 参数说明:src_str 原串, start ...
- C# 经典入门12章-使用泛型-1
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8sAAAK5CAIAAAAHDiuGAAAgAElEQVR4nOyd9V9Uzfv/v3/J0t0N0p