CSS基础使用方法有哪些

发布时间:2022-12-13 09:58:00 作者:iii
来源:亿速云 阅读:97

这篇文章主要介绍“CSS基础使用方法有哪些”,在日常操作中,相信很多人在CSS基础使用方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS基础使用方法有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

什么是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">
			/*
				这是CSS的注释
			*/
			/*
				id选择器
				#id{
					样式名: 样式值;
					样式名: 样式值;
					样式名: 样式值;
					........
				}
			*/
			#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; }

到此,关于“CSS基础使用方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. CSS 美化
  2. CSS中变量的使用方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:Tomcat无法加载css和js等静态资源文件如何解决

下一篇:JavaScript如何实现用户名和密码表单校验功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》