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属 ...
随机推荐
- mysql_Qcahce
.cpu mem disk 如果是固态硬盘ssd那就是高速公路 火箭 高铁 普通公路 mysql 配置文件:windows 下 mysql.ini linux:my.cnf lamp路径:/opt/l ...
- 红米4高配版 qusb bulk unknow device 不加电，不亮灯，没反应的 黑砖 的维修方法
unknow device处理 1. 按住按住音量减键和开机键3分钟左右 (我按了10秒左右,就成功了.) unknow device 就变qualcomm hs-usb qdloader 9008 ...
- 类File
* File类常用的构造方法: * (1)File(String s);//由s确定File对象的文件名 * (2)File(String directory,String s);//由directo ...
- 正则表达式——POSIX字符组
前面介绍了常用的字符组,但是在某些文档中,你可能会发现类似[:digit:].[:lower:]之类的字符组,看起来不难理解(digit就是"数字",lower就是"小写 ...
- linux下升级php5.4到php5.6
进入终端后查看php版本 php -v 输出可能如下: PHP 5.4.35 (cli) (built: Nov 14 2014 07:04:10) Copyright (c) 1997-2014 T ...
- elementUi--->实现上传图片效果（upload+formData）
现在谈一下elelmentui中使用Upload 上传通过点击或者拖拽上传文件(图片) <el-upload name="multfile" //上传的文件字段名 cl ...
- LaTex中集合关系的表示
集合的大括号: \{ ... \} \(\{ ... \}\) 集合中的"|": \mid \(\mid\) 属于: \in \(\in\) 不属于: \not\in \(\not ...
- mysql自动补全功能（只能用于表/列 名）
关键字:mysql自动补全,auto-rehash 注:只能补齐表,列名,使用tab进行补全操作 一.修改my.cnf vi /etc/my.cnf [mysql] auto-rehash #添加au ...
- BZOJ 4552(二分+线段树+思维）
题面 传送门 分析 此题是道好题! 首先要跳出思维定势,不是去想如何用数据结构去直接维护排序过程,而是尝试二分a[p]的值 设二分a[p]的值为x 我们将大于x的数标记为1,小于等于x的数标记为0 则 ...
- Codeforces 191C (LCA+树上差分算法)
题面 传送门 题目大意: 给出一棵树,再给出k条树上的简单路径,求每条边被不同的路径覆盖了多少次 分析 解决这个问题的经典做法是树上差分算法 它的思想是把"区间"修改转化为左右端点 ...