css块元素内联元素选择器

最新推荐文章于 2023-12-12 23:48:03 发布

夏目松松

最新推荐文章于 2023-12-12 23:48:03 发布

阅读量1.3k

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_43129582/article/details/105541971

版权

本文介绍了CSS（层叠样式表）的基础知识，包括其用于美化网页的作用。内容涵盖三种设置CSS样式的常见方法：内联样式、内部样式表和外部CSS文件的使用。重点讨论了CSS选择器的概念，它是控制网页元素样式的关键工具。

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

css：层叠样式表（网页是一层一层的）
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰

三种编辑css方式：内联样式、（内部样式表）css选择器、外部css文件(link标签来引入)

1、css的选择器

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>css</title>
 <!-- 可以将css样式编写到head中style标签这种
   通过css选择器选中指定的元素，可以同时为这些元素一起设置样式
   将样式表编写到style标签中，也可以使用表现和结构进一步分离它
 -->
 <style type="text/css">
  /* css的注释，作用和html注释类似，必须编写在css文件中或者style标签中
   
   css的语法：
    选择器 声明块
	
	
	选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
    
	声明块：声明块紧跟在选择器的后边，使用一对{}括起来
		声明块中实际上就是一组一组的名值对结构
		这一组一组的名值对我们称为声明
		在一个声明块中可以写多个声明，多个声明之间使用；分号隔开
		声明样式名和样式值之间使用：冒号来连接
  
  块元素和内联元素：
    块元素：div块元素：会独占一行，主要用于对页面进行布局
	p h1 h2 h3....都是块元素
	
	内联元素：span是一个内联元素，它只会占自身大小，不会占用整行大小
	常见的内联元素：a img frame span ...
	span没有任何的语义，选中文字，为文字设置样式
	<span>哈哈哈哈哈</span>
	块元素的作用：主要用来做页面的布局
	内联元素的作用:主要用来选中文本设置样式
	 一般情况 下子使用块元素去包含内联元素
	 <!-- a元素可以包含任意元素，除a本身 -->
	<!-- p元素不可以包含任何其他的块元素。 -->
	
 
  */
 
 <!-- 在这只能写css -->
	<!-- css选择器-->
	p{color:red;}
 
 </style>
 
 <!-- 还可以将样式表缩写到外部css文件中，
 通过link标签来讲外部css文件style.css引入到当前页面中
 讲css样式统一编写到外部的样式中，完全是结构和表现分离，可以使样式表可以在不同的页面下使用
 最大限度的是样式可进行复用，可以利用浏览器的缓存加快用户访问的速度，提高了缓存速度
 -->
 <link rel="stylesheet" type="text/css" href="style.css"/> 
 
 
</head>
<body>
<!--可以将css样式编写到元素的style属性中 样式后用分号结尾
将样式直接编写在style属性中 这种样式我们称为内联样式，
内联样式只对当前元素中的内容起作用 
 -->
<p style="color:red;font-size:20px">锄禾日当午</p> <!--内联样式-->
<p>汗滴禾下土</p> <!--无内联样式-->

</body>


</html>