CSS 文本和超链接

最新推荐文章于 2024-08-10 17:47:24 发布

m0_58822373

最新推荐文章于 2024-08-10 17:47:24 发布

阅读量1.1k

点赞数 1

原文链接：https://mp-new.csdn.net/mp_blog/creation/editor/117784536

版权

一、CSS 文本属性

属性	含义	举例
color	设置文本颜色	color:red;
text-align	设置文本水平对齐方式	text-align:center;
line-height	设置文本的行高	line-height:25px;

二、CSS 文本颜色

.first { color: red; /* 红色 */ }

.second { color: #0000FF; /* 蓝色 */ }

</style>

<body>

<h3 class="first">CSS文本(红色)</h3>

<h3 class="second">CSS文本(蓝色)</h3>

</body>

</html>

三、CSS 水平对齐（text-align:left/right/center…）

.first { text-align: center; /* 居中 */ }

.second { text-align: right; /* 靠右 */ }

</style>

<body>

<h3 class=“first”>CSS文本 (居中)</h3>

<h3 class=“second”>CSS文本 (靠右)</h3>

</body>

</html>

四、CSS 文本行高（line-height:50px）

.first { border: 1px solid #000000; line-height: 50px; }

.second { border: 1px solid #000000; line-height: 100px; }

</style>

<body>

<h3 class="first">CSS文本(50px)</h3>

<h3 class="second">CSS文本(100px)</h3>

</body>

</html>

五、超链接

CSS中可以根据超链接元素的状态，设置不同的样式属性下面为4种超链接状态：

（1）、a:link - 正常状态，未访问过的超链接状态

（2）、a:visited - 已访问过状态，用户已访问过的超链接状态

（3）、a:hover - 鼠标放上状态，当用户鼠标放在超链接上时状态

（4）、a:active - 点击状态，超链接被点击的那一刻状态

六、CSS 设置超链接样式（颜色、背景、字体…）

.title { color: #FFFFFF; /* 白色字体 */ background-color: blue; /* 蓝色背景 */ font-size: 34px; /* 34px 字体 */ text-decoration: none;/* 去掉链接文字的下划线 */ cursor:wait; /* 改变鼠标形状 */ }

</style>

<body>

<a href="#" class="title">CSS超链接</a>

</body>

</html>

CSS 鼠标指针（设置鼠标形状 cursor:pointer;）：