css样式-链接

agdjdbucbdins

已于 2023-04-12 19:57:31 修改

阅读量467

点赞数

文章标签： css 前端 html

于 2023-04-12 19:55:37 首次发布

本文链接：https://blog.csdn.net/agdjdbucbdins/article/details/130067519

版权

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接</title>
		<!-- •a:link - 普通的、未被访问的链接
			•a:visited - 用户已访问的链接
			•a:hover - 鼠标指针位于链接的上方
			•a:active - 链接被点击的时刻
			-->
		<style>
			a{
				/* 修饰 */
				text-decoration: none;
			}
			a:link{
				/* 规定链接的颜色 */
				color:mediumaquamarine;
			}
			a:visited{
				/* 已访问的链接 */
				color:gray;
			}
			a:hover{
				/* 鼠标指针位于链接的上方 */
				color:red;
				text-decoration:underline;
			}
			a:active{
				color:green;
			}
			.p1:hover{
				/* 链接被点击的时刻 */
				color:red;
				text-decoration: underline;
			}
			.p1:active{
				color:yellow;
			}
		</style>
	</head>
	<body>
		<a href="new.html">超链接</a><br/>
		<a href="i.html">超链接</a><br/>
		<p class="p1">能够设置链接样式的 CSS 属性有很多种（例如 color,
		 font-family, background 等等）。链接的特殊性在于能够根据它们
		 所处的状态来设置它们的样式。


</p>
		
	</body>
</html>

CSS 列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		<style>
			ul{
				/* 设置列表项标志的类型.None去除样式 */
				/* list-style-type:none; */
				/* list-style-image: url(img/ph.jpg); */
				/* 规定列表中列表项目表记的位置: */
				/* list-style-position: inside; */
				/* 三个合集 */
				list-style: none url(img/ph.jpg) inside;
				
			}	
		</style>
	</head>
	<body>
		<ul>
			<li>春晓</li>
			<li>春眠不觉晓</li>
			<li>处处闻啼鸟</li>
			<li>夜来风雨声</li>
			<li>花落知多少</li>
		</ul>
	</body>
</html>

css边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			img{
				border:1px solid red;
				/* 边框的颜色 */
				border-color:aqua;
				/* 宽度 */
				border-width:2px;
				/* 样式 dashed:虚线  solid:实线*/
				border-style:solid;
				border-left:1px dashed yellow;
				border-right-color:green;
				border-top-style:dashed;
				border-bottom-width:3px;
			}
		</style>
	</head>
	<body>
		<img src="img/ph.jpg"alt="">
	</body>
</html>

css表格


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				height:300px;
				width:600px;
				
			}
			table,td{
				border:1px solid black;
			}
			table{
				/* 边框合并 
				collapse:如果可能，边框会合并为一个单一的边框*/
				border-collapse:separate;
				/* 边框间距:边框不能合并 */
				border-spacing: 10px 20px;
				/* 表格的标题位置:top/bottom */
				caption-side: bottom;
				/* 设置是否显示表格中的空单元格
				hide:不在单元格周围绘制边框。*/
				empty-cells: show;	
				
			}
			td{
				width:50%;
			}
			.tr1{
				/* 设置显示单元,行和列的算法 automatic:默认,fixed:列宽由
				表格宽度和列宽度设定*/
				table-layout: fixed;
			}
			
		</style>
	</head>
	<body>
		<table>
			<caption>这是表格的标题</caption>