CSS的三大样式你了解多少
目录
- CSS样式
- 行内式
- 内部式
- 外部式
- 多重样式优先级
- 总结
CSS样式
行内式
又叫：内联样式、行内样式、嵌入式样式
<!-- style作为属性直接写在标签后面, style属性可以包含任何 CSS属性 --> <div style="font-size: 40px; color: #FF0000;">我是div</div> <div style="font-size: 40px; color: blue;">我是div2号</div> <p style="font-size: 40px; color: orange;">我是段落</p>
- 当样式仅需要在一个元素上应用一次时，要使用内联样式
- 缺点
- 将表现和内容混杂在一起，结构样式没有分离，不利于后期维护
- 样式不能重复使用 ( 推荐不使用 )
内部式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式表</title>
<!-- 2、在head中间创建一个style标签 -->
<style type="text/css">
/* 3、在style标签中，就可以直接书写css代码，进行修饰 */
p {
color: red;
font-size: 30px;
/*
在书写css的时候，如果没有特殊规定，
数值必须带单位(html不必)，px:像素
*/
}
div{
color: blue;
font-size: 80px;
}
</style>
</head>
<body>
<!-- 1、先创建想要修饰的对象 -->
<div>CSS基础学习</div>
<p>我是段落</p>
</body>
</html>
- 当单个文档需要特殊的样式时，使用内部样式表
- 适合案例、短小的页面开发
- 使用
<style>标签在文档头部定义内部样式表 <style>标签放在哪里都可以，不一定要放在<head>里面。之所以放在<head>里面，是为了让浏览器在加载的时候先加载CSS，这样的话浏览器就会先心里有数，知道谁要修饰成什么样式，等加载到html之后就可以直接把样式给到相关对象上。- 优点：结构样式分离，好维护
- 缺点：只能在一个页面中使用CSS样式
外部式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式表</title>
<!-- 3、利用<link>标签或者import引入css文件 -->
<!-- css外部引入方式1(推荐使用) -->
<!--
rel: relationship;
rel属性是必须的, 规定当前文档与被链接文档/资源之间的关系
stylesheet:样式表
-->
<link rel="stylesheet" type="text/css" href="外部样式.css" />
<!-- link的另一种用法，链接标题<title>前面的小图标 -->
<link rel="icon" href="images/icon.jpg" />
<!-- css外部引入方式2 -->
<style type="text/css">
@import url("demo.css"); /* @import：导入，引入； */
</style>
</head>
<body>
<!-- 1、先创建想要修饰的对象 -->
<div>CSS基础学习外部样式</div>
<div>CSS基础学习外部样式</div>
<p>我是段落</p>
<p>我是段落</p>
<!-- 2、新建一个css文件 -->
</body>
</html>
- 当样式需要应用于很多页面时，外部样式表将是理想的选择
- 适合整站开发、比较长的页面开发
- 在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用
<link>标签链接到样式表，浏览器会从CSS文件中读到样式声明，并根据它来格式文档 - 优点
- 结构化样式分离，好维护
- 样式重用，可以多个页面使用
<link>和import的区别- 本质上来看，
<link>是HTML的标签，而import是CSS提供的一种方式 - 加载顺序上
<link>是当页面 ( body里面的内容 ) 被加载的时候 ( 也就是被浏览者浏览的时候 )，<link>引入的CSS会同时被加载import引入的CSS会先等页面加载完毕之后再加载，如果用这种加载方式，会在网速比较慢的时候，出现闪烁的效果，影响用户体验
- 兼容性上的区别
@import是CSS2.1提供的，所以老的浏览器不支持，@import只有在IE5以上的才能识别<link>标签无此问题
- 使用DOM
- 当使用JavaScript控制DOM去改变样式的时候，只能用
<link>标签 - 因为
@import不是DOM可以控制的
- 当使用JavaScript控制DOM去改变样式的时候，只能用
- 本质上来看，
多重样式优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重样式优先级</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<style type="text/css">
div{
color: blue;
}
p{
color: blue;
}
</style>
<!--
demo.css里面p标签设置的是红色
这里<style>距离<p>标签比<link>近，所以显示的是蓝色字体
-->
</head>
<body>
<div style="font-size: 50px; color: orange;">
解析规则第一条测试
</div>
<p>
解析规则第二条测试：外部和内部样式表同时使用
</p>
</body>
</html>
- 多重样式优先级
- 同时使用内部、外部、行内样式表修饰同一个标签的时候，优先级最高的是行内样式表，即显示结果是行内样式
- 当外部和内部样式表同时使用的时候，哪个css样式距离标签近就最终显示哪个样式
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
CSS自定义滚动条样式案例详解
CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar 定义了滚动条整体的样式: ::-webkit-scrollbar-thum
-
详解Vue中CSS样式穿透问题
1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有
-
css分页样式代码
第一个是从360而来的效果如图所示:普通的a标记的分页,兼容性好.绿色样式演示代码: .pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0 2px;} .pages span font{ color:#f00; font
-
带你了解CSS基础知识,样式
目录 什么是CSS 在HTML页面中嵌套使用CSS的两种方式 三种方式代码展示 链入外部样式表文件 以下是常用的样式 总结 什么是CSS CSS(Cascading Style Sheet):层叠样式表语言. CSS的作用是: 修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看. 在HTML页面中嵌套使用CSS的两种方式 第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式.语法格式: <标签 style="样式名:样式值;样式名
-
BootStrap CSS全局样式和表格样式源码解析
CSS全局样式 1.布局容器类样式:.container 和 .container-fluid .container 固定宽度并且具有响应式. .container-fluid 自由宽度(100%宽度). 这2个class是直接在body标签下建立一个div标签,class等于这2个中的一个. 然后其他内容全部写在这个div标签中即可! 例如: <!DOCTYPE html> <html> <head> <title>BootStrap基础入门</ti
-
jQuery中的CSS样式属性css()及width()系列大全
目录 1.css()基本使用: 1.1 获取css属性 1.2 设置css属性 2.width()系列基本使用(height()系列同理) 2.1 width() 2.2 innerWidth()与outerWidth() 3.offset()与position() 3.1 取值对比 3.2 设置值对比 4.scrollLeft()与scrollTop() 4.1 取值 4.2 设置值 4.3 小demo 1.css()基本使用: 1.1 获取css属性 1.1.1 获取单个属性值(传入字符串)
-
CSS的三大样式你了解多少
目录 CSS样式 行内式 内部式 外部式 多重样式优先级 总结 CSS样式 行内式 又叫:内联样式.行内样式.嵌入式样式 <!-- style作为属性直接写在标签后面, style属性可以包含任何 CSS属性 --> <div style="font-size: 40px; color: #FF0000;">我是div</div> <div style="font-size: 40px; color: blue;">我
-
js获取css的各种样式并且设置他们的方法
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute
-
Jquery使用css方法改变样式实例
本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
JQuery结合CSS操作打印样式的方法
本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q
-
webpack处理 css\less\sass 样式的方法
本文介绍了webpack处理 css\less\sass 样式的方法,分享给大家,具体如下: (一)处理普通的.css 文件,需要安装 css-loader,style-loader .less 文件,需要安装 less-loader .sass 文件,需安装 less-loader npm install --save-dev css-loader npm install --save-dev css-loader npm install less-loader --save-dev (二)
-
jQuery的显示和隐藏方法与css隐藏的样式对比
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到. 例子: 复制代码 代码如下: <html> <head> <title&g
-
JS 控制CSS样式表
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef
-
js控制不同的时间段显示不同的css样式的实例代码
js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 复制代码 代码如下: function getCSS(){ datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour<12) disp