测开之路九十:css的引用方式
第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护
第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二
第三种:外联,样式表链接,单独写一个css文件,在html的head里面用link标签引用
css
/* 定义body的背景色为紫色 */
body{ background: blueviolet;}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title> <!-- 在head里面用link标签引用css文件 -->
<link rel="stylesheet" href="../css/css01.css"> <!-- class属性为class_01的颜色属为红色 -->
<style>
.class_01{ color:red; }
</style>
</head>
<body> <h1>原始文字</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p> <!-- 内联,直接在标签里面加style属性,优先级别最高,不利于维护 -->
<h1 style="color: blue;border: solid 1px #000;">内联,直接写在标签里面,优先级别最高,不利于维护</h1>
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum
eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p> <!-- 页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 -->
<h1 class="class_01">页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二</h1>
<p class="class_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum
eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p> <!-- 外联,样式表链接,单独写一个css文件,在html的head里面用link标签引用,优先级第三-->
<p>外联,样式表链接,单独写一个css文件,在html的head里面用link标签引用</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p> </body>
</html>
测开之路九十:css的引用方式的更多相关文章
- 测开之路九十四:css之盒子模型
盒子模型 为了演示方便,把内容放到盒子里面 引用css 演示内容 外边距: 4个方向分开写 简写为一条指令,顺序为上右下左 简写为一条指令,第一个值为上下,第二个值为左右 简写为一条指令,只有一个值时 ...
- 测开之路九十二:css之背景色和背景
引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...
- 测开之路九十六:css进阶之元素显示和可见性
元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...
- 测开之路九十五:css进阶之光标和溢出内容处理
光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...
- 测开之路一百:jquery引用、语法、事件
工作中一般会使用jquery代替js,jquery官网:https://jquery.com/ 引用jquery: 第一种方式:下载引用: jquery下载官网:https://jquery.com/ ...
- 测开之路九十九:js函数、事件、window窗体对象
函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:w ...
- 测开之路九十八:js变量和语句
这里为了方便调试,在jsbin网站上面编写js脚本:https://jsbin.com/?js,console 可以点击增加/减少对应展示分页,Console为控制台部分,Output为页面部分 变量 ...
- 测开之路九十一:css常用的选择器
一:全局选择器:* 二:标签选择器,如给所有p标签加个背景色 三:id选择器:# ,如给id为id_01的元素加一个框 四:类选择器:. 如设置一个类选择器为blue,当有标签引用blue的时候,背景 ...
- 测开之路一百零五:bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
随机推荐
- 锋利的jQuery ——jQuery中的事件和动画(四)
一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件, ...
- react搭建
https://juejin.im/post/5b4de4496fb9a04fc226a7af
- 什么是CPC,CPA,CVR,CTR,ROI
合格的网络营销人员都应该熟悉下面的常见英文缩写,这些都是我们必须知道的名词解释:CVR (Click Value Rate): 转化率,衡量CPA广告效果的指标CTR (Click Through R ...
- Springboot 打jar包项目无法访问jsp问题解决方案
maven编译插件,请选择1.4.2.RELEASE版本,1.5.x的版本已经不再支持 pom.xml重要部分如下: <build> <resources> <resou ...
- java封装小实例
封装是java语言的一个重要的特性,通过把对象的属性和操作方法封装在同一个类中,对外只提供公共方法对这些数据进行set和get,同时封装也能对方法进行封装.总之封装能够有效地隐藏内部的代码细节,从而使 ...
- nginx之热部署,以及版本回滚
热部署的概念:当从老版本替换为新版本的nginx的时候,如果不热部署的话,会需要取消nginx服务并重启服务才能替换成功,这样的话会使正在访问的用户在断开连接,所以为了不影响用户的体验,且需要版本升级 ...
- Linux学习--第六天--软件包
yum在线管理 管理的是rpm包,光盘里面都有 /etc/yum.repos.d下面有四个文件,对应网络yum源,光盘yum源等.如果需要用到哪个源,将其他三个源的enabled设置为0即可. |源配 ...
- VMware虚拟机NAT模式无法上外网
VMware虚拟机NAT模式无法上外网排错思路 1,确保三种模式只有一种在连接 2,确保ip配置正确 配置的子网跟DHCP必须是同一网段 3,确保网关配置正确 网关不管怎么配,一定不要配192.168 ...
- C#基础知识之Partial
C# 2.0 可以将类.结构或接口的定义拆分到两个或多个源文件中,在类声明前添加partial关键字即可. 例如:下面的PartialTest类 class PartialTest { string ...
- Bean的生命周期与JVM**
案例: 在service里定义了一个全局变量,这类变量只能是final的.如果不是,在代码中一旦有地方给该变量进行业务赋值.当不满足赋值条件时变量仍然保留上次的赋值的值. 这是因为Bean没有销毁. ...