CSS学习第二弹（列表，透明，块行）-CSDN博客

本文链接：https://blog.csdn.net/Kochiya_ika/article/details/135831787

本文介绍了CSS中的列表样式，包括list-style-type、list-style-position和list-style-image的用法；探讨了标签的透明度属性opacity；并区分了块级、行级和行级块标签的概念，以及如何通过display属性进行调整。

摘要由CSDN通过智能技术生成

一、列表

列表是css列表属性，可以放置，改变列表项标志，或者将图像作为列表项标志。

list-style-type 设置列表项标志的类型

<style >
	li{
		/* 设置列表项标志的类型 */
		list-style-type: circle;
	}
</style>

<body>
    <ol>
        <li>列表内容1</li>
        <li>列表内容2</li>
	    <li>列表内容3</li>
	</ol>
	<ul>
		<li>列表内容1</li>
		<li>列表内容2</li>
		<li>列表内容3</li>
	</ul>
</body>

list-style-position 设置列表中列表项标志的位置

<style >
	li{
		/* 设置例表中列表项标志的位置 */
		list-style-position: inside;
		/* inside是指将图标存放在标签内容里面 */
	}
</style>

list-style-image 将图像设置为列表项标志

<style >
	li{
		/* 将图像设置为列表项标志 */
		list-style-image: url(img/1.png);
	}
</style>

二、透明

透明其实就是对标签进行透明度属性定义：opacity

opacity属性设置标签的不透明级别值为1

规定不透明度：从0.0（完全透明）到1.0（完全不透明）

<style >
	img{
		/* 透明度设置 */
		opacity: 0.5;
	}
</style>


<body>
	<img src="img/1.png" >
</body>

三、块级，行级，行级块标签

块级标签

无论内容多少都会占一行的标签，例如：<p>、<h1>、<ul>、<ol>、<hr/>

我们可以通过网页来查看具体的属性：比如下面这一段代码

<h1> 标题内容 </h1> 
aaaa

在检查页面我们可以很清晰的看到标题内容占整整一行,即使只有标题内容四个字,这里我们块级标签的宽度默认和body一样宽,默认高度是0,也可以由内容撑开,比如说我们刚才看到的标题内容所占的大小,当我们删除标题内容之后:

<h1></h1>
aaaa

这时候通过检查页面我们可以看到:aaaa所占的范围跟刚才标题内容差不多大,但是要注意刚才标题内容所占用的是h1的区块,这里aaaa使用的是body的区块。当然我们可以通过width和height属性设置宽高

块标签主要是用来网页布局的（大块）

行级标签：

行级标签:只占用自身大小的标签,不会占一整行,例如:<font>、<b>、<i>、<a>等

即使我们对其设置width和height也没有用

对选中的文本和内容进行修饰

行级块标签：

例如<input/>、<img>等

特点是可以设置宽高,不占一行

Display

通过display样式可以修改标签的类型

可选值:

block:设置标签为块标签

inline:设置标签为行级标签

inline-block:设置标签为行级块标签

none:隐藏标签(标签将在页面中完全小时)

-none和令透明度为0.0的区别为:

none是让标签完全消失在网页中,而透明度为0.0只是不显示,但是通过检查的时候来看它实际上还是存在于网页中的

举个例子,我们可以通过display: 在标签中通过display:inlin-block来将其他地方的超链接变为块级标签然后通过设置好的大小.

div

div是块级标签,可以放置任何标签,但是div没有任何附加功能,可以说是提供用来diy的标签,主要作用是用来布局网页

span

span是行级标签,没有任何附加功能,给了什么属性就能变成什么样,span标签被用来选中文档中的文字