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属 ...
随机推荐
- 常用模块random/os/sys/time/datatime/hashlib/pymysql等
一.标准模块 1.python自带的,import random,json,os,sys,datetime,hashlib等 ①.正常按照命令:打开cmd,执行:pip install rangdom ...
- 06 使用bbed修复update的数据--01
场景1 表t3 SQL> select * from t3; ID NAME ---------- -------------------- aaa bbbb SQL> update t3 ...
- MongoDB优化心得分享
这里总结下这段时间使用mongo的心得,列出了几个需要注意的地方. 1. 系统参数及mongo参数设置 mongo参数主要是storageEngine和directoryperdb,这两个参数一开始不 ...
- Python笔记(二十三)_魔法方法_字符串的魔法方法
__str__和__repr__ 如果要把一个类的实例变成字符串,就需要实现魔法方法__str__()和__repr__ >>>class A: def name(self): re ...
- 东软、天健、金仕达、杭创、中联、NECHIS、军字一号 HIS产品的比较
HIS主流厂商产品介绍1.沈阳东软医疗系统有限公司创立于1998年公司是中国目前最大的软件集团——东软集团为技术和资源依托,以研制生产大型医疗设备为主,同时为医院数字化提供全面解决方案.但是,公司改制 ...
- [Python3] 008 列表内涵，“满腹经纶”
目录 简述 少废话,上例子 例1 用 for 创建列表 例2 看看乘法"向"着谁 例3 给列表加一张"滤纸" 例4 列表生成式可以嵌套 例5 列表生式还能嵌入条 ...
- Java-Lambda表达式第一篇认识Lambda表达式
1.Lambda表达式时Java 8新增的特性.Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码创建只有一个抽象方法的接口(即函数式接口)的实例. 2.当使用Lamb ...
- Ant-编译构建(2)-第3方jar包引入、log4j2
1.项目目录结构图,lib包引入了一些关于common logging+log4j2相关的jar. 2.编写相关的build.xml <?xml version="1.0" ...
- Webpack4、iView、Vue开发环境的搭建
导读 项目使用了 yarn ,一个快速.可靠.安全的依赖管理工具.yarn 是一个类似于npm的包管理工具,它是由 facebook 推出并开源,它在速度,离线模式,版本控制的方面具有独到的优势.此项 ...
- 树莓派上编译安装python3.6
1.更新树莓派系统 sudo apt-get update sudo apt-get upgrade -y 2.安装python依赖环境 sudo apt-get install build-esse ...