阿里云前端开发学习路线 - CSS快速掌握 笔记

最新推荐文章于 2024-07-03 16:20:00 发布
原创 最新推荐文章于 2024-07-03 16:20:00 发布 · 1.6k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细介绍了CSS的基本概念，包括选择器、尺寸样式属性、文本与字体属性等，以及如何使用不同的CSS代码书写方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学习链接

目录

一、CSS简介

  • CSS（Cascading Style Sheets 的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表。
  • CSS主要是用来给HTML网页来设置外观或者样式。
  • 外观或者样式：HTML网页中文字的大小、颜色、字体，网页的背景颜色、背景图片等。

1、书写CSS的语法规则

  • CSS代码是由选择器和一对大括号组成；
  • 大括号里面是由多条声明语句组成；
  • 每条声明语句都要使用英文分号分隔；
  • 每条声明语句由 属性:值(key:value) 组成；
  • CSS中的属性值一般不加引号；
  • 在CSS中如果属性值为数值型数据时，一般情况下需要单位，如px（像素）；
  • 在CSS中不能出现HTML标签。

2、快速入门

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS快速入门</title>
	<style type="text/css">
		/*
		 * 在这里写CSS代码
		 * CSS代码：选择器:{语句1;语句2};	
		 */
		 p{
		 	color: #FF0000;		/*给文本设置颜色为#FF0000*/
		 	font-size: 100px;	/*设置字体大小为100px*/
		 };
	</style>
</head>
<body>
	<p>CSS样式</p>
</body>
</html>

二、CSS代码的书写方式

  • CSS代码应该书写在什么位置？

书写方式分为三种：嵌入式、外链式、行内式

1、嵌入式

  • 嵌入式就是将CSS代码嵌入到HTML文件中，嵌入式通过HTML中的< style >标签将CSS代码嵌入到HTML网页中。

  • 语法格式：

<!-- 如果使用的是HTML5的文档，type属性可以省略不写 -->
<style type="text/css">
	/*
	 * 书写CSS代码
	 * 选择器:{属性:值;属性:值};
	*/
</style>
  • < style>< /style>可以出现在HTML中的任何位置，但是一般会放置在< head>标签中。
  • 范例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>嵌入式CSS</title>
	<style type="text/css">
		/*
		 * 嵌入式CSS
		 * CSS代码：选择器:{语句1;语句2};	
		 */
		 div{
		 	width: 100px;					/*设置宽度为100px*/
		 	height: 100px;					/*设置高度为100px*/
			background-color: #FF0000;		/*设置背景颜色为红色*/
		 
		 };
	</style>
</head>
<body>
	<!-- 要使用CSS给div设置宽度100像素高度100像素以及背景颜色为红色，把div理解为存放东西的盒子-->
	<div></div>
</body>
</html>

2、外链式

  • 外链式是指单独写一个以.css为扩展名的文件，然后在< head>< /head>标签中使用< link />标签，将这个 css 文件链接到 html 文件中。
  • css文件的名称需要为英文。
  • css文件不能单独运行，必须依赖html文件。
  • 语法格式：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>外链式CSS</title>
	<!-- 将单独的css文件链接到当前的HTML文件中 -->
	<link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
</body>
</html>
  • css文件夹下的index.css文件
/*
 * 在index.css文件中书写css代码
 * 这个文件里只能写css格式的代码
 * 选择器{属性:值};
*/
body{
	background-color: #f00;	/*f00 --> ff0000 */
}
  • 确保 css 文件被正确引入：浏览器右键选检查，或F12，在network中找css文件的status状态，成功表示已经被加载，失败表示未被正确引入。
  • link标签可以有多个，意味着一个 html 页面可以同时引入多个 css 文件。

3、行内式

  • 将 CSS 代码写在 HTML 标签的 style 属性中；
  • style 是一个通用属性，每一个标签里面都拥有这个属性。
  • 语法格式：
<标签名 style="属性:值;属性:值;"></标签名>
  • 范例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>行内式CSS</title>
</head>
<body>
	<!--
	使用行内式css
	将div设置为宽度100px，高度100px，背景颜色为红色
	-->
	<div style="width:100px;height:100px;background-color:#ff0000;"></div>
</body>
</html>

总结

  • 使用嵌入式CSS，只能作用于当前的HTML文件；
  • 使用外链式CSS，能作用于多个HTML文件。

4、注释

  • 格式
/* 注释的内容 */
  • 上面的例子都有用到CSS注释
  • sublime编辑器中有快捷方式来注释：Ctrl + Shift + /
  • 注意不要在 CSS 代码中使用 HTML的注释

三、选择器

  • 选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
  • 选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。

1、基本选择器

选择器格式含义举例
通用选择器{属性:值;}通用选择器，将匹配HTML所有标签。不建议使用，IE6不支持，给大型网站增加负担。{margin:0px;}
标签选择器标签名{属性:值;}标签选择器，匹配对应的HTML标签。p{font-size: 14px;}
类选择器.class属性值{属性:值;}类选择器，给拥有指定的CLSS属性值的元素设置样式。.box{width: 800px;}
id选择器#id属性值{属性:值;}id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。ID选择器以#来定义。#title{font-size:14px;}
  • 通用选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>通用选择器</title>
	<style type="text/css">
		/*嵌入式选择器*/
		/*
		 * 通用选择器
		 * 格式 *{属性：值}
		 * 作用：给HTML中所有的标签设置样式
		 */
		 *{
		 	color:#00f;
		 }
	</style>
</head>
<body>
	<h2>中国四大名著</h2>
	<ul>
		<li>西游记</li>
		<li>三国演义</li>
		<li>红楼梦</li>
		<li>水浒传</li>
	</ul>
</body>
</html>
  • 标签选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>标签选择器</title>
	<style type="text/css">
		/*嵌入式选择器*/
		/*
		 * 标签选择器
		 * 格式 标签名{属性：值}
		 * 作用：给指定的标签设置样式
		 */
		 h2{
		 	color:#00f;
		 }
		 li{
		 	color: #f00;
		 }
	</style>
</head>
<body>
	<h2>中国四大名著</h2>
	<ul>
		<li>西游记</li>
		<li>三国演义</li>
		<li>红楼梦</li>
		<li>水浒传</li>
	</ul>
	<h2>你答对了吗？</h2>
</body>
</html>
  • 类选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>通用选择器</title>
	<style type="text/css">
		/*嵌入式选择器*/
		/*
		 * 类选择器
		 * 格式 .class的属性值{属性：值}
		 * 作用：给拥有指定的.class属性值的标签设置样式
		 */
		 /* 只要是.class属性的值为h的标签，都会设置样式*/
		 .h{
		 	color:#00f;
		 }
		 /*先找到p标签，然后再去p标签里面找.class属性值为h1的标签，有就为其设置样式*/
		 p.h1{
		 	color: #f00;
		 }
	</style>
</head>
<body>
	<h2 .class="h">中国四大名著</h2>
	<ul>
		<li .class="h1">西游记</li>
		<li>三国演义</li>
		<li>红楼梦</li>
		<li>水浒传</li>
	</ul>
	<p .class="h1">测试</p>
	<p>测试</p>
</body>
</html>
  • id选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>通用选择器</title>
	<style type="text/css">
		/*嵌入式选择器*/
		/*
		 * id选择器
		 * 格式 #id的属性值{属性：值}
		 * 作用：给拥有指定的id属性值的标签设置样式，但是要注意在一个HTML文件中id属性值必须是唯一的
		 */
		 #h{
		 	color:#00f;
		 }
	</style>
</head>
<body>
	<h2 id="h">中国四大名著</h2>
	<ul>
		<li>西游记</li>
		<li>三国演义</li>
		<li>红楼梦</li>
		<li>水浒传</li>
	</ul>
</body>
</html>

2、复合选择器

选择器含义举例
选择器1,选择器2{属性:值;}多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号隔开p,h1,h2{margin:0px;}
E F{属性:值}后代元素选择器，匹配所有属于E元素后代的F选择器，E和F之间用空格分隔#slidebar p{font-color: #990000;}
E>F{属性:值}子元素选择器，匹配所有E元素的子元素Fdiv>p{color:#990000;}
E + F{属性:值}相邻元素选择器，匹配所有紧随E元素之后的同级元素Fdiv + div{color:#990000;}
  • 多元素选择器范例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>多元素选择器</title>
	<style type="text/css">
		/*
		 * 多元素选择器
		 * 格式：选择器1,选择器2,选择器n{属性：值;}
		 * 作用：给列表中的所有选择器设置样式
		 */
		.box,p,h2,li{
		 	color:#f00;
		 	text-decoration: underline;
		}
	</style>
</head>
<body>
	<div class="box">HTML</div>
	<p>CSS</p>
	<h2>php</h2>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>广东</li>
		<li>深圳</li>
	</ul>

</body>
</html>
  • 后代元素选择器：所有后代都选择，无论隔多少代
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>相邻元素选择器</title>
	<style type="text/css">
		/*
		 * 相邻元素选择器
		 * 格式：E + F{属性:值;}
		 * 作用：满足E和F同级、相邻（E必须在F下面）才会匹配的选择器
		 */
		 .box + p{
		 	color:#f00;
		 	text-decoration: overline;
		 }
	</style>
</head>
<body>
	<!-- 
	class=box这个元素中有三个子元素
	第一个子元素：<h2>HTML</h2>
	第二个子元素：<div></div>
	第三个子元素：<h2>PHP</h2>
	第二个子元素里面还有一个子元素：<h2>CSS</h2>
	-->
	<p>上面的元素</p>
	<div class="box">
		<h2>HTML</h2>
		<div>
			<h2>CSS</h2>
		</div>	
		<h2>PHP</h2>
	</div>
	<p>下面的元素</p>
</body>
</html>

3、伪类选择器

  • 伪类选择器是用来给超链接的不同状态来设置样式。
选择器含义
:link向未被访问的链接添加样式
:visited向已被访问的链接添加样式
:hover当鼠标悬浮在元素上方时，向元素添加样式
:active鼠标放在元素上面时，点击的一瞬间
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>伪类选择器</title>
	<style type="text/css">
		a:link{
			color: #f00;
		}
		a:visited{
			color:#000;
		}
		a:hover{
			color:gold;
		}
		a:active{
			color:#0f0;
		}
	</style>
</head>
<body>
	<a href="http://www.baidu.com">baidu</a>
	<a href="http://www.qq.com">qq</a>
	<a href="http://www.google.com">google</a>
</body>
</html>
  • 超链接的不同状态是有顺序的，也就是说伪类选择器是有顺序的，如果不按照伪类选择器的顺序，样式就会失效。
  • 顺序：link、visited、hover、active

3.1美化超链接

  • 一般情况下：去掉超链接的下划线，然后同时给超链接设置一个颜色
  • 正常状态与访问过后的状态的样式设置为相同的
  • 当鼠标放上的时候给其设置另外一个颜色
  • 激活状态一般不设置，因为激活状态时间太短

4、属性选择器

  • 属性选择器是与标签的属性名和属性值有关
  • 通过标签的属性名和属性值来匹配元素
选择器含义举例
[attr]匹配所有具有attr属性的元素，不考虑它的值h1[align]{…}
input[type][size]{…}
[attr = “val”]匹配所有attr属性等于val的元素h1[align=“center”]{…}
属性值一般加引号
[attr^=“val”]匹配元素中attr属性以指定值开头的元素Font[color^="#ff"]
[attr$=“val”]匹配元素中attr属性以指定值结尾的元素Font[color￥=“00”]
[attr*=“val”]匹配元素中attr属性包含指定值的元素Font[color*=“00”]
  • 范例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>属性选择器</title>
	<style type="text/css">
		/* 通过属性选择器来匹配元素 */
		/* 第一种：[属性名] */
		p[align]{
			color:#f00;
		}
		/* 第二种：[属性名="值"] */
		h2[align="center"]{
			color:#f00;
		}
		/* 第三种（开头）：[属性名^="值"] */
		font[color^="#FF"]{
			border:1px solid #00f;
		}
		/* 第四种（结尾）：[属性值$="值"] */
		/* 第五种（包含）：[属性值*="值"] */
	</style>
</head>
<body>
	<p align="center">test1</p>
	<h2 align="center">test2</h2>
	<p align="left">test3</p>
	<font color="#FF0000">颜色</font>
	<font color="#FFAA00">颜色</font>
	<font color="#FFaabb">颜色</font>
	<font color="#FFaacc">颜色</font>
	<font color="#FFaadd">颜色</font>
</body>
</html>

四、尺寸样式属性

属性值含义
heightauto：自动，浏览器会自动计算高度
length：使用px定义高度
%：基于包含它的块级对象的百分比高度		设置元素高度
width同上设置元素的宽度
  • 范例
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>尺寸样式属性</title>
	<style type="text/css">
		/*使用类选择器来设置样式*/
		.box{
			width:100px;
			height: 100px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<!-- 给div标签设置高、宽、背景颜色 -->
	<div class="box"></div>
</body>
</html>
  • span标签不能设置宽度，因为span标签是一个行内元素，不可以设置高宽，只有块级元素能设置高宽。

五、文本与字体属性

1、文本属性

属性名值含义
color#ff0000 或 red 或 rgb(3,5,8)设置文本颜色
text-alignleft（居左
right（居右）
center（居中））		设置文本的水平对齐方向
text-decorationnone（去掉文本修饰线）
underline（下划线）
overline（上划线）
line-through（删除线）		设置文本修饰线
text-transformcapitalize、uppercase、lowercase大小写转换或者首字母大写
Line-height固定值或百分比设置行高
text-indentpx 或 em设置首行缩进，允许负值
letter-spacingpx设置字符间距
word-spacingpx设置单词间距
  • 范例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本属性</title>
	<style type="text/css">
		.zhang{
			/*十进制表示颜色的方式在CSS中没有浏览器兼容性的问题*/
			color: rgb(255,0,0);	
			text-decoration:underline;
		}
		h2{
			text-align:center;
		}
		.cap{
			text-transform: capitalize;
		}
		p{
			/* 一个em表示一个汉字的位置，可以为负数 */
			text-indent: 2em;
			/* 行高的值与高度的值相同，就可以实现文本垂直方向上居中对齐 */
			line-height:30px;
			height:30px;
		}
	</style>
</head>
<body>
	<h2>文本属性</h2>
	<p>测试文本属性，测试<span class="zhang">文本</span>属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性。</p>
	<div class="cap">cascading Style sheet</div>
</body>
</html>

2、字体属性

属性名值含义
font-stylenormal（正常）
italic（斜体）		设置文本为斜体
font-weightnormal（正常）
bold（加粗）		设置文本粗细
font-size如12px、14px，需要加单位设置文本大小
font-family微软雅黑、楷体、宋体设置文本字体
font举例：font:italic bold 14px “微软雅黑”简写属性，能够同时给文本设置斜体、加粗、大小、字体
每一个值之间需要使用空格，并且一定要有顺序
  • 范例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>字体属性</title>
	<style type="text/css">
		.zhang{
			/* 将文本设置为斜体 */
			font-style:italic;
			/* 将文本设置为加粗 */
			font-weight:bold;
			/* 将文本大小设置为36px */
			font-size:36px;
			/* 将文本字体设置为楷体，没有该字体则使用下一个，都没有则会显示为宋体 */
			font-family:"楷体","微软雅黑";
		}
		i{
			/* 将斜体恢复正常 */
			font-style:normal;
		}
		b{
			/* 将加粗效果恢复正常 */
			font-weight:normal;
		}
		.zz{
			font:italic bold 24px "宋体";
		}
	</style>
</head>
<body>
	<h3>测试字体属性</h3>
	<p>测试字体属性测试<span class="zhang">字体</span>属性测试<i>字体</i>属性测试字体属性测试字体属性测试字体<b>属性</b>测试字体属性测试字体属性测试字体属性测试字体属性测试字体属性测试<span class="zz">字体</span>属性测试字体属性测试字体属性测试字体属性测试字体属性测试字体属性</p>
</body>
</html>

六、列表样式属性

  • 这里的列表可以是 无序列表 或 有序列表
  • 但实际上主要说的是无序列表，因为使用较频繁
属性值含义
list-style-typenone（将列表前面的项目符号去掉）
disc（实心圆）
square（实心小方块）
circle（空心圆）		设置列表前项目符号的类型
list-style-positoninside（里面）
outside（外面）		设置列表项标记的放置位置
list-style-imageurl(图像路径)将图像设置为列表项标记
list-stylesquare inside url(arrow.gif)在一个声明中设置所有列表属性
  • 范例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>列表样式选择器</title>
	<style type="text/css">
		/* 后代元素选择器 */
		.box ul{
			/* none:去除列表前的项目符号 */
			list-style-type:none;
		}
		.box ul li{
			border:1px solid #f00;
			height:35px;
			line-height: 35px;
			/* 项目符号的位置 */
			list-style-position:inside; 
			/* 将列表前面的符号换成一张图片 */
			/*
			 * list-style-image: url(./image/tri.png)
			 * 这种方式不能修改图片大小
			 */
			 background: url(./image/tri.png) no-repeat 0rem 0rem;
			 background-size: 1rem 1rem;
			 text-indent: 2em;	
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>请列出中国四大名著</h2>
		<ul>
			<li>西游记</li>
			<li>红楼梦</li>
			<li>三国演义</li>
			<li>水浒传</li>
		</ul>
	</div>
</body>
</html>

七、特性

1、继承性

外层元素上的样式会被内层元素所继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>继承性</title>
	<style type="text/css">
		body{
			color:#f00;
		}
		p{
			color:#00f;
		}
	</style>
</head>
<body>
	<div>
		<h2>h2标题</h2>
		<p>p段落</p>
	</div>
</body>
</html>

覆盖

当内存元素上的样式与外层元素相同时，内层元素会覆盖外层元素

  • 并不是所有的样式都能够被继承，只有文本与字体样式能够被继承
  • 实际工作中，往往会给body标签设置字体大小以及字体颜色。

2、优先级

  • 优先级：行内样式>id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>优先级</title>
	<style type="text/css">
		/* 标签选择器 */
		div{
			color:#f00;
		}
		/* 类选择器 */
		.d{
			color:#00f;
		}
		/* id选择器 */
		#dd{
			color:#0f0;
		}
		div h2{		/* 1+1=2 */
			color: #ccc;
		}
		.d h2{		/* 10+1=11 */
			color:#000;
		}
		#dd h2{		/* 100+1=101 */
			color:#f00;
		}
	</style>
</head>
<body>
	<div class="d" id="dd" style="color:skyblue;">
		<h2>h2标题</h2>
		<p>p段落</p>
	</div>
</body>
</html>
  • 一般而言，选择器指向的越准确，优先级就越高
  • 不管是单个选择器还是多个选择器组合都可以通过以下数值相加计算
选择器权重值
标签选择器1
类选择器10
id选择器100
行内样式1000

3、!important属性

  • 主要用来提升属性的权重，其属性的权重值无穷大
  • 格式：属性:值 !important;
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>!important</title>
	<style type="text/css">
		/*
		 * 使用!important属性
		 * 属性:值 !important;
		 * 加了!important属性，其权重值无穷大
		 */
		p{
			color:#f00 !important;
			font-size:20px;
		}
		.p1{
			color:#0f0;
		}
		#p2{
			color:#00f;
			font-size:100px;
		}
	</style>
</head>
<body>
	<p class="p1" id="p2">test</p>
</body>
</html>
  • !important属性提升的只是该属性的权重，不是选择器的权重。
    上面的例子可以看出字体大小是由id选择器中的font-size属性决定的。
  • !important属性不能提升继承属性的权重。

4、一个标签可以携带多个类名

  • 类名指的是class的属性值。
  • 一个标签可以有多个类名：class属性值可以有多个，每一个属性值之间用空格分隔。
  • 优点：
    1、减少CSS的代码量
    2、多个类名的样式会叠加到当前元素上
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>多个类名</title>
	<style type="text/css">
		/*
		 * class=div1的文字设置为加粗
		 * class=div2的文字设置为红色
		 * 第三个div的文字加粗并设置为红色
		 */
		 .div1{
		 	font-weight:bold;
		 }
		 .div2{
		 	color:#f00;
		 }
	</style>
</head>
<body>
	<div class="div1">test</div>
	<div class="div2">test</div>
	<div class="div1 div2">test</div>
</body>
</html>
  • 如果一个标签内的多个类名存在相同的样式，就会存在样式的冲突。
    写在后面的样式作为标准

5、标准文档流

  • 我们制作HTML网页时，遵循一个“流”的规则：从左至右、从上至下
  • 空白折叠现象：元素之间的写换行在浏览器中以空格显示，元素写在同一行之后就没有间隔
  • 高矮不齐，底部对齐：同一行的元素底部对齐

八、背景样式属性

属性值含义
background-color#ff0000、red、rgb(255,0,0)背景颜色
background-imageurl(图像路径和名称)背景图像
background-repeatrepeat、repeat-x、repeat-y、no-repeat背景图像是否重复
background-positioncenter center或x% y%或xpos ypox背景图像起始位置
background-attachmentscroll（滚动）
fixed（固定）		设置背景图像是否固定或者随着页面的其余部分滚动
background…设置背景的简写形式
  • 示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>背景样式属性</title>
	<style type="text/css">
		/* 给body标签设置样式 */
		body{
			font-size:12px;
			color:#f60;
		}
		.box{
			width:400px;
			border: 1px solid #00f;
			margin-right: auto;
			margin-left: auto;

		}
		.box h2{
			height:35px;
			line-height:35px;
			color:gold;
		}
		.box ul li{
			/* 去除li前的项目符号 */
			list-style:none;
			height:30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-image:url(./image/tri.png);
			background-repeat:no-repeat;
			background-size: 1rem 1rem;
			background-position: 0rem center;
			padding-left:15px;
		}
		/* 超链接美化 */
		a:link,a:visited{
			color:#444;
			text-decoration: none;
		}
		a:hover{
			color: #f00;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>新闻列表</h2>
		<ul>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
	</div>
</body>
</html>
  • background-color
    用于给元素设置背景颜色，前提是这个元素有内容或者有宽高。
  • background-image 用于给元素设置背景图片
    1、图片的地址放在url()中；
    2、同样的，这个元素要有内容或者有宽高；
    3、背景图片默认是平铺的。
  • background-repeat
    用于设置背景图片是否平铺，已经平铺方向
  • background-position
    用于设置背景图片的位置，有水平位置和垂直位置两个值，表达方式有三种：（三种方式可以混用）
    1、英文单词
    水平方向：left、center、right
    垂直方向：top、center、bottom
    2、固定值
    px px
    3、百分比

九、浮动

  • 行内元素的特性：让多个元素排在一行
  • 块级元素的特性：给元素设置宽高
  • 在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
  • 浮动元素可以让元素脱离标准文档流，就可以实现让多个元素排在同一行，并且可以设置宽高。
  • 浮动是通过一个浮动属性来实现的，有left和right两个值。
  • 特性：
    1、浮动元素脱离标准文档流，不再占用空间。
    2、浮动元素的层级要比标准文档流的元素层级高，它会将标准文档流中的元素盖住
    3、浮动元素会向左或向右进行浮动（移动）
    4、浮动元素遇到父元素的边框或上一个浮动元素就停止浮动
    5、浮动元素浮动后，其父元素不会再包裹着浮动元素
    6、将行内元素进行浮动以后，这个行内元素就会变成块级元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		.box1{
			width:600px;
			border: 1px solid #000;
			margin-left: auto;
			margin-right: auto;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #f00;
			/* 给这个元素增加浮动属性 */
			float:left;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: #0f0;
			float:left;
		}
		.div3{
			width: 100px;
			height: 100px;
			background-color: #00f;
			float:right;
		}
		.box2{
			width:600px;
			border: 1px solid #000;
			margin-left: auto;
			margin-right: auto;
		}
		.s1{
			/* 行内元素设置宽高（在没有成为浮动元素时无效） */
			width:100px;
			height: 100px;
			background-color: #f00;
			float:left;
		}
		.s2{
			/* 行内元素设置宽高（在没有成为浮动元素时无效） */
			width:100px;
			height: 100px;
			background-color: #0f0;
			float:left;
		}
		.s3{
			/* 行内元素设置宽高（在没有成为浮动元素时无效） */
			width:100px;
			height: 100px;
			background-color: #00f;
			float:right;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
	<div class="box2">
		<div style="height:100px"></div>
		<span class="s1">文本一</span>
		<span class="s2">文本二</span>
		<span class="s3">文本三</span>
	</div>
</body>
</html>

清除浮动

  • 只要有浮动，必须有清除浮动；因为浮动元素会影响到下方元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹。
  • 清除浮动后，不会影响浮动元素的下方排版布局，浮动元素的父元素在视觉上包裹着浮动元素
  • 清除浮动的三种方法：
    1、给浮动元素的父元素设置一个固定的高度
    2、使用清除浮动的样式属性：clear
    3、使用overflow:hidden这个属性清除浮动
  • 设置高度的方法不建议使用，因为一个元素的高度一般不手动设置，应该由其自身内容填充高度
  • 使用清除浮动的样式属性 clear，这个属性有三个值（left、right、both）一般用在最后一个浮动元素下面
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.box{
			width:600px;
			border:1px solid #000;
			margin-left: auto;
			margin-right: auto;
		}
		.box div{
		}
		.div1{
			background-color: #f00;
			float:left;
			width: 100px;
			height: 100px;
		}
		.div2{
			background-color: #0f0;
			float:left;
			width: 100px;
			height: 100px;
		}
		.div3{
			background-color: #00f;
			float:right;
			width: 100px;
			height: 100px;
		}
		.clear{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<!-- 在最后一个浮动元素下面新建一个空白的div用于清除浮动 -->
		<div class="clear"></div>
	</div>
	<h2>浮动与清除浮动</h2>
</body>
</html>
  • 使用overflow:hidden属性清除浮动：原意是将溢出的部分进行隐藏，但是还可以用于清除浮动
    用上面的例子举例：给浮动元素的父元素设置overflow:hidden
<div class="box" style="overflow:hidden">

十、盒子模型

  • CSS中的盒子的组成部分：内容(content)+内填物(padding)+边框(border)+外边距(margin)
  • 一个盒子的主要属性：width、height、padding、border、margin
  • width指的是盒子内容的宽度，而不是盒子的宽度
  • height指的是盒子内容的高度，而不是盒子的高度
  • padding是内填充的意思，指的是里面的内容到盒子边框的距离
  • border是外边框的意思，指的是盒子边框
  • margin是外边距的意思，指的是盒子与盒子之间的距离

一个盒子的总宽度为：盒子内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度为：盒子内容的高度+上下两边的填充+上下两边的边框线
盒子的高度一般不用设置，因为盒子的高度由盒子的内容决定

1、padding

  • padding是内填充的意思，指的是里面的内容到盒子边框的距离
  • padding是有4个方向的，所以能分别描述这4个方向的padding
  • 方法有两种：
    1、padding-top、padding-right、padding-bottom、padding-left。
    2、padding：这个属性描述4个方向是有顺序的，顺时针方向，从上开始：上、右、下、左。
  • 如果简写方法中padding只设置一个值表示4个方向的内填充都是这个值。
  • 如果简写方法中padding设置两个值表示上下方向的内填充为第一个值，左右为第二个值。
  • 如果简写方法中padding设置三个值，第一个值表示上、第二个值表示左右、第三个值表示下。

2、margin

  • margin是外边距的意思，指的是盒子与盒子之间的距离
  • margin也是4个方向的，所以也能通过4个方向对其进行描述
  • 方法和padding相同，两种方法，只是把padding换成了margin
  • margin有塌陷现象：
    1、在标准文档流中，竖直方向的margin值不会叠加，会取较大值
    2、水平方向没有margin塌陷现象
    3、浮动元素没有margin塌陷现象
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>竖直反向的margin值不会叠加，取较大值</title>
	<style type="text/css">
		div{
			width:100px;
			height:100px;
		}
		.div1{
			background-color: #f00;
			margin-bottom: 20px;
		}
		.div2{
			background-color: #00f;
			margin-top: 40px;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>
  • margin居中，margin的值可以是auto，当左外边距和右外边距都是auto时，这个盒子就会水平居中。

1、使用margin来实现水平居中时，盒子一定要有固定的宽度；
2、只有块元素可以实现水平居中，行内元素是不能实现居中的；
3、只有标准文档流中的盒子可以使用margin来居中；
4、margin属性用来实现盒子的水平居中，而不是文本的水平居中。
文本的水平居中是用text-align:center;实现的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>margin居中</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: #f00;
			margin-left: auto; /* 左外边距 */
			margin-right: auto; /* 右外边距 */
			margin-top: 100px; /* 上外边距 */
			margin-bottom: 100px; /* 下外边距 */
		}
		p{
			height: 50px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<p></p>
</body>
</html>
  • 善于使用父元素的padding，而不是子元素的margin

margin这个属性本意是用于描述兄弟元素之间的关系，不是用于描述父子元素之间关系的。如果是父子元素的关系，最好在父元素设置padding属性。

3、border

  • border边框的意思，有三个要素：粗细、线型、颜色。
  • 语法格式：border: 粗细 线型 颜色
  • 颜色可以省略不写，默认黑色；其他两个属性不能省略，省略会导致border设置失效。
  • 边框的线型：
    线型
  • 颜色用三种表达方式都可以。
  • 边框也有四个方向上的属性：border-top、border-right、border-bottom、border-left可以分别设置上面的粗细、线型、颜色。

十一、display

  • display是显示的意思，用来进行行内元素与块级元素之间的相互转化，将隐藏的元素显示或者将显示的元素隐藏。
  • display的属性取值：inline、block、none。
  • 当我们将一个行内元素的display属性的值设置为block以后，这个元素就会被转换为块级元素（设置的宽高生效）。
  • 当我们将一个块级元素的display属性的值设置为inline以后，这个元素就会被转换为行内元素（设置的宽高失效）。
  • 将一个显示的元素display属性设置为none以后，这个元素就会隐藏。
  • 将一个隐藏的元素display属性设置为block以后，这个元素就会显示。
  • 显示/隐藏主要是JS来使用。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>display案例</title>
	<style type="text/css">
		/* 通用选择器来去除HTML中所有标签的默认内填充与外边距 */
		*{
			margin:0px;
			padding:0px;
		}
		body{
			background-image: url(./image/background29.jpg);
			background-size: 100%;
			background-repeat:no-repeat;
			background-position: top center;
		}
		.nav{
			width:960px;
			height: 40px;
			margin-left: auto;
			margin-right:auto;
		}
		.nav ul{
			/* 将列表前的项目符号去除 */
			list-style:none;
		}
		.nav ul li{
			/* 把每个li标签向左浮动 */
			float:left;
			/* 给每个li标签设置宽度 */
			width:120px;
			text-align:center;
			background-image: url(./image/line.jpg);
			height:40px;
			line-height: 40px;
		}
		.nav ul li a{
			width: 120px;
			height: 40px;
			/* 将行内元素转换为块状元素 */
			display: block;
		}
		a:link,a:visited{
			text-decoration: none;
			color: white;
		}
		a:hover{
			background-image: url(./image/yellow_line.jpg);
			
		}
	</style>
</head>
<body>
	<div style="height:40px"></div>
	<div class="nav">
		<ul>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
	</div>
</body>
</html>

十二、position

  • position表示位置的意思，主要用于实现对元素的定位。
  • 在CSS中定位分为三种：fixed(固定定位)、relative(相对定位)、absolute(绝对定位)。
  • 在使用定位属性时，一定要配合定位的坐标来使用。
    left：表示定位的元素离左边多远。
    right：表示定位的元素离右边多远。
    top：表示定位的元素离上边多远。
    bottom：表示定位的元素离下边多远。

1、固定定位

  • 固定定位，它是相对于浏览器窗口来进行定位；不管页面如何滚动，固定定位元素显示的位置不会改变。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>固定定位</title>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}
		p{
			width:100px;
			height:100px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<p></p>
	<img src="./image/line.jpg" alt="" >
	<img src="./image/line.jpg" alt="" >
	<img src="./image/line.jpg" alt="" >
	<img src="./image/line.jpg" alt="" >
	<img src="./image/line.jpg" alt="" >
</body>
</html>
  • 特点：
    1、固定定位元素脱离了标准文档流
    2、固定定位元素的层级比标准文档流里的元素高，所以固定定位元素会盖住标准文档流里的元素
    3、固定定位元素不再占用空间
    4、固定定位元素显示的位置不会随着浏览器滚动而滚动
  • 用固定定位返回网页顶部
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>使用固定定位来实现返回顶部的按钮</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
		}
		a{
			width: 60px;
			height: 60px;
			display: block;
			background-color: #ccc;
			text-align:center;
			line-height: 30px;
			text-decoration: none;
			color:white;
			font-weight: bold;
			position: fixed;
			right:30px;
			bottom:30px;
		}
		div{
			height:200px;
		}
		.div1{
			background-color: #f00;
		}
		.div2{
			background-color: #0f0;
		}
		.div3{
			background-color: #00f;
		}
		.div4{
			background-color: #f00;
		}
		.div5{
			background-color: #0f0;
		}
		.div6{
			background-color: #00f;
		}
	</style>
</head>
<body>
	<a href="#">返回<br/>顶部</a>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
	<div class="div6"></div>
</body>
</html>
  • 用固定定位实现顶部导航栏
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>固定定位实现顶部导航栏</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
		}
		body{
			padding-top: 60px;
		}
		.nav{
			width: 100%;
			height: 60px;
			background-color: #222222;
			position: fixed;
			left:0px;
			top:0px;
		}
		.nav .inner_c{
			width: 1000px;
			height:60px;
			margin:0px auto;
		}
		ul{
			list-style: none;
		}
		ul li{
			float:left;
			width:100px;
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
		ul li a{
			display: block;
			width:100px;
			height: 60px;
			text-decoration: none;
			color:white;
			font-weight: bold;
		}
		a:hover{
			background-color: gold;

		}
		div{
			height:200px;
		}
		.div1{
			background-color: #f00;
		}
		.div2{
			background-color: #0f0;
		}
		.div3{
			background-color: #00f;
		}
		.div4{
			background-color: #f00;
		}
		.div5{
			background-color: #0f0;
		}
		.div6{
			background-color: #00f;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="inner_c">
			<ul>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
				<li><a href="#">网站栏目</a></li>
			</ul>
		</div>
	</div>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
	<div class="div6"></div>
</body>
</html>

2、相对定位

  • position:relative
  • 相对定位时相对于“原来的自己”进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>相对定位</title>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}
		.box{
			width: 600px;
			border:1px solid #000;
			margin:100px auto;
		}
		.box div{
			width:100px;
			height: 100px;
		}
		.div1{
			background-color: #f00;
		}
		.div2{
			background-color: #0f0;
			/* 相对定位 */
			position:relative;
			left:100px;
		}
		.div3{
			background-color: #00f;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
</body>
</html>

相对定位

  • 特点：
    1、相对定位元素没有脱离标准文档流
    2、相对定位元素如果没有设置定位的坐标，那么相对元素还在原来的位置
    3、相对定位元素设置定位的坐标后，原本的位置会空白
    4、相对定位元素会将标准文档流中的元素盖住
    5、相对定位元素的定位坐标可以是负数

相对定位元素原本的位置会空白，所以相对定位很少单独使用，主要是用来配合“绝对定位”元素来使用的。

3、绝对定位

  • positon:absolute
  • 绝对定位是相对于“上级定位元素”来进行定位的。
  • 绝对定位元素会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素来进行定位；但是如果其父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性，如果有就进行定位；如果没有设置，就会进行向上一级进行查找，直到相对于浏览器窗口来进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>绝对定位</title>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}
		.box{
			width: 600px;
			border: 1px solid #000;
			margin:100px auto;
			position: relative;
		}
		.box div{
			width:100px;
			height:100px;
		}
		.div1{
			background-color: #f00;
		}
		.div2{
			background-color: #0f0;
			/* 绝对定位 */
			position:absolute;
			/* 设置定位的坐标 */
			right: 0px;
			top:0px;
		}
		.div3{
			background-color: #00f;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
</body>
</html>
  • 特点：
    1、绝对定位元素脱离了标准文档流
    2、绝对定位元素不再占用空间
    3、绝对定位元素会盖住标准文档流中的元素
    4、绝对定位元素相对于其上级定位元素进行定位，这里的上级定位元素可以是相对定位、固定定位和绝对定位，但一般只会给其上级定位元素设置相对定位属性。

十三、z-index

  • z-index表示压盖的层级关系
  • 只有定位的元素才有z-index值（即只有设置了固定定位、相对定位、绝对定位的元素才会有z-index值）
  • z-index值没有单位，是一个正整数，默认的z-index值是0
  • 如果多个定位元素没有设置z-index属性，或者z-index值设置一样，那么写在HTML后面的定位元素就会盖住前面的定位元素。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>z-index</title>
	<style type="text/css">
		.div{
			width:100%;
			height:100%;
			position: relative;
		}
		.div1{
			width:200px;
			height:200px;
			background-color: #f00;
			/* 绝对定位 */
			position:absolute;
			/* 定位的坐标 */
			left:100px;
			top:100px;
			z-index: 1;
		}
		.div2{
			width:200px;
			height:200px;
			background-color: #0f0;
			/* 绝对定位 */
			position:absolute;
			/* 定位的坐标 */
			left:200px;
			top:200px;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div  class="div">
		<div class="div1"></div>
		<div class="div2"></div>
	</div>
</body>
</html>

在这里插入图片描述

  • z-index的用途：如果后面有定位元素写在导航栏的后面，可能盖住导航栏，所以导航栏应该设置较高的z-index值。

十四、CSS3

  • CSS3与CSS2之间的区别
    CSS3 = CSS2 + 新语法 + 新的属性

1、结构伪类

选择器功能
E:first-child匹配第一个孩子
E:last-child匹配最后一个孩子
E:nth-child(n)匹配第n个孩子
E:nth-child(2n)
E:nth-child(even)		匹配偶数的孩子
E:nth-child(2n+1)
E:nth-child(odd)		匹配奇数的孩子
E:only-child匹配有且只有一个孩子
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>结构伪类</title>
	<style type="text/css">
		.box ul li:first-child{
			color:#f00;
			width:100px;
			height:30px;
			line-height: 30px;
			border: 1px solid #000;
		}

		.box ul li:last-child{
			color:#f00;
			width:100px;
			height:30px;
			line-height: 30px;
			border: 1px solid #000;
		}
		div ul li:only-child{
			color:#f00;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li>test1</li>
			<li>test2</li>
			<li>test3</li>
			<li>test4</li>
			<li>test5</li>
			<li>test6</li>
			<li>test7</li>
			<li>test8</li>
		</ul>
	</div>
	<div>
		<ul>
			<li>only-child</li>
		</ul>
	</div>
</body>
</html>
  • 案例：使用CSS3中的结构伪类实现隔行变色的表格
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3中的结构伪类实现隔行变色表格</title>
	<style type="text/css">
		table tr:nth-child(even){
			background-color: #f00;
		}
		table tr:nth-child(odd){
			background-color: #00f;
		}
		/* 当鼠标移动到tr上面时显示背景颜色为灰色 */
		table tr:hover{
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<table width="500" border="1" align="center">
	table>tr*20>td{&nbsp;}*10
	<!-- 都是重复的，节省空间，不展开了 -->
</body>
</html>

在这里插入图片描述

  • 合并表格的边框线border-collapse，值为：collapse
<style type="text/css">
	table{
		border-collapse: collapse;
		border-color: #ccc;
	}
</style>

2、伪元素

选择器功能
::first-letter操作当前元素中的第一个字
::first-line操作当前元素中的第一行
::before在之前插入，在一个盒子内部的最前面
::after在之后插入，在一个盒子内部的最后面
  • 示例省略。

3、文本阴影

  • text-shadow有水平阴影、垂直阴影、模糊距离、阴影颜色四个属性。
  • 每个阴影有两个或三个长度值和一个可选的颜色值进行规定；省略的长度是0。
值描述
h-shadow必需；水平阴影的位置，允许负值。
v-shadow必需；垂直阴影的位置，允许负值。
blur可选；模糊的距离。
color可选；阴影的颜色。
  • 文字阴影可以有多组值，表示多个阴影，多组之间用逗号隔开就可以；
  • 水平阴影正值在右边，负值在左边；
  • 垂直阴影正值在下边，负值在上边；
  • 模糊强度，值越大越模糊。

4、盒子阴影

  • box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、颜色、内/外阴影。
值描述
h-shadow必需；水平阴影的位置，允许负值。
v-shadow必需；垂直阴影的位置，允许负值。
blur可选；模糊的距离。
spread可选；阴影的尺寸。
color可选；阴影的颜色。
inset可选；将外部阴影(outset)改为内部阴影。
  • 可以给div设置box-shadow，img图片也可以。
  • 示例省略。

5、圆角矩形

  • border-radius：左上、右上、右下、左下。
  • 如果border-radius四个值相同，只需要写一个就行。
  • 不想有圆角的位置用0px就行。
  • 让div变圆形：div的高宽设置相同，然后设置border-radius为border高宽的一半。
  • 让div变椭圆：div的border-radius设置为高度的一半。
  • 让div变半圆：div的高度为宽度的一半，border-radius设置为高度值
  • 其他图案类似
  • 案例：（更多>）圆角矩形超链接
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>圆角矩形案例</title>
	<style type="text/css">
		body{
			background-color: #ccc;
		}
		.more{
			width:60px;
			height:20px;
			background-color: #fff;
			text-align: center;
			line-height: 20px;
			margin:100px auto;
			/* 圆角矩形 */
			border-radius: 10px;
			font-size: 12px;
			font-family: "微软雅黑";
		}
		a{
			display:block;
			width:60px;
			height: 20px;
			border-radius: 10px;
		}
		a:link,a:visited{
			color: #000;
			text-decoration: none;
		}
		.more a:hover{
			background-color: #f00;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="more"><a href="#">更多></a></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

6、透明度

  • 只要是颜色，都可以用透明度
  • rgba(红色,绿色,蓝色,透明度)
  • a：表示透明度的意思，透明度取值：0~1，0表示完全透明
  • 可以实现：背景颜色(background-color)透明、文本颜色(color)透明、边框颜色(border)透明。
Telegram bot & Mini-App开发实践---Telegram简单介绍与初始化小程序获取window.Telegram.WebApp对象并解析
鄙人kunzhi96，感恩遇见！
10-24 2万+
Telegram是一款由 Pavel Durov 于 2013 年发布的即时通讯工具，最初的目标是为用户提供一个更加注重隐私和安全的聊天平台。与其他通讯软件相比，Telegram 凭借其端到端加密、支持多平台同步以及开源的 API 生态系统，迅速成为全球用户的首选工具之一。Telegram bot 是一种特殊的 Telegram 帐户，由开发者通过 Telegram API 创建，用来与用户自动交互。
C++ 应用软件开发从入门到实战详解
热门推荐
dvlinker的技术专栏
06-21 4万+
本文详细介绍一下Windows平台下用C++开发应用软件的诸多内容，以供大家借鉴或参考。
前端开发学习路线（学+测） - 阿里云大学.html
03-16
只是入门没有进阶的资源阿里也有vue.js的开发实战需要的自己去找.阿里有很多的学习资料不单单是前端的，其他的也有。当然大部分都是入门级别的。
阿里云前端开发学习路线 - HTML入门与实战 笔记
Rotark的博客
05-02 1478
学习链接 目录学习链接第一章 Web基础常见浏览器浏览器内核web标准第二章 HTML入门 第一章 Web基础 常见浏览器 浏览器内核 web标准 第二章 HTML入门
重磅推出：分享阿里云大学前端开发学习路线链接
spp_1987的专栏
06-04 1404
重磅推出：分享阿里云大学前端开发学习路线链接 这是一份阿里云大学推出前端开发学习路线，适合入门、也适合刚入职场一两年的小伙伴，来一个基础知识进行加深视频学习。内容言简意赅，通过demo练习等来理解学习到手知识点。 前端开发学习路线链接 https://edu.aliyun.com/roadmap/frontend?source=5176.11533457&userCode=cxqz7dnt...
【速速收藏学习】阿里云大学各技术学习路线合集
weixin_33980459的博客
05-31 321
【速速收藏学习】Java学习路线：Java学习路线图【速速收藏学习】Linux运维学习路线：Linux运维学习路线图【速速收藏学习】云计算学习路线：云计算工程师学习路线图【速速收藏学习】前端开发学习路线：前端开发学习路线图Java学习路线：从事云计算、大数据开发工作必备技能6大阶段，26门免费课程，871课时，助您全面掌握Java开发技能每阶段包含初、中、高三个难度等级考试，全方位自测掌握程度常见...
WEB前端开发初学者必看的学习路线（附思维导图）
weixin_34400525的博客
03-09 2271
很多同学想学习WEB前端开发，虽然互联网有很多的教程、网站、书籍，可是却又不知从何开始如何选取。看完网友高等游民白乌鸦无私分享的原标题为《写给同事的前端学习路线》这篇文章，相信你会有所收获。 前端开发入门学习有：HTML、CSS、JavaScript（简称JS）这三个部分。所以在学习之前我们需要先明确三个概念： HTML——内容层，它的作用是表示一个HTML标签在...
HTML+CSS学习笔记（pink老师前端课程笔记--补档）
Tiimmi丶的博客
10-31 1万+
开始于2021年8月3日09点59分 课程学习路线：HTML5-> CSS3->H5C3提高->项目拼优购电商网站 仅更新到H5C3提高的C3提高部分（新增选择器），忙于其他事情，暂不继续更新 文章目录HTML1. HTML标签2. HTML基本结构标签3. 网页开发工具4. 标签语义5. 特殊字符6. 表格标签7. 列表8. 表单CSS基础1. 简介2. 选择器3. 字体属性4. 文本属性5. 引入方式6. chorme调试工具CSS入门1. Emmet语法1.1 快速生成HTML结
CSS学习笔记
怀抱清风的博客
03-22 1974
CSS学习大纲: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-cop...
前端入门超级攻略：你的第一步学习指南
海风依旧
07-03 2982
由于前端技术的快速迭代性，国内的高校基本上不会去专门开设前端开发这一门课程，与之相对应的是大数据和软件工程，围绕python和java等生态和开发路线较为稳定的语言去开设课程，这就导致大部分学生在校对前端的了解局限于前端三剑客直到现在，还有不少学生到了大三以为学了三剑客就能找到实习，所以笔者总结了一份如何学习前端的指南，希望能帮助到想入门或即将入门前端的同学如果想系统的学习一门课程，只凭一时兴趣是无法长久的学习的
小滴课堂-学习笔记：前端-后端项目云服务器生产环境部署核心知识
dev666的博客
12-23 2137
愿景："让编程不再难学，让技术与生活更加有趣" 更多架构课程请访问 xdclass.net 目录 第1集 小滴课堂互联网架构之应用部署上线核心知识 第2集 云服务器介绍和阿里云服务器ECS服务器选购 第3集 阿里云服务器远程登录和常用工具 生产环境Linux CentOS云服务器常见相关软件安装 第1集 阿里云Linux服务器Centos7 安装JDK8环境 第2集 生产环境Linux服务器上Nginx介绍和安装 第3集 生产环境Linux服务器上Mysql安装和导入数据 小滴课堂综合.
仿阿里云管理中心UI,响应式管理中心,适合整合开发
12-22
阿里云管理中心UI是一款高度仿照阿里巴巴云平台管理界面设计的用户界面，旨在为开发者和企业用户提供一个现代化、响应式的管理工具。这样的UI设计通常注重用户体验，具有清晰的布局、直观的操作流程以及美观的视觉...
《狂神说课程完整笔记内容合集》
最新发布
06-18
狂神说致力于提供高质量的技术课程，覆盖了包括但不限于前端、后端、数据库、人工智能、云计算等多个方向，旨在帮助学员快速掌握实用的技术知识。 此合集整理了狂神说所有课程的笔记内容，使学员能够回顾课程的核心...
前端学习路线整理，如何点亮前端技术栈
weixin_41194675的博客
02-22 1168
  全文7465字，阅读约25分钟 从用Markdown写博客开始，慢慢点亮前端技术栈写在开始关于Markdown关于学习方法和学习资源前端技术栈学习路线一、工具类代码编辑器Visual Studio Code代码管理工具SVN / Git、GitHub二、核心技术类前端-用户交互搭建静态页面：Html5与CSS3实现交互功能：JavaScript与ES6前端-后端交互与服务器交换数据：AJAX[进阶]运行在服务端的JS：Node.js三、前端框架/库类JQueryVue.js四、工程类代码规范
阿里云Java学习路线 - Java编程入门 笔记
Rotark的博客
04-13 1026
目录第一章 Java语言介绍Java发展简介Java主要特点Java可移植性第二章 搭建Java开发环境第三章 初始Java开发 第一章 Java语言介绍 Java发展简介 Java标准开发（J2SE、JAVA SE）：提供的是底层支持，实现桌面程序的开发； Java嵌入式开发（J2ME、JAVA ME）：Android开发，后Google提出Kotlin开发Android； Java企业开发（...
阿里云服务器ECS学习笔记
Rotark的博客
04-12 754
目录Day 1开通云服务器1.计费2.地域3.网络 Day 1 开通云服务器 1.计费 包年包月 按量付费 长期稳定使用服务器，比如做网站选包年包月；测试或跑数据可以按量付费使用。 2.地域 地域（Region）和可用区（Zone）是两个概念： 地域就是服务器的数据中心所放在的城市，例如华东1是在杭州，华东2是在上海，不同地域的ECS不可内网互联。 可用区是同一地域下的不同数据中心，在同一个...
阿里云Java学习路线 - XML快速入门 笔记
Rotark的博客
04-21 681
学习链接 目录学习链接第一章 XML入门XML简介XML的应用XML的文档声明XML中文乱码问题解决XML元素定义XML属性定义XML 注释XML特殊字符XML的CDATA区XML的PI指令（处理指令）XML 约束简介第二章 DTD（文档类型定义） 第一章 XML入门 XML简介 eXtensible Markup Language 可扩展标记型语言 标记型语言：html等也是使用标签来操作 可...
阿里云Java学习路线 - Ajax快速入门 笔记
Rotark的博客
04-23 539
学习链接 目录1、Ajax简介、异步与同步2、Ajax的应用场景和优缺点3、Ajax发送异步请求（四步操作）第一步，得到XMLHttpRequest第二步、打开与服务器的连接第三步、发送请求第四步、响应请求Ajax第一例：helloworldAjax第二例：发送POST请求Ajax第三例：用户名是否已被注册Ajax第四例：响应内容为xmlAjax第五例：省市联动4、XStream（可把JavaBe...
达内云笔记项目资料及成品代码下载指南
- **云存储和API服务**：由于是“云笔记”，可能使用云服务提供商（如阿里云、腾讯云、AWS等）的存储和API服务来保证数据的云端存储和管理。 - **版本控制**：代码的版本管理可能使用Git，并托管在GitHub、GitLab或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值