CSS笔记（二）

最新推荐文章于 2024-08-12 15:57:18 发布

lalalalacheno

最新推荐文章于 2024-08-12 15:57:18 发布

阅读量224

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/baidu_29474379/article/details/86604861

版权

本文详细介绍了CSS样式表的三种写法及其特点，包括内嵌式、外链式和行内样式表，并探讨了块元素、行内元素和行内块元素的显示方式及特点。此外，还讲解了CSS的三大特性——层叠性、继承性和优先级，以及链接伪类、文本修饰和背景属性的使用方法。

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

样式表书写位置

内嵌式写法

<head>

样式表写法

</style>

</head>

外链式写法

写在head里，<link rel=”stylesheet” href=”1.css”>

	<!-- 外链式写法-->
	<link rel="stylesheet" type="text/css" href="CSS练习.css">

行内样式表

	<!-- 行内样式表-->
	<div class="box" style="font-size: 30px;color: red;">
		<p><span>啦啦啦啊</span></p>
	</div>

◆三种写法特点:

★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。

★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。

★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）

标签分类(显示方式)

块元素

典型代表,Div,h1-h6,p,ul,li

特点: ★独占一行

★可以设置宽高

★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

行内元素

典型代表 span ,a, ,strong , em, del, ins

特点：★在一行上显示

★不能直接设置宽高

★元素的宽和高就是内容撑开的宽高。

行内块元素(内联元素)

典型代表 input img

特点：★在一行上显示

★可以设置宽高

块元素、行内元素

块元素转行内元素

display:inline;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*块元素转换为行内元素*/
		div,p{
			display: inline;
		}
	</style>

</head>
<body>
	<div>啦啦啦呕</div>
	<p>哈哈哈哈哈啊</p>
	<span>哈哈哈哈哈哇</span>
</