带你了解CSS基础知识,样式

2024-04-02 19:04:59 820人浏览安东尼

摘要

目录什么是CSS在html页面中嵌套使用CSS的两种方式三种方式代码展示链入外部样式表文件以下是常用的样式总结什么是CSS CSS(Cascading Style Sheet):层叠

什么是CSS

CSS(Cascading Style Sheet):层叠样式表语言。

CSS的作用是：

修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

在HTML页面中嵌套使用CSS的两种方式

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：

<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>

第二种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）语法格式：


这种方式易维护，维护成本较低。
		xxx.css文件
			1.html中引入了
			2.html中引入了
			3.html中引入了
			4.html中引入了

三种方式代码展示

内联定义方式


<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
	<head>
	<body>
		<!--
			width	宽度样式
			heght	高度样式
			background-color	背景颜色样式
			display		布局样式（none表示隐藏，block表示显示）
		-->
		<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
		border-color: red;border-width: 3px;border-style: solid"></div>
		<!--样式还可以这样写
			border: width style color
		-->
		<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
		border:  thick double yellow;  "></div>
	</body>
</html>

样式块方式


<!doctype html>
<html>
	<head>
		<title>HTML中引入样式的第二种方式：样式块方式</title>
		<style type="text/css">
			
			
			#usernameErrORMsg{
				font-size: 12px;
				color: red;
			}

			
			div{
				background-color: black;
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			
			.myclass{
				border: 2px double blue;
				width: 400px;
				height: 30px
			}
		</style>
	</head>
	<body>
		<!--
			设置样式字体大小12px,颜色为红色
		-->
		<!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起，用户名不能为空！</span>-->
		<span id="usernameErrorMsg"">对不起，用户名不能为空！</span>
		<div></div>
		<div></div>
		<div></div>
		<!--class相同的可以认为是同一类标签。-->
		<br><br><br><br>
		<input type="text" class="myclass"/>
		<br><br><br><br><br>
		<select class="myclass">
			<option>专科</option>
			<option>本科</option>
			<option>硕士</option>
		</select>

	</body>
</html>

链入外部样式表文件

css文件


a{
	text-decoration: none;
}
#baiduSpan{
	text-decoration: underline;
	cursor: wait;
}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中引入CSS样式的第三种方式：链入外部样式表文件</title>
		<!--引入css-->
		<link type="text/css" rel="stylesheet" href="css/1.css"/>
	</head>
	<body>
		<a href="Http://www.baidu.com">百度</a>
		<span id="baiduSpan">点击我链接百度</span>
	</body>
</html>

以下是常用的样式

边框

（1）


div{ border : 1px solid red; }

（2）


div{ border-width : 1px; border-style : solid; border-color : red; }

隐藏


div{ display : none; }

字体


div{ font-size : 12px; color : red; }

文本装饰


a{ text-decoration : none; }


a{ text-decoration : underline; }

列表


ul{ list-style-type : none; }

设置鼠标悬停效果


:hover

定位


div{ position : absolute; left : 100px; top : 100px; }

鼠标小手


div{ cursor : pointer; }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注编程网的更多内容！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 带你了解CSS基础知识,样式

本文链接: https://www.lsjlt.com/news/130190.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

带你了解CSS基础知识,样式

目录什么是CSS在HTML页面中嵌套使用CSS的两种方式三种方式代码展示链入外部样式表文件以下是常用的样式总结什么是CSS CSS(Cascading Style Sheet):层叠...

99+

2024-04-02
CSS基础知识以及常用样式

本篇内容介绍了“CSS基础知识以及常用样式”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！目录什么是CSS在HTML页面中嵌套使用CSS的两种...

99+

2023-06-20
总结CSS基础知识

本篇内容主要讲解“总结CSS基础知识”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“总结CSS基础知识”吧!一、CSS简介css:层叠样式表英文全名：casca...

99+

2024-04-02
一篇文章带你搞懂VUE基础知识

目录VUE是什么Vue中的核心插件 VueRouterVuexaxioselement-uiVue前端整体架构总结VUE是什么 Vue (读音 /v...

99+

2024-04-02
新手了解java IO基础知识

目录一、File类1、简介2、创建方式3、常用方法二、IO概念1.什么是输入2.什么输出（Output）三、流的分类1、InputStream（字节流）2、OutputStream（...

99+

2024-04-02
新手了解java基础知识(一)

目录1.java基础1.1Java历史1.2Java特点1.2.1 简单性1.2.2 面向对象1.2.3 分布式（微服务）1.2.4 健壮性1.2.5 安全性1.2.6 体系结构中立...

99+

2024-04-02
你需要了解的 ASP 和 JavaScript 分布式编程的基础知识

ASP 和 JavaScript 分布式编程的基础知识随着互联网的发展，分布式系统的需求越来越大。其中，ASP 和 JavaScript 分布式编程成为了开发分布式系统的关键技术之一。本文将介绍 ASP 和 JavaScript 分布式编...

99+

2023-06-25

javascript 学习笔记分布式
jquery基础知识你知道哪些？

　　jQuery.parent(expr) //找父元素　　jQuery.parents(expr) //找到所有祖先元素，不限于父元素　　jQuery.children(expr) //查找所有子元素，只会找到直接的孩子节点，不会返回所有...

99+

2023-06-03
新手了解java基础知识(二)

目录算数运算符例子关系运算符例子逻辑运算符例子赋值运算符Java运算符优先级总结算数运算符算术运算符用在数学表达式中，它们的作用和在数学中的作用一样。下表列出了所有的算术运算符。 ...

99+

2024-04-02
了解Go语言的基础知识

Go语言是一种开源的编程语言，由Google开发并于2009年发布。它被设计成一种简单、高效、可靠的语言，专为构建大型软件项目而设计。在了解Go语言的基础知识之前，让我们先了解一下Go...

99+

2024-04-02
CSS基础知识点整理

本篇内容介绍了“CSS基础知识点整理”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！CSS基础 CSS选择器 ...

99+

2023-06-05
有哪些CSS基础知识

这篇文章主要介绍“有哪些CSS基础知识”，在日常操作中，相信很多人在有哪些CSS基础知识问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”有哪些CSS基础知识”的疑惑有所帮助！接...

99+

2024-04-02
CSS基础知识有什么

这篇文章主要介绍“CSS基础知识有什么”，在日常操作中，相信很多人在CSS基础知识有什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS基础知识有什么”的疑惑有所帮助！接...

99+

2024-04-02
CSS基础知识有哪些

这篇文章主要讲解了“CSS基础知识有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS基础知识有哪些”吧！一、为什么使用div+css1、实现表现和样...

99+

2024-04-02
了解HTTP：你需要知道的基础知识和实践技巧

HTTP（HyperText Transfer Protocol）是互联网上最基本、最重要的协议之一，它负责数据在网络中的传输。无论是浏览网页、发送电子邮件、下载文件等等，都需要用到HTTP协议。在本文中，我们将介绍HTTP的基础知识和实...

99+

2023-11-12

django http git
Java基础知识精选你答对了几道?

没有技术深度是大多程序员的一种常态。但是当你成为一个资深的工程师的时候，很多公司并不希望你还是那样平庸，没有深度。虽然你会纳闷，我就算有深度你们也不一定用得上呀？然而到了这个级别的人需求量并不像初中级开发那么多，公司更理性和稳妥的做法是选择...

99+

2023-05-31

java 基础知识几道
新手了解java 集合基础知识

目录一、概述Java集合体系结构：二、collection1、List1）ArrayList2）LinkedList2、set1）HashSet2）TreeSet1.实体类2.测试类...

99+

2024-04-02
新手了解java 反射基础知识

目录一、反射概述二、常用api三、创建Class对象的四种方式总结一、反射概述 Reflection（反射）是被视为动态语言的关键，反射机制允许程序在执行期借助于Reflection...

99+

2024-04-02
新手了解java 数组基础知识

目录1、数组的定义2、array 遍历3、List和array 之间的转换1、数组转list2、list 转数组3、Arrays工具类4、可能遇到的问题总结1、数组的定义 ...

99+

2024-04-02
新手了解java 泛型基础知识

目录1、什么是泛型2、泛型的使用规则3、泛型应用实例总结1、什么是泛型泛型，就是允许在定义类、接口时通过一个标识表示类中某个属性的类型或者是某个方法的返回值及参数类...

99+

2024-04-02