CSS_0214

最新推荐文章于 2024-08-17 12:45:11 发布

monuo5659

最新推荐文章于 2024-08-17 12:45:11 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/monuo5659/article/details/104312749

版权

HTML 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

1、伪类选择器

a:link 未访问的链接

a:visited已访问的链接

a:hover悬空的链接

a:active选定的链接

伪类选择器是比较常用的，在网页中一些链接点击之后或者访问过后会改变颜色用的就是伪类选择器。

例如：

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:link
            {
                color:black;
            }
            a:visited
            {
                color:#BEBEBE;
            }
            a:hover
            {
                color:red;
            }
            a:active
            {
                color:blue;
            }
        </style>
    </head>
    <base target="_blank" />
    <body>
        <a href="https://baidu.com" />
        <a href="https://JD.com" />
        <a href="https://163.com" />
    </body>
</html>

注意：顺序按照link，visited，hover，active的顺序，不要颠倒。

2、标签显示模式(display)

比如:div独占一行，而span一行可以多个显示。

2.1 块级元素重点

典型的块元素包括<h1>...<h6>、<p>、<div>、<ol>、<ul>、<li>等

块元素<div></div>特点：

1、一行放一个。喜欢吃独食。

2、高度和宽度可以直接设置。

3、宽度（width）如果不设置，默认为容器的100%。

4、div里面放行内元素和块级元素都行。

NOTES:段落<p></p>、<h1~h6>、<dt>里面尽量不要放<div></div>

2.2 行内元素重点。

典型的行内元素包括：<span>、<i>、<em>、<strong>、<s>、<ins>、<a>。一行可以放多个。

行内元素特点：

1、一行可以显示多个

2、设置宽高无效，自身宽高由内容撑开。

3、默认宽高就是它本身内容的宽高。

4、行内元素只能收纳文本或其它行内元素。

NOTES:

1、<span><div></div></span>，span里面放div是严重错误的！！！！！

2、<a></a> ，a里面不能放a标签！

2.3 行内块元素(inline-block)

典型的就是<img />、<input>、 <td>。

特点：

1、相邻的行内快元素都是放在一行，中间有空隙。

2、宽和高就是默认的宽高。例如图片不设置宽高就是默认的宽高。

3、宽高和外边距都是可以控制的。

2.4 标签显示模式的转换。

1、行内转块：display:block

2、块转行内：display:inline

3、块、行转块行内：display：inline-block

例如：行转块内：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		span
		{
			display: block;
			height: 50px;
			color:white;
			background-color: #000000;
		}
	</style>
</head>
<body>
	<span>span</span>
	<span>s2</span>
	<span>s3</span>
</body>
</html>

例如：块转行内

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	
	<title></title>
	<style>
		div
		{
			display: inline;
			color:white;
			background-color: #000000;
		}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</body>
</html>

例子：行内元素转行内块元素

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	
	<title></title>
	<style>
		.nav a
		{
			display: inline-block;
			width: 100px;
			height: auto;
			text-align: center;
			padding:5px;
			background-color: wheat;
			text-decoration: none;
		}
		.nav a:link
		{
			color:white;
		}
		.nav a:visited
		{
			color:#bebebe;
		}
		.nav a:hover
		{
			color:red;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">新浪</a>
		<a href="#">腾讯</a>
		<a href="#">百度</a>
	</div>
</body>
</html>

3、行高那些事儿(line-height)

行高的作用就是调整行高，当行内块文字需要垂直居中的时候通过调整行高就等于高度就可以把文字垂直居中了。

例子：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">

	<title></title>
	<style>
		.nav a
		{
			display: inline-block;
			text-decoration: none;
			width: 100px;
			height:50px;
			text-align: center;
			line-height: 50px;
			background-color: wheat;
		}
		.nav a:link
		{
			color:white;
		}
		.nav a:visited
		{
			color:#BEBEBE;
		}
		.nav a:hover
		{
			background-color: orange;
			color:red;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">网易</a>
		<a href="#">腾讯</a>
		<a href="#">新浪</a>
	</div>
</body>
</html>

monuo5659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_0214

1、伪类选择器a:link 未访问的链接a:visited已访问的链接a:hover悬空的链接a:active选定的链接伪类选择器是比较常用的，在网页中一些链接点击之后或者访问过后会改变颜色用的就是伪类选择器。例如：<!DOCTYPE html><html> <head> <style> ...
复制链接

扫一扫

专栏目录