CSS基础知识总结之css样式引用的三种方式
在html中增加css样式有三种：
1.在标签中增加style属性：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<!--tag标签的图标-->
<link rel="shortcut icon" href="timg.jpg">
</head>
<body>
<div style="background-color: blue ;width: 80px;height: 80px "></div>
</body>
</html>
2.
第二种可以在head中增加style标签 style中通过选择器定位标签增加style样式
css选择器：
id选择器：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
/*id选择器*/
/*#代表id，#i1代表定位到class为i1的元素*/
#i1{
background-color: #000000;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<!--id在html只允许出现一个同名id-->
<div id="i1"></div>
</body>
</html>
class选择器：最常用
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
/*class选择器*/
/*.代表class，.c1代表定位到class为c1的元素*/
.c1{
background-color: #000000;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
标签选择器：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
/*标签选择器*/
/*所有的div的标签都带有下面属性*/
div{
background-color: pink;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
div{
background-color: pink;
width: 80px;
height: 80px;
}
.c1{
background-color: blue;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>
层级选择器：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
/*层级选择器*/
div span{
background-color: red;
width: 80px;
height: 80px;
}
#i1 span{
background-color: blue;
width: 80px;
height: 80px;
}
.c1 span{
background-color: pink;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="c1">
<span>这是span标签</span>
</div>
<div id="i1">
<span>这是span标签</span>
</div>
<div>
<span>层级选择器</span>
</div> </body>
</html>
多个标签引用同一个标签：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
/*多个标签引用同一个标签*/
#i1,#i2,#i3{
background-color: blue;
width: 80px;
height: 80px;
}
.c1{
background-color: pink;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div id="i1"></div><br>
<div id="i2"></div><br>
<div id="i3"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>
3. 在head里面使用link引入css样式表：
css表：c1.css
.c1{
background-color:red;
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>
样式表的引用顺序联系：
css表：c2.css
.c1{
background-color: pink;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="c2.css">-->
<style>
/*样式表的引用关系，以标签为起的位置，由下而上的开始应用*/
.c1{
background-color: red;
width: 100px;
height: 100px;
}
</style>
<link rel="stylesheet" href="c2.css">
</head>
<body>
<div class='c1' style="background-color: #0000CC;width: 100px;height: 100px"></div>
</body>
</html>
CSS基础知识总结之css样式引用的三种方式的更多相关文章
- Java基础知识强化25：Java创建对象的四种方式
1. Java程序中对象的创建有四种方式: ● 调用new语句创建对象,最常见的一种 ● 运用反射手段创建对象,调用java.lang.Class 或者 java.lang.reflect.Const ...
- 反射，得到Type引用的三种方式
1.使用System.Object.GetType()得到Type引用 使用一个SportsCar实例得到类型信息 SportsCar sc=new SportsCar(); Type t=sc.G ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- (转)第一天 XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
随机推荐
- PHP会话
B/S请求响应模式是无状态的.任意的请求间不存在任何的联系,不能将请求状态保持下去. 会话技术可以给每个浏览器分配持久数据,这些数据不会随着一次请求和相应结束而销毁. COOKIE cookie是一种 ...
- 20160419—JS备忘：服务器回发刷新页面提示重试的解决方案。
有事页面刷新时 提示如下: js使用的是:location.reload()的刷新方式. 使用js重新定向该页面:location.href="a.aspx"; 当使用:self. ...
- oracle系统调优
在Oracle数据库系统中,起到调节作用的参数叫初始化参数,在Oracle 8i及以前的版本中,这些初始化参数记录在INITsid.ora文件中:而Oracle 9i/10g/11g中将这些参数记录在 ...
- vCenter 部件关系简介 & 网络原理
目录 目录 主机和集群 vCenter Datacenter Cluster Host Virtual Machine Folder Resource Pool Template 数据存储 Datas ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_05 IO字符流_3_字符输出流_Writer类&FileWriter类
- base64编解码的两个函数
base64编解码的两个函数,声明,参考网络上的代码实现. unsigned char *base64_encode(unsigned char *str, long* lpBufLen) { lon ...
- vue封装element中table组件
后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件 <!--region 封装的分页 table--> <template> & ...
- 【ABAP系列】SAP MB5B中FI凭证摘要是激活的/结果可能不正确 的错误
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP MB5B中FI凭证摘要是 ...
- 【MM系列】SAP MM模块-基础配置第一篇
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-基础配置第一篇 ...
- 100 IncDec序列
IncDec序列 Description 给定一个长度为 n 的数列 a1,a2,-,an,每次可以选择一个区间 [l,r],使下标在这个区间内的数都加一或者都减一. 求至少需要多少次操作才能使数列中 ...