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


Posted in HTML / CSS onJuly 21, 2021

什么是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; }

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望你能够多多关注三水点靠木的更多内容!

HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
html5实现点击弹出图片功能
Jul 16 #HTML / CSS
纯CSS3实现div按照顺序出入效果
CSS3中Animation实现简单的手指点击动画的示例
详解CSS中的特指度和层叠问题
Jul 15 #HTML / CSS
html form表单基础入门案例讲解
You might like
一个经典的PHP文件上传类分享
2014/11/18 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
utf8的编码算法 转载
2006/12/27 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python文件拆分与重组实例
2018/12/10 Python
实例详解Python模块decimal
2019/06/26 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python爬虫增加访问量的方法
2019/08/22 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
如何写一封打动人心的求职信
2014/02/17 职场文书
网络营销策划方案
2014/06/04 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书