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属 ...
随机推荐
- tikz: keep in mind these
don't add % in title, xlabel, ylabel etc., use \%
- log4j 不输出mybatis的sql
有可能导入多个日志工具jar,导致mybatis不知道使用哪种日志.修改你的mybatis配置,添加setting,指定日志类型为log4j. <configuration> <!- ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_2_使用泛型的好处
用一个案例说明使用泛型和不是用泛型的区别 这里的ArrayList没写数据类型,不写就是默认Object 多态的弊端,不能使用子类特有的方法 向下转型,转换为String类型,才能使用length 不 ...
- Docker image 和 volume 的关系
image :镜像 虚拟机容器需要加载image才能运行,镜像中打包了构建好服务的运行环境. Docker images are the basis of containers. An Image i ...
- day18 时间:time:,日历:calendar,可以运算的时间:datatime,系统:sys, 操作系统:os,系统路径操作:os.path,跨文件夹移动文件,递归删除的思路,递归遍历打印目标路径中所有的txt文件,项目开发周期
复习 ''' 1.跨文件夹导包 - 不用考虑包的情况下直接导入文件夹(包)下的具体模块 2.__name__: py自执行 '__main__' | py被导入执行 '模块名' 3.包:一系列模块的集 ...
- 19c的 rac在oracle linux7.4上搭建总结
准备: 1,ASM磁盘空间最低要求OCR的磁盘占用需求有了明显增长.为了方便操作,设置如下:External: 1个卷x40GNormal: 3个卷x30GHight: 5个卷x25GFlex: 3个 ...
- scrapy爬取booking酒店评论数据
# scrapy爬取酒店评论数据 -- 代码 here:github地址:https://github.com/760730895/scrapy_Booking-- 采用scrapy爬取酒店评论数据 ...
- pandas 入门（3）
from pandas import Series, DataFrame, Index import numpy as np # 层次化索引 对数据重塑和分组操作很有用 data = Series(n ...
- vuer-cli 安装笔记
电脑上装 的软件全卸载了.需要 重装 .整理了一下vue-cli脚手架搭建 1 先下载git 2 再下载node 3安装淘宝镜像 (https://npm.taobao.org/) 4 安装webpa ...
- Java-集合第三篇List集合
1.List集合 有序可重复集合,集合中的每个元素都有其对应的顺序索引. 2.List相对于Collection额外提供的方法: 1>void add(int index,Object elem ...