前端：CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 文本修饰的属性 -->
		<style>
		p{
			/* 设置颜色 */
			color:red;
			/* 设置字体大小*/
			font-size: 20px;
			/* 设置字体样式 */
			font-family: "隶书";
			/* 定义穿过文本的一条线 */
			text-decoration: line-through;
			/* 定义文本下的一条线 */
			text-decoration: underline;
		 	/* 将所有的线删除 */
			text-decoration: none;
			/* 斜体文本*/
			font-style: italic;
			/* 字体粗细*/
			font-weight: 700;
			/* 设置行高  */
			line-height: 30px;
			/* 设置字符间距 */
			letter-spacing: 2px;
			/* 用来设置首行缩进 */
			text-indent: 2em;
			
		}
		</style>
	</head>
	<body>
		<p>床前明月光，疑是地上霜。举头望明月，低头思故乡</p>
	</body>
</html>

运行结果：

五、对背景修饰

background-color 背景颜色

background-image 背景图片

background-repeat 背景重复

background-size 背景尺寸

background- position 背景位置

具体实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p{
			/* 背景颜色 */
			background-color: aqua;
			/* 设置长和宽*/
			height: 500px;
			width: 300px;
			/* 背景图片大小    宽  高   */
			background-size: 200px 200px;
			/* 背景图片*/
			background-image: url(img/libai.jpg);
			/*背景重复设置*/
			background-repeat: no-repeat;
			/* 背景位置设置*/
			background-position: left top;
		}
		</style>
	</head>
	<body>
		<p>
			段落
		</p>
	</body>
</html>

运行结果：

六、对列表进行修饰

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

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

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

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

list-style 简写属性。

具体实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.u1{
				/* list-style-type: none; 列表符号样式
				list-style-image: url(img/img.jpg);  列表的图标
				list-style-position: inside; 图标位置 */
				/* 
				   css简写方式  可以给多个值   不分先后顺序
				 */
				list-style:outside none url(img/img.jpg) ;
				
				text-align: center;
			}
		</style>
	</head>
	<body>
		  <ul class="u1">
			 <li>列表内容</li> 
			 <li>列表内容</li> 
			 <li>列表内容</li> 
			 <li>列表内容</li> 
		  </ul>
		  <ul>
			 <li>列表内容</li> 
			 <li>列表内容</li> 
			 <li>列表内容</li> 
			 <li>列表内容</li> 
		  </ul>
	</body>
</html>

七、CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:hover 伪类表示鼠标移入的状态

:active 表示的是被点击的状态

:focus 向拥有键盘输入焦点的标签添加样式。

具体实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 鼠标移入  */
		a:hover{
			color: #006400;
			font-size: 40px;
		}
		/* 鼠标点击*/
		a:active{
			color: aqua;
		}
		/* 对可以键盘输入的标签聚焦时*/
		input:focus{
			background-color: #006400;
		}
		</style>
	</head>
	<body>
		<a href="">按钮 </a><br/>
		<input type="text" />
		<input type="text" />
	</body>
</html>

八、div和span

div标签

div是块级标签，可以放置任何标签。

div没有任何附加功能，给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

span标签

span是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span标签被用来选中文档中的文字。

九、其他

9.1透明

定义透明度的属性为opacity

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

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

9.2标签分类

9.2.1块级标签

块级标签：无论内容多少都会独自占据一行的。可以设置宽高

例如<p>、<h1>、<ul>、<ol>、<hr/>等。

9.2.2行级标签

行级标签：只占自身大小的标签，不会占一行。例如<font>、<b>、<i>、<a>等。

9.2.3行块级标签

行块级标签：可以设置宽高不占一行例如 <input/> <img>等

9.3 display

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

block ：设置标签为块标签

inline ：设置标签为行级标签

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

none ：隐藏标签（标签将在页面中完全消失）

沁～*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：CSS

CSS是CascadingStyleSheets（级联样式表），是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS放在一个.css文件中或HTML文档的某一部分。
复制链接

扫一扫