在HTML中加入CSS有三种方式,html引入css的几种方式(复习笔记)
一.html引入css的方式
1.内联样式
在html标签内的style属性中设定CSS样式,例如:
你好
注:在内联样式里无法写hover样式,并且这种方式不推荐使用,因为它只能改变当前标签样式,多处使用会导致代码的可维护性极差。
2.内部样式
在html内的head头部内的style标签对中设定CSS样式,例如:
a{color:red;}
注:此方法可以一目了然的查看HTML结构和CSS样式,但此方法的CSS只对当前网页有效,如果当多个页面需要引入相同CSS代码时,这样写会导致代码冗余,不利于维护。
3.外部样式(链接式)
在HTML的head头部用link标签引入一个独立的css文件。例如:
注:用此方便要特别主要href的路径,不能将css文件放在桌面,因为网页无法读取本地文件。这种方式不仅仅可以引入css文件还可以引入其他文件。推荐使用这种方式,具有良好的可维护性。
4.外部样式(导入式)
使用CSS的语法规则引入一个外部独立的 .css 文件。例如:
@import url(style.css);
注:这种方式与链接式link一样,将CSS代码存储在一个外部独立的文件中,也具有良好的可维护性,但这种方式也有缺点:白屏和无样式内容闪烁。
二. 外部样式链接式link和导入式@import的区别
1.从属关系不同
link属于html标签。
@import属于css语法
link标签的href属性不仅仅可以引入css样式,还可以定义RSS、rel属性等。而@import只可以引入样式。
2.加载顺序
使用link标签引入的CSS样式在加载页面时被同时加载
使用@import导入的CSS样式将在页面加载完毕之后才被加载
3.兼容性
link属于html标签,不存在兼容性问题,但@import低版本的浏览器不支持,只可在 IE5+ 才能被识别。
4.link支持使用Javascript控制DOM去改变样式,而@import不支持。
5.link引入的样式权重大于@import引入的样式。
三.其他一些作业。
1.文件路径../main.css、./main.css、main.css、/main.css有什么区别。
../main.css表示上一级目录中的main.css文件。
./main.css和main.css都表示当前目录下的main.css文件。
/main.css表示根目录下的main.css文件。
2.console.log是做什么用的?
.console指代调试工具中的控制台,通过调用该console对象的log()函数,可以在控制台中打印信息。
对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑
3.text-align有几个值,分别什么作用?为什么text-align:justify没有效果?
text-align属性是用来描述一个行内元素是如何在身为父元素的块级元素中对齐。text-align属性并不能控制块级元素的对齐方式,它只对块级元素内的行内元素生效。
他的属性值分别是:left、right、center、jsutify。
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: inherit;
文字不满一行或者用强制换行则text-align: justify;无效果。
4.px、em、rem分别是什么?有什么区别?如何使用?
px表示一个像素;
em 相对单位,表示是由当前元素的像素大小决定的;
rem 相对单位,表示相对于元素定义的像素的倍数。
一般,都使用px决定像素大小;
em一般用于首行缩进或是设置行高;
rem较多用于移动端页面设置字体大小。
5.对Chrome审查元素的功能做个简单的截图介绍
打开Chrome审查元素功能的方式:1.快捷键:Ctrl+Shift+c;2.鼠标右键-查看源代码。
在HTML中加入CSS有三种方式,html引入css的几种方式(复习笔记)相关推荐
- 外链引入css有哪些方式_引入CSS样式表的方式有哪些?
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...
- CSS 引入 HTML 的三种方式
CSS 引入 HTML 的三种方式 在 html 文档中引入 CSS 样式表有三种引入方法: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 一.内部样式表 内部样式表(内嵌 ...
- [react] 在React中如何引入图片?哪种方式更好?
[react] 在React中如何引入图片?哪种方式更好? 第一种导入: import Img from "./images/1.png" 第二种直接获取图片: <img s ...
- css设置子盒子水平垂直居中(四种方式)
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- C++中模块(DLL)对外暴露接口的几种方式
C++中模块(DLL)对外暴露接口的几种方式
- CSS清除浮动(float)的三种方式
标题CSS清除浮动(float)的三种方式 为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
- 小程序引入icon的三种方式
小程序引入icon的三种方式(原生图标.WeUI图标组件.iconfont图标) 原生图标 小程序里原生图标是通过icon标签来引入的: <icon type="success&quo ...
- 【mybatis学习记录】mybatis的各种查询 一对一关联查询(4种方式) 一对多(2种方式)
文章目录 一对一 方式一: 方式2 方式3 方式4 一对多查询(2种方式) 方式2 一对一 如:通过订单id查询订单的时候,将订单关联的用户信息也返回. 首先建库建表: 新建实体类: @Builder ...
- java 产生随机数的两种方式,Java产生随机数的两种方式
Java产生随机数的两种方式 Java产生随机数的两种方式 在java中,我们可以通过两种方式来获取随机数(generating a random number)一种是大家熟悉的java.lang.M ...
- html引入原生js,html怎么引用JavaScript?html引入js路径四种方式
html是静态的页面,如果我们想要实现某些动画效果,就要引入一些js,那么,如何在html中引用一些js文件呢,引入js有哪些方式呢,下面我们来总结一下html引入js路径四种方式. 一:html怎么 ...
最新文章
- ApacheTomcat解析请求参数的过程
- 【python之路8】python基本数据类型(二)
- POJ2446【建图建图】
- 自动设置图片的序号_word表格技巧:如何在表格中填充序号并能自动更新
- kmeans聚类算法_聚类算法入门:k-means
- ORA-08176 错误的一个案例
- 织梦autoindex应用 dedecms循环中判断第几条数据
- ajax hash缓存
- 2019年最新从PayPal提现到国内银行的方法(实战教程)!
- photoshop----剪切蒙版/置入图片
- 前端工程师简历怎么写
- 虚拟机01--Mac安装Centos虚拟机
- python基础-结束循环的方式
- 生不逢时的祭品-图拉丁处理器!INTEL永远不愿承认的秘密!
- 用Navicat连接Oracle数据库时报ORA-12541:TNS:无监听程序解决办法
- 轻量级关系数据库SQLite的安装和SpringBoot整合
- 【半监督医学图像分割 2022 MICCAI】SCS 论文翻译
- 练习(京东图片,导航左侧,网易列表,3school导航条,京东轮播图/电影卡片)
- 《抓住听众心理——演讲者要知道的100件事》一第 1 章 人们是怎样思考和学习的...
- windows程序设计 Charles Petzold VS 王艳平