（5）css样式导入
样式的组成
1、选择器：将样式与页面中的某一个或某些标签建立联系，就要使用选择器，在head标签下写一个style标签，将需控制参数的标签名写在这个style标签下，设置属性即可通过css来控制html的样式，这就是选择器
2、作用域：作用域就是style标签下需要控制的标签名后面的{}，这个{}内的参数就是作用域参数
3、样式块：作用域里面的参数语句就是样式语句，这个作用域就是样式块
css的引入方式
1、行间式样式导入，直接将css样式写在标签的style属性中
优点：对样式操作简单粗暴
缺点：可读性差，如果区域标签有很多条，那么也要写很多条，随着页面增大标签越来越多越来越复杂，复用性差
PS：只想修改单独的标签，使用这个比较方便
2、内联式，将css样式书写在style标签中,style标签写在head标签中
优点：可读性强，复用性强
缺点：延展性差（不适合团队开发，只有写的人看得懂）
PS:单文件使用，比较方便
3、外联式，在head里面写一个链接标签做导入即可
优点：延展性强（适合团队开发），复用性强，可读性强
缺点：必须要多文件
PS:团队开发时候使用外联式，因为很多文件都要引用
样式实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>样式引入</title>
<!--这个是外联式需要导入的写法，用link标签在href里面用相对路径导入外联css样式文件-->
<link rel="stylesheet" href="./css/index.css"> <style>
/*这属于css语言，采用css语法，所以备注的方式和html不一样，采用这条的格式*/
/*将样式与页面中的某一个或某些标签建立联系，只要使用选择器，将需要的标签写在这个style标签下，设置属性即可，这就是选择器*/
/*作用域就是h1后面的{}，这个{}内的参数就是作用域参数*/
/*作用域里面的参数语句就是样式语句，这个作用域就是样式块*/
h1{
width: 150px;
height: 150px;
background-color: hotpink;
}
</style> </head>
<!--行间式样式导入，直接将css样式写在标签的style属性中-->
<!--优点：对样式操作简单粗暴，缺点：可读性差，如果区域标签有很多条，那么也要写很多条，随着页面增大标签越来越多越来越复杂，复用性差-->
<body style="background-color:black">
<!--上面的style是设置整个页面的背景色，下面的div里面的style是设置区域的背景色包括区域的大小-->
<div style="background-color: white; width:200px; height:200px;" >这是一个区域</div>
<div style="background-color: darkslategrey; width: 200px; height: 200px;">这是一个区域</div> <!--内联式，将css样式书写在style标签中,style标签写在head标签中-->
<!--优点：可读性强，复用性强，缺点：延展性差（不适合团队开发，只有写的人看得懂）-->
<h1>这里是内联式区域</h1>
<h1>这里是内联式区域</h1> <!--外联式，在head里面写一个链接标签做导入即可-->
<!--优点：延展性强（适合团队开发），复用性强，可读性强 缺点：必须要多文件-->
<p>这里是外联式区域</p>
<p>这里是外联式区域</p>
</body>
</html>
（5）css样式导入的更多相关文章
- IOS UIWebView引用外部CSS样式（转载）
首先,将要引用的CSS样式导入到工程文件,然后我们可以自己拼装一个网页并引用这个样式,具体代码实现如下: -(void)viewDidLoad { [super viewDidLoad]; NSStr ...
- HTML CSS样式基础
一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...
- 20190422-外部导入CSS样式之link、CSS@import、Sass分音
写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...
- java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- nuxt导入css样式
全局导入,适用于所有组件 在nuxt.config.js文件引 css:["~样式path"], 如:css:["~assets/css/main.css"], ...
- html导入css样式的方法
在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p style="width:100px;height:40px;color:red;"></ ...
- CSS样式应用
CSS样式应用的方法: (1)行内样式,将css样式直接放到标签当中,一般都是放入标签的style属性中,它是最方便的一种样式,也是最不方便修改的样式.如下: (2)内嵌式,通过将css写在网页源文件 ...
- 怎样将多个CSS文件导入一个CSS文件中
问题: 在HTML中引入css的其中的两个方法: 导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
随机推荐
- 01背包问题之2(dp)
01背包问题之2 有n个物品,重量和价值分别为wi和vi,从这些物品中挑选出重量不超过W的物品,求所有挑选方案中物品价值总和的最大值 限制条件: 1 <= n <= 100; 1 < ...
- jquery for&&each的用法
var arr=['姚明','易建联','张继科']: each&&for用法 $.each(arr,function(index,value){ document.write(ind ...
- break&&continue
break和continue的区别: 1. 当它们用在循环语句的循环体时,break用于立即退出本层循环,而continue仅仅结束本次循环(本次循环体内不执行continue语句后的其它语句,但下一 ...
- Vue + Element UI 实现权限管理系统 （管理应用状态）
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...
- 菜鸟翻译：国外的一个关于.net core的学习系列 第一天（安装并运行.NET core 到windox系统里面）
原文地址: Day 1 - Installing and Running .NET Core on a Windows Box 免责声明:我不是.NET Core 的团队成员.我使用的工具是公开可用的 ...
- L1-054 福到了
“福”字倒着贴,寓意“福到”.不论到底算不算民俗,本题且请你编写程序,把各种汉字倒过来输出.这里要处理的每个汉字是由一个 N × N 的网格组成的,网格中的元素或者为字符 @ 或者为空格.而倒过来的汉 ...
- elk之kibana
环境: centos7 jdk8 参考: https://www.elastic.co/guide/en/elasticsearch/reference/current/rpm.htmlhttp:// ...
- leetcode第27题：移除指定元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- php优秀框架codeigniter学习系列——CI_URI类学习
这篇文章主要介绍CI核心框架工具类CI_URI. 该类主要用来解析uri和决定路由的.关于URI和URL的关系请参考这位朋友的文章.简单来说URI是唯一定位的资源,URL是唯一资源的一个网络可能访问路 ...
- SQL server的高可用
SQL server 2012实现数据库中的表同步到局域网中的另外一个服务器上的数据库的方法: 1.发布.订阅功能 2.AlwayOn功能(最稳定.最优的方案) 3.修改程序,写两份数据,或者用触发器 ...