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属 ...
随机推荐
- 二十九、pycharm中报错“too many blank lines (3) ”等类似错误
报错如下图: 解决方法一: 鼠标移至报错处,按住Alt+enter键,选择ignore errors like this 方法二:找到设置File - Settings…… - Editor - In ...
- leetcode 374猜数字大小
// Forward declaration of guess API. // @param num, your guess // @return -1 if my number is lower, ...
- Celery定时任务|计划任务
适用场景几点几分执行特定的任务 定时任务 配置这个无需多说了和上篇文章一样 任务函数 硬菜来了 添加任务时候的写法 第一种: from celery_task.order_task import or ...
- KVM 虚拟化架构和实现原理
目录 目录 KVM虚拟化架构 devkvm QEMU OpenstackKVMQEMU 的关系 KVM的虚拟化实现 KVM虚拟化架构 KVM是嵌入在Linux操作系统标准内核中的一个虚拟化模块,它能够 ...
- tensorflow 关于 矩阵 运算 + 符号得含义。 2维 数组 + 1纬数组， 就是每一行都 加一边 1纬数组。 呵呵
小锋子Shawn(403568338) 13:51:23mnist.training.images?墨须(964489899) 13:51:27我的图片是100*100的,该怎么兼容. 小锋子S ...
- 从DT时代云栖大会聊聊恒生电子
从IT到DT,除了HOMS和配资,本文结合互联网金融的背景,帮助读者对恒生电子600570了解更多. 马云在2015杭州·云栖大会Computing Conference发表致辞时多次强调DT(Dat ...
- 5 centos 6.10 三节点安装apache hadoop 2.9.1
Hadoop 版本: apache hadoop 2.9.1JDK 版本: Oracle JDK1.8集群规划master(1): NN, RM, DN, NM, JHSslave1(2): DN, ...
- Arduino的小灯亮起来~~~
呵呵呵~~~昨天宝宝,就守着板子,跟说明书,心里默念,怎么特么还不亮?这个 东西怎么还不出!?~ 我特么没插线,可不不出么... 然后找那跟儿蓝色(我这个是蓝色的,不知道 有没有别的颜色的)的带USB ...
- JS使用 popstate 事件监听物理返回键
pushHistory(); window.addEventListener("popstate", function (e) { if (or ...
- spring data jpa 使用SQL语句查询
package com.ytkj.entity; import javax.persistence.*; import java.io.Serializable; /** * @Entity * 作用 ...