CSS页面控制方式及其优先级-- 行内样式、内嵌式、链接式、导入式

本文主要是介绍CSS页面控制方式及其优先级-- 行内样式、内嵌式、链接式、导入式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    使用CSS对页面 进行全方位的控制,控制页面的方式:行内样式,内嵌式,链接式,导入式。

行内样式:

    直接对HTML的标记使用style属性,然后将CSS代码直接写进去;    

<p style="color:#0000ff; font-style: normal;">范晓权</p>


内嵌式:

    将CSS写在<head>与</head>之间,并且用<style>和</style>标记进行声明;

<head>
<style type="text/css">     
<!--
p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:18px;
}
-->
</style>
</head>

    略显麻烦,维护成本高,因此仅适用于对特殊的页面设置单独的样式风格。


链接式:使用频率最高,最为实用的方法。

    在文件<head> 和 </head> 标记之间加上<link href = "sheet.css" type = "text/css" rel = "stylesheet" > ,将CSS文件链接到页面中,对其中的标记进行样式控制。它将HTML页面本身与CSS样式风格分离为两个或者多个文件,实现了页面框架HTML代码和美工CSS代码的完全分离。

    最大优势:CSS代码和HTML代码完全分离,并且同一个CSS文件可以被不同的HTML所链接使用。    

    前期制作和后期维护都方便,网站后台技术人员和美工设计者有很好的分工合作;对于同一个CSS文件可以链接到多个HTML文件中,甚至是所有页面,网站风格统一,协调,后期维护量大大减少。


导入样式:

    与链接样式表的功能基本相同,仅在语法和运作方式上与链接样式表略有区别;

    采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内。而链接样式表则是在HTML的标记需要格式时才以链接的方式引入;

    格式种类:    

        @import url(sheet1.css);

        @import url("sheet1.css");

        @import url('sheet1.css');

        @import sheet1.css;

        @import "sheet1.css";

        @import 'sheet1.css';

<head>
<style type="text/css">     
<!--
<span style="font-family: SimSun;font-size:18px;">    @import url(sheet1.css);</span>
-->
</style>
</head>


各种方式的优先级

    行内样式>链接式>内嵌式>@import导入式

    PS:在<style> 与 </style>之间会用到 " <!-- " 和 “ --> ”将所有的CSS包含在其中,避免老式浏览器不支持CSS,将CSS代码直接显示在浏览器上而设置的HTML注释;


总结:

学习的是为了使用,而熟悉了各种使用方式的优缺点之后,能够在合适的地方选择合适的方式进行处理才是最优解。链接式是我们经常见到和使用的,在学习和使用CSS的使用应该多向其他大型网站学习,学习他们的思想和设计,站在巨人的肩膀上。

这篇关于CSS页面控制方式及其优先级-- 行内样式、内嵌式、链接式、导入式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109125

相关文章

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

Oracle数据库定时备份脚本方式(Linux)

《Oracle数据库定时备份脚本方式(Linux)》文章介绍Oracle数据库自动备份方案,包含主机备份传输与备机解压导入流程,强调需提前全量删除原库数据避免报错,并需配置无密传输、定时任务及验证脚本... 目录说明主机脚本备机上自动导库脚本整个自动备份oracle数据库的过程(建议全程用root用户)总结

Debian系和Redhat系防火墙配置方式

《Debian系和Redhat系防火墙配置方式》文章对比了Debian系UFW和Redhat系Firewalld防火墙的安装、启用禁用、端口管理、规则查看及注意事项,强调SSH端口需开放、规则持久化,... 目录Debian系UFW防火墙1. 安装2. 启用与禁用3. 基本命令4. 注意事项5. 示例配置R

最新Spring Security的基于内存用户认证方式

《最新SpringSecurity的基于内存用户认证方式》本文讲解SpringSecurity内存认证配置,适用于开发、测试等场景,通过代码创建用户及权限管理,支持密码加密,虽简单但不持久化,生产环... 目录1. 前言2. 因何选择内存认证?3. 基础配置实战❶ 创建Spring Security配置文件

Python获取浏览器Cookies的四种方式小结

《Python获取浏览器Cookies的四种方式小结》在进行Web应用程序测试和开发时,获取浏览器Cookies是一项重要任务,本文我们介绍四种用Python获取浏览器Cookies的方式,具有一定的... 目录什么是 Cookie?1.使用Selenium库获取浏览器Cookies2.使用浏览器开发者工具

Java获取当前时间String类型和Date类型方式

《Java获取当前时间String类型和Date类型方式》:本文主要介绍Java获取当前时间String类型和Date类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录Java获取当前时间String和Date类型String类型和Date类型输出结果总结Java获取

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟