html添加css样式的两种方法
2023-09-11 14:17:11 时间
html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部css文件链接到HTML中)。
一、行内式
使用style属性在特定的HTML标记内设置CSS样式。
建议不要使用内联CSS,因为每个HTML标记都需要单独设置样式,如果您只使用内联CSS,管理网站可能会变得十分困难。但是,它在某些情况下很有用。例如,在您无法访问CSS文件或仅需要为单个元素应用样式的情况下。带有内联CSS的HTML页面示例如下所示:
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
二、内嵌式
内嵌css样式就是把css代码放在特定页面的部分中。内嵌CSS需要放在标签之间。
类和ID可用于引用CSS代码,但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式,这样可以提高加载速度。在某些情况下使用内嵌样式表很有用,比如:向某人发送页面模板, 因为一切都在一个页面中,所以看到预览要容易得多。
内部样式表的一个示例:
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>
三、外联式
外联式就是使用link标签元素将外部CSS文件(.css文件)引用到HTML页面中,引用需要放在页面的部分中。
这是将CSS添加到html页面上最方便的方法。这样,您对外部CSS文件所做的任何更改都将反映在你的网站上。
外联样式表的一个示例:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
而style.css包含所有样式规则。例如:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
如今大多数网站使用外部样式表,外部样式是在单独的文档中编写然后附加到各种Web文档的样式。外部样式表会影响它们所连接的任何文件,这意味着如果你有一个20页的网站,每个页面使用相同的样式表,当需要改变的话只需编辑该样式表即可完成这些页面,这使得长期站点管理变得更加容易。
相关文章
- 【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css
- C#集合中的Add与AddRange方法
- gitbook导出的本地html无法跳转问题解决方法
- Ionic3在ts中获取html中值的方法
- Visual Event插件----查看html元素绑定的事件与方法的利器
- MongoDB 修改用户密码 2种方法
- Oracle常用方法
- java数字转换成文字方法
- Date对象常用方法
- 近来习得的两个进入高级启动的方法
- html提交表单,php在后台获取表单内容的方法_例1
- 把vue项目或者html项目打包成桌面应用的简单方法:使用electron-packager打包electron应用
- html页面未超出范围却出现滚动条,解决方法
- Python语言学习:复杂函数(yield/@property)使用方法、案例应用之详细攻略
- Py之nltk:nltk包的简介、安装、使用方法、代码实现之详细攻略
- android Launcher之获取安装的app列表的两种方法
- 在jsp中显示原始html代码,不要渲染 / 在JSP页面中如何将HTML标记显示出来
- 738. 单调递增的数字-深度优先遍历方法
- shell截取字符串方法
- 如何把包含图片的docx文件转换为HTML WORD 转为html
- html的下拉框的几个基本使用方法
- 软件测试技术之性能测试进阶—并发测试的方法
- go内建方法 append copy delete
- HTML(一)html书写规则、基础元素、功能元素
- html页面未超出范围却出现滚动条,解决方法