HTML 引用Css样式的四种方式

不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者

内部引用方式1:

   直接在标签内用 style 引用,如:

<div class="pmc" style="border:1px solid #440000;padding=0px;margin:40px;"> </div> 

内部引用方式2:

  在页面头文件的<style></style>标签里引用,如:

如此话,style 标签最好放到<head>标签里面,不过我试过没放进去也是可以的
<head>
<style type="text/css">body{padding:50px;margin:20px;padding:0px;background:#ffffff;line-height:21px}.pmc{margin:10px; padding:8px 0px 10px 5px; height:auto; border-bottom:1px solid #e8e5e5;}.pmc .title{ padding-bottom:5px;}.pmc .pic{ width:78px; height:100px; float:left; border:1px solid #ff0000; }.pmc .price{ padding:17px 0px 0px 20px; float:left; color:#ca0000;}.pmc .price.title{ padding-bottom:5px;}#test{border:1px solid #440000; width:200px;height:100px;}
</style>
</head>

外部引用方式1:

  用<link>标签,如:

注意:不要放到页面头部的<style>标签里面,且href可不转义:即<pre name="code" class="html">href="D:\learn\css.css" =》 href="D:\\learn\\css.css"
<link REL="STYLESHEET" type="text/css" href="D:\learn\css.css" />

 

外部引用方式2:

  用@import 方式,如:

 注意:这种方式一定要放到<style></style>里面,并且一定要用转义:即 url("D:\\learn\\css.css") 只能这样,不能 url("D:\learn\css.css")
@import url("D:\\learn\\css.css");

顺便说一声:id比clas优先

以上均为个人经验,仅供参考!



转载于:https://www.cnblogs.com/xiaxiaolu/p/4367150.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575366.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

实例对象和构造函数的关系及原型&#xff1a; 实例对象是通过构造函数创建出来的&#xff0c;实例对象的构造器constructor就是指向构造函数的&#xff1b;每个实例对象中的同一方法的指向是各不相同的&#xff0c;但是其属性值相同的属性可以相同&#xff0c;这样会造成内存浪…

phpstorm IDE编辑器使用手记

a.选项卡限制问题 突破打开的文件选项卡个数限制&#xff1a;默认安装后的phpstorm打开的文件个数是有限制的&#xff0c;默认是10个。也就是最多同时打开10个文件进行编辑。 超过10个就会自动关闭前面最先打开的文件。所以我们要修改设置&#xff1a;File > Setting 打开设…

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动端web现状&#xff1a; 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;Opera浏览器&#xff0c;百度手机浏览器&#xff0c;360安全浏览器&#xff0c;谷歌浏览器&#xff0c;搜狗手机浏览器&#xff0c;猎豹浏览器及杂牌浏览器。移动端常见的浏览…

Centos 6.5(64bit)上安装Vertica single node

在Win8上使用虚拟机Virtualbox安装Centos6.5,想在上面安装vertica. 以下记录了我在安装的过程中遇到的问题与一些解决方案。 1.安装Centos的时候遇到了一个恼人的问题&#xff0c;即安装成功后第一次启动时会需要你配置一些用户信息&#xff0c;时区信息和Kdump信息。 我当时选…

less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入

less基础&#xff1a; CSS是一门非程序语言&#xff0c;没有变量、函数、作用域等&#xff0c;此时使用rem单位就会出现图片等大量计算尺寸的问题&#xff0c;但是less可以轻松实现运算&#xff0c;它是CSS预处理语言&#xff0c;引入了变量、混入、函数等&#xff0c;常见的C…

Mysql数据库备份和按条件导出表数据

Mysql数据库备份和按条件导出表数据一、备份数据库# mysqldump -u root -p dbcurr>/home/20090219.sqlmysqldum为备份命令&#xff0c;-u用户&#xff0c;-p密码&#xff0c;dbcurr数据库名&#xff0c;>备份符&#xff0c;/home/20090219.sql存储数据文件的路径。www.2…

jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

jQuery简介&#xff1a; jQuery是一个高效、精简并且功能丰富的javascript库&#xff0c;它提供的API简单易学&#xff0c;且兼容众多浏览器&#xff0c;极大地简化了javascript代码开发&#xff0c;包含内容&#xff1a;HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函…

睡觉应该按时

最近又想奋起 &#xff0c;最天又是 12 点多睡的&#xff0c;结果呢&#xff0c;呵呵&#xff1f; 一个规律的认识&#xff0c;真是反反复复&#xff0c;希望养成一个好的习惯&#xff0c;而不是不能可持续发展的习惯转载于:https://www.cnblogs.com/51Tsinghua/p/3831444.html…

golang的指针到string,string到指针的转换

由于某个需求&#xff0c;需要如题的转换&#xff0c;废话不多说&#xff0c;直接贴代码了&#xff0c;其实挺丑了&#xff0c;备用了 func (this *Server) socketParserHandler(client *genTcpServer.Client, fullData []byte) {fmt.Println("original data is", cl…

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…

atitit.提升开发效率---mda 软件开发方式的革命

atitit.提升开发效率---mda 软件开发方式的革命 1. 软件开发方式的革命开发工具的抽象层次将再次提升 1 2. 应用框架和其实现相分离 2 3. 目前的问题模型和代码不同步 2 4. MDA的历史及其由来 2 5. MDA的三个主要目标是&#xff1a;轻便性、 互操作性和可重用性。 3 6. MDA跟代…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…

C_文件读写流

strcmp() 所在头文件&#xff1a;string.h 功能&#xff1a;比较俩个字符串 一般形式&#xff1a;strcmp(字符串1&#xff0c;字符串2) 说明&#xff1a; 当S1<S2时&#xff0c;返回为负数return result,result<0 当S1S2时&#xff0c;返回值0 当S1>S2时&#xff0c;返…

初次使用Apache、ip地址、防火墙、域名、DNS、hosts文件、端口、URL介绍、Apache配置文件、配置虚拟主机、请求响应、http协议、

Apache提供web服务&#xff1a; 启动Apache&#xff0c;让其客户端可以使用你机器上安装的Apache提供的web服务&#xff0c;访问你机器上的网站。这种情况下你的计算机就是服务器&#xff0c;别人的机器就是客户端。 注意&#xff1a;确保配置文件语法检查通过&#xff0c;确…

量子计算机算法与应用研究论文(转载务必注明出处)

量子计算机算法与应用研究 学科分类&#xff1a;计算机科学 湖北省沙市中学 谢晓啸 摘要 1.量子计算机 2.量子计算机算法 3.移动互联 4.云计算 5.经典计算机的局限 6.量子计算前景 二零一四年一月十二日 目 录 摘 要......................................................…

cookie和session、web服务工作原理、Apache配置php扩展、php简介

cookie和session: cookie和session区别&#xff1a;cookie数据是存在本地的&#xff0c;而session数据是存在服务端的&#xff0c;session比cookie更安全。 cookie&#xff1a;用于http做会话时记住客户端所做的事,这里可以解决首次登陆页面广告等问题。 服务端与客户端在做开…

分享MYSQL中的各种高可用技术(源自姜承尧大牛)

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…

php中数据类型、数组排序、循环语句、混编、操作本地文件流程、常用API、函数、魔术常量

php中数据类型&#xff1a; php中有7种数据类型&#xff0c;分别是&#xff1a; //1.String字符串&#xff0c;用引号包裹的字符&#xff0c;如&#xff1a;$str hello word;//2.Integer整型&#xff0c;可以是正数或负数&#xff0c;有十进制、十六进制、八进制&#xff0c;…

J2ME游戏中的图片处理

图片资源乃是游戏的外衣&#xff0c;直接影响一个游戏是否看上去很美。在J2ME游戏开发中&#xff0c;由于受到容量和内存的两重限制&#xff0c;图片使用受到极大的限制。在这种环境中&#xff0c;处理好图片的使用问题就显得更加重要。 本文从容量和内存两个方面谈谈J2ME游戏图…