带你了解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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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中smarty区域循环的方法
2015/06/11 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
java解析json方法总结
2019/05/16 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
集体婚礼证婚词
2014/01/13 职场文书
个人作风剖析材料
2014/02/02 职场文书
项目经理任命书内容
2014/06/06 职场文书
新党章心得体会
2014/09/04 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
《海上日出》教学反思
2016/02/23 职场文书
检讨书怎么写?
2019/06/21 职场文书