CSS 与 HTML文档的结合方法
2021/9/26 23:12:57
本文主要是介绍CSS 与 HTML文档的结合方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS 与 HTML文档的结合方法
css控制网页内容显示格式的方式是通过许多定义的样式属性(乳字号,段落控制等)实现的,并将多个样式属性定义为一组可供调用的选择符。选择符就是某个样式的名称,称之为选择符的原因是,当HTML文档中某元素要使用该样式时,需利用该名称来选择样式
想让浏览器显示出样式就需要让浏览器识别调用。这里介绍4种页面中插入样式表的方法:定义内部样式表,定义行内样式表,链入外部样式表环绕导入外部样式表。
1.定义内部样式表
内部样式表是指吧样式表到页面的head区内,这些定义的样式就应用到页面中,样式表是用style标签插入的。定义的样式表可以再整个HTML文档中调用。可以在HTML文档中html和body标签之间插入一个style标签对,在其中定义样式
内部样式表格格式:
<style type='text/css'> <!-- 选择符1{属性:属性值;属性:属性值;} 选择符2{属性:属性值;属性:属性值;} ... 选择符n{属性:属性值;属性:属性值;} --> </style>
其中style标签用来声明所要定义的样式,type属性指定style使用css的语法来定义。属性与属性值用 ‘:’ 隔开;定义之间用“ ; ”隔开。
组合选择符的格式:
组合选择符可以减少重复定义的麻烦,当多个选择符具有相同的样式时就可以使用组合选择符。
2.定义行内样式表
行内样式表也称为内嵌样式表,是指在html标签中插入style属性,在定义要显示的样式表,而style属性就是css属性的属性和值。这种方法可以很轻松地对某个单独的标签进行定义样式。而且这种样式只对定义的标签起作用不会影响页面整体样式。
行内样式的格式为:
<标签 style="属性:属性值;属性:属性值...">
此种方式不推荐使用,因为再做大型项目时比较麻烦
3.链入外部样式表
链入外部样式表就是当浏览器读取到HTML文档的样式,将会想链接外部样式表文件索取样式。先将样式表保存为一个样式表文件(css)然后再网页中用link标签链接这个样式表文件。
格式:
<head> ... <link rel='stylesheef' href='外部css文件地址' type='text/css'> ... </head>
如果将一个样式表链入到多个html文件,当这个样式表改变时,所有页面样式都会改变。因此在制作大量相同样式时这种方法是非常好用的。
4.导入外部样式表
导入外部样式表就是当浏览器读取HTML文件时,复制一份样式表到这个HTML文件中。即在内部表的style标签中导入一个外部样式表文件。
格式为:
<style tyle='text/css'> @import url('外部样式表地址1.css'); @import url('外部样式表地址2.css'); ... </style>
他与链入外部样式表的区别是他是导入即复制一份文件到内部,一般采用链入的方式。
这篇关于CSS 与 HTML文档的结合方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23实现OSS直传,前端怎么实现?-icode9专业技术文章分享
- 2024-11-22在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案?-icode9专业技术文章分享
- 2024-11-22html 自带属性有哪些?-icode9专业技术文章分享
- 2024-11-21Sass教程:新手入门及初级技巧
- 2024-11-21Sass学习:初学者必备的简单教程
- 2024-11-21Elmentplus入门:新手必看指南
- 2024-11-21Sass入门:初学者的简单教程
- 2024-11-21前端页面设计教程:新手入门指南
- 2024-11-21Elmentplus教程:初学者必备指南
- 2024-11-21SASS教程:从入门到实践的简单指南