【HTML基础】CSS样式表「建议收藏」

【HTML基础】CSS样式表「建议收藏」1.理解HTML与CSS各自的功能及配合原则;2.掌握HTML与CSS的三种组合方式。

大家好,又见面了,我是你们的朋友全栈君。

1 CSS样式表简介

  1. 定义: CSS是Cascading Style Sheets的简称,中文名称为层叠样式表、级联样式表或样式表。
  2. 作用:实现内容与样式相分离,提高代码的可重用性和可维护性。
  3. CSS与HTML:
    1. 对比关系:HTML好比好比定义了一个房间的内容,而CSS就是定义这些内容的样式。
    2. 使用原则:尽可能使用CSS属性取代HTML属性。

2 CSS与HTML的三种组合方式

2.1 内联样式

  1. 形式:把样式表写在标签内部,作为标签的 style 属性的属性值出现。
  2. 适用性:当特殊的样式需要应用到个别元素时,就可以使用内联样式。
  3. 语法例子:显示结果为白底黑字的666。
<html>
	<head>
		<title>CSS</title>
 	</head>
 	<body>
		<span style = "color:#ffffff; background-color:#000000; font-size:30px;">
		666
		</span>
	</body>
</html>

2.2 内部样式表

  1. 形式:把样式表写在head中,通过元素选择器、类选择器、ID选择器为不同元素指定样式,三种选择器优先级依次增大。
  2. 适用性:当单个文件需要特别样式时,就可以使用内部样式表。
  3. 语法例子:注意CSS的注释语句和HTML不一样。
<html>
	<head>
		<title>CSS</title>
		<style type = "text/css"> /*定义元素选择器*/ span { 
     color:#ffffff; background-color:#000000; font-size:30px;} /*定义类选择器*/ .big { 
     color:#ffffff; background-color:#000000; font-size:60px;} /*定义ID选择器*/ #no1 { 
     color:#000000; background-color:#ffffff; font-size:30px;} </style>
 	</head>
 	<body>
		<span>
		123<span class = "big">456</span><span id = "no1">789</span>10
		</span>
	</body>
</html>

运行结果如下:
在这里插入图片描述

2.3 外部引用

  1. 形式:将样式表单独存放,后缀名为.css,在head中指定外部样式表。
  2. 适用性:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
  3. 首页与外部CSS样式表语法:
<!--首页-->
<html>
	<head>
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="mystyle.css">
 	</head>
 	<body>
		<span>
		123<span class = "big">456</span><span id = "no1">789</span>10
		</span>
	</body>
</html>
<!--mystyle.css-->
/*定义元素选择器*/
span { 
   color:#ffffff; background-color:#000000; font-size:30px;}
/*定义类选择器*/
.big { 
   color:#ffffff; background-color:#000000; font-size:60px;}
/*定义ID选择器*/
#no1 { 
   color:#000000; background-color:#ffffff; font-size:30px;}

运行结果如下:
在这里插入图片描述

3 总结

  1. 理解HTML与CSS各自的功能及配合原则;
  2. 掌握HTML与CSS的三种组合方式。

参考文献

  1. CSS菜鸟教程
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158957.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vim查找高亮关键字_emacs和vim

    vim查找高亮关键字_emacs和vim如果我们在在打开的文件中使用Vim搜索功能并开启搜索高亮显示后怎么取消当前高亮显示搜索关键字呢?vim搜索高亮关键字如何取消,vim清除查询高亮搜索显示的方法下面站长为大家介绍vim搜索高亮关键字怎么取消,vim查询高亮搜索显示如果清除取消第一种方法:vim搜索高亮关键字怎么取消最简单的方法是再使用Vim搜索一个在文档中不存在的搜索关键词来覆盖当前高亮显示的搜索结果。第二种方法:vim查询高亮搜索…

  • WCF基金会

    WCF基金会

  • Java课程设计

    Java课程设计#1.团队名称、团队成员##团队名称:秃头团队|成员|任务分配|||||林小强(组长)|dao包util包可视化||陈泽役|model包可视化|#2.前期

  • 怎么向表结构是自增长的表中插入一条数据 SQLCODE=-798, SQLSTATE=428C9, SQLERRMC=ID

    怎么向表结构是自增长的表中插入一条数据 SQLCODE=-798, SQLSTATE=428C9, SQLERRMC=ID

  • C#网络编程(Socket编程)「建议收藏」

    C#网络编程(Socket编程)「建议收藏」一、Socket网络编程1.Socket是什么?在计算机通信领域,Socket被译为“套接字”。它是计算机之间进行通信的一种约定或一种方式。通过Socket这种约定可以接收到其他计算机的数据,也可以向其他计算机发送数据。2.本质是编程接口(API),对于TCP/IP的封装,TCP/IP也提供了可供程序员做网络开发所用的接口3.作用Socket的英文原意是“插座”,的意思,通常在计算机编…

  • mapstate辅助函数(辅助函数是什么)

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用mapState辅助函数帮助我们生成计算属性,让你少按几次键:mapState是什么?表面意思:mapState是state的辅助函数.这么说可能很难理解抽象形容:mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号