引入CSS的三种方式
虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉
从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。
1.内联式
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
<p style="color:red">这里文字是红色。</p>
css代码写在元素的开始标签里。
css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
2.嵌入式
嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。
3.外部式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css
”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
4.三种方式的优先级
就近原则(离被设置元素越近优先级别越高)。
优先级:内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
引入CSS的三种方式的更多相关文章
- 2CSS层叠规则(即引入CSS的三种不同方式的优先级)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 引入css的两种方式
摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...
- HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...
- html里嵌入CSS的三种方式
在HTML中定义CSS的方式有:Embedding(嵌入式).Linking(引用式).Inline(内联式),下面通过实例为大家详细介绍下它们的特点 在HTML中常用以下3种方式定义CSS:Em ...
- 引入css的几种方式
使用CSS样式的几种方式 CreateTime--2017年10月11日16:45:26 Author:Marydon a.外部样式 a1.链接式(推荐使用) <link href=&quo ...
- vue引入css的两种方式
方案1.在main.js中引入方式 import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入 @import &qu ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
随机推荐
- [规则原则定理]规则原则定理章4 HTTP&RPC
rpc是远端过程调用,其调用协议通常包含传输协议和序列化协议. 传输协议包含: 如著名的 [gRPC](grpc / grpc.io) 使用的 http2 协议,也有如dubbo一类的自定义报文的tc ...
- 前端面试题---vue部分
1.vue的两大核心思想 组件化和数据驱动 2.如何理解vue中的MVVM模式 Model-View-ViewModel(简称为mvvm)是一种设计思想,model层代表数据模型,也可以再model中 ...
- 别人的Linux私房菜(21)基础系统设置与备份策略
网络设置,手动设置IP,DHCP自动获取. 以太网协议开发出来的网卡ethN,N为数字. CentOS7对网卡命名的规则:eno代表由主板BIOS内建立的网卡,ens1由主板BIOS内建的PCI-E界 ...
- 第二周工作总结——NWNU李泓毅
注:因作业未全部提交完毕,故评分细则和千帆图等评分事项推后 1.助教博客链接:https://www.cnblogs.com/lmcmha/ 2.本周点评作业: https://www.cnblogs ...
- DataStructs.h
#ifndef _DATASTRUCS_H__ #define _DATASTRUCS_H__ #include <systemc.h> #include "GlobalPara ...
- centos6安装oracle11g过程中报错Error in invoking target “install” of makefile ‘/home/oracle/app/oracle/product/11.2.0/dbhome_1/ctx/lib/ins_ctx.mk’
报这个错误的原因是由于缺少compat_libstdc包所导致.安装即可 1.在http://www.rpm-find.net/linux/rpm2html/search.php?query=comp ...
- jtag、在线仿真器
指令集模拟器 1.部分集成开发环境提供了指令集模拟器,可方便用户在PC机上完成一部分简单的调试工作,但是由于指令集模拟器与真实的硬件环境相差很大,因此即使用户使用指令集模拟器调试通过的程序也有可能无法 ...
- CentOS 7 nginx 1.8.1安装
OS版本:CentOS 7.2nginx版本:1.8.1所需包:openssl-1.0.2m.tar.gz zlib-1.2.8.tar.gz pcre-8.36.tar.gz nginx-1.8.1 ...
- 关于H5在微信获取授权
很尴尬,flag倒了很久,这才来更新. 1.作为一枚小前端,所做的就是把微信获取授权之后的链接和所需的参数给到后端,定好之后只要获取链接就好了.(⊙o⊙)…确实就是这么简单,基本上这种授权是需要后端来 ...
- python 文件与数据格式化
https://www.cnblogs.com/li-zhi-qiang/p/9269453.html 文件和数据格式化 https://www.cnblogs.com/li-zhi-qi ...