第1关：CSS样式引入方式

最新推荐文章于 2024-03-26 10:30:10 发布
最新推荐文章于 2024-03-26 10:30:10 发布
阅读量414 收藏
点赞数 2
分类专栏： 《Java web 程序设计》 文章标签： css tensorflow 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64562382/article/details/134858534
版权

目录

任务描述

相关知识

样式引入方式

内部样式表

外部样式表

内联样式

使用哪一种样式表？

样式的优先级顺序

编程要求

测试说明

任务描述

本关任务：在上个实训中，我们了解了CSS的基础概念。这一关中，我们将要理解CSS继承和多种样式引入方式。  

本关任务完成之后的效果图如下：

为了完成本关任务，请大家认真阅读相关知识。

相关知识

样式引入方式

CSS样式有三种引入方式：

  1. 内部样式表：如同之前实例中所示，在文档头部中引入；

  2. 外部样式表：通过外部文件引入；

  3. 内联样式：直接在特定元素中引入。

下面，我们将为大家一一介绍这三种引入方式。

内部样式表

首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加<style type="text/css"> </style>元素。  

具体举例如下：  

 

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Hello World</title>
  4. <style type="text/css">
  5. /*样式添加在这里*/
  6. </style>
  7. </head>
 

在之前的实例中，为了方便大家同时看到HTML和CSS代码，我们都是使用的这一种方式。
 

外部样式表
 

第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。  
 

 

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Hello World</title>
  4. /* 引入外部的CSS文件 */
  5. <link rel="stylesheet" href="style.css" />
  6. </head>
 

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。  
 

例如，当HTML文件与要引入的CSS文件不在同一文件夹时：
 

 

 

可以如下书写：  
 

 

  1. <link rel="stylesheet" href="CSS/style.css" />
 

在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。
 

内联样式
 

内联样式是指直接在标签内添加样式属性。  
 

举例如下：  
 

 

  1. <p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>
 

显示如下：
 

 

 

通用的书写格式：  
 

 

  1. <tag style="样式表">
  2. <tag style="样式表"></tag>
 

使用哪一种样式表？
 

在实际开发过程中，通常建议使用第二种外联样式表的方式。
 

主要优点如下：
 

  1.  
    内容与样式分离；
     
    易于开发和维护样式。
     
  2.  
    样式易于复用；
     
    可在多个HTML文件中引入相同的样式文件。
     
  3.  
    加载更快。
     
    如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。
     
 

样式的优先级顺序
 

三种样式引入的优先级顺序是：  
 

外部样式< 内部样式 < 内联样式  
 

也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。
 

编程要求
 

选择index.html文件，完成：
 

  •  
    引入外部样式表 style.css， 引入的路径为step2/CSS/style.css；(注意路径中CSS是大写)
     
  •  
    设置 h1 元素内联样式的字体颜色(color)为cornflowerblue；
     
  •  
    修改 samll 元素内联样式：设置字体大小(font-size)为10px; 颜色(color)为lightslategray。
     
 

选择style.css 文件，完成：
 

  • 设置 p 元素的 font-weight 为 粗体(bold)；
 

测试说明
 

在右侧编辑器左上方，点击代码文件，就可以在多个文件直接进行切换。例如，在关卡中含有实例 example.html，你可以点击 example.html 切换到该文件。然后在编辑器中修改任意内容，效果显示便会更新。
 

具体演示如下：
 

 

 

 

试错是一种方法，但没有目的的试错只不过是瞎折腾，只能越试越错；很多人把挣扎当成努力，殊不知努力首先要面对现实，承认弱点。
 

恭喜你完成本关，如果觉得有收获，就在下面点个赞吧！
 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>O Captain! My Captain!</title>
     <!-- ********** BEGIN ********** -->
        
    <link rel="stylesheet" href="step2/CSS/style.css">

     <!-- ********** END ********** -->

    <style type="text/css">
      h1 {
        color:cornflowerblue;
      }

      img {
        float: left;
        margin-right: 1em;
      }
      p {
         font-weight: bold
      }
    </style>
</head>

<body>
    <div>
        <!-- ********** BEGIN ********** -->
        
        <h1 >O Captain! My Captain!</h1>

        <!-- ********** END ********** -->
            
        <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
        <p>O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p >
    
        <!-- ********** BEGIN ********** -->
    
        <p><small style="color:lightslategray; font-size:10px;">&copy; Walt Whitman</small></p >
            
        <!-- ********** END ********** -->
    </div>
</body>

</html>


 

 

                

        

        

        

    




            

                    
            

    

      

        

            

              
                
                  STM32单片机定制
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS从入门到精通——基础知识

				
			

			

				

					Junds0的博客
				

				

					09-05
					
					1532
					
				

			

		

		

			
				
第1关：初识CSS：丰富多彩的网页样式
通过编写CSS给网页添加基本的样式,补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：修改h1标题的text-align为居中显示，字体大小为40px；p段落的颜色为灰色:grey,字体大小为18px。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</t

			
		

	



                

              
                



	

		

			

				
					
CSS第一课 CSS引入方式

				
			

			

				

					chijuejie1415的博客
				

				

					02-26
					
					227
					
				

			

		

		

			
				
CSS第一课 CSS引入方式 
概念：Cascading style sheet 层叠样式表 
html、CSS、JavaScript之间的关系： 
 
  
   
    Html  
    Css  
    JavaScript  
   
   
    结构  
    样式...

			
		

	



                


  
              

                


	

		

			

				
					
CSS样式分类

				
			

			

				

					world_kun的博客
				

				

					11-30
					
					1585
					
				

			

		

		

			
				
1, 内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>

<style type="text/CSS">

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

语法中，style标签一般位于he...

			
		

	





	

		

			

				
					
Web实训-day03：CSS基础

				
			

			

				

					小懒虫的博客
				

				

					06-20
					
					605
					
				

			

		

		

			
				
2. CSS使用方式(3种)
2.1 行内样式
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">大家好</p>
    </body>


			
		

	



		

			
		



	

		

			

				
					
css（一）：css的四种引入方式

				
			

			

				

					白骨梦儿
				

				

					06-13
					
					8547
					
				

			

		

		

			
				
一、css概述

CSS是Cascding Style Sheets 的简称，中文成为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离；

二、css的四种引入方式

css都是以style="键：值；键：值;……"这样引入的，但是方式有四种，主要推荐并常用的是链接式；

另：除了行内式，其它三种方式（嵌入式、链接式、导入式）都是在<head> </head&g...

			
		

	





	

		

			

				
					
CSS学习之一 CSS样式的引入

				
			

			

				

					12-12
				

			

		

		

			
				
HTML中，我们通常使用link元素引入外部样式表，link有以下几个属性：1、rel，代表“关系”（relation），在这里，关系（即rel值）为“stylesheet”；2、type，总是设置为“text/css”，描述了使用link加载的数据类型...

			
		

	





	

		

			

				
					
CSS学习之一 CSS样式引入方法

				
			

			

				

					09-25
				

			

		

		

			
				
本篇文章主要探讨了三种常见的CSS样式引入方法：外部样式表、内部样式表和内联样式。  首先，外部样式表是通过`<link>`标签来引入的，这通常是推荐的最佳实践。`<link>`标签有四个关键属性： 1. `rel`属性定义了链接...

			
		

	





	

		

			

				
					
CSS 样式的使用方式、选择器

				
			

			

				

					12-13
				

			

		

		

			
				
元素中定义css样式  <style>  p{font-size: 20px;color: red} </style> 3、外部样式：在css文件中定义css样式，然后在html的<head>中通过<style>引入外部样式表  p{font-size: 20px;color: ...

			
		

	





	

		

			

				
					
Vue cli 引入第三方JS和CSS的常用方法分享

				
			

			

				

					10-18
				

			

		

		

			
				
在 Vue 组件的 `<script>` 部分，可以这样引入：  ```javascript   <!-- Your component markup here -->    import mui from '../../../static/mui.min.js';  export default {  name: 'YourComponent',  // ... };...

			
		

	





	

		

			

				
					
CSS样式引入方式

				
			

			

				

					qq_45823118的博客
				

				

					03-24
					
					5780
					
				

			

		

		

			
				
CSS样式引入方式任务描述相关知识样式引入方式内部样式表外部样式表内部样式使用哪一种样式表样式的优先级顺序
任务描述
本关任务：在上一关中，我们了解了CSS的基础概念。这一关中，我们将要理解CSS继承和多种样式引入方式。
本关任务完成之后的效果图如下：

相关知识
样式引入方式
CSS样式有三种引入方式：

 内部样式表：如同之前实例中所示，在文档头部中引入；
 外部样式表：通过外部文件引入；
 内联样式：直接在特定元素中引入。

下面，我们将为大家一一介绍这三种引入方式。
内部样式表
首先，对于内部样式表

			
		

	





	

		

			

				
					
CSS的三种引入方式

				
			

			

				

					Marukooo的博客
				

				

					10-19
					
					4035
					
				

			

		

		

			
				
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

			
		

	





	

		

			

				
					
css样式的三种引入方式

				
			

			

				

					m0_67372185的博客
				

				

					03-21
					
					6109
					
				

			

		

		

			
				
第一种：行内式（也称内联）

直接将样式写在标签中，属于权重最高级别例如：





第二种：内部式

在head中写上style标签，将想要的样式写在style中，再通过id或class引用





第三种：外部式

这种也是工作中使用最多的，遇到代码很多的项目时，通常会在外面新建一个css文件，专门储存样式。看代码时会更方便。通过link标签引入，href后面填引入的css文件名








...

			
		

	





	

		

			

				
					
css的三种引入方式

				
			

			

				

					前端开发,HTML5,css3,JavaScript,node.js,vue
				

				

					11-19
					
					5928
					
				

			

		

		

			
				
css的三种引入方式,行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值
内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。
外链式是把css样式写入.css文件内，然后通过link标签链接。

			
		

	





	

		

			

				
					
【Educoder】CSS答案(CSS——基础知识、CSS——基础选择器、CSS——文本与字体样式、CSS——背景样式、CSS——表格样式)

				
			

			

				

					qq_37746855的博客
				

				

					04-14
					
					7670
					
				

			

		

		

			
				
文章目录CSS——基础知识初识CSS：丰富多彩的网页样式CSS样式引入方式index.htmlstyle.cssCSS——基础选择器CSS 元素选择器CSS 类选择器CSS id选择器CSS——文本与字体样式字体颜色、类型与大小字体粗细与风格文本装饰与文本布局CSS——背景样式背景颜色背景图片背景定位与背景关联CSS——表格样式表格边框表格颜色、文字与大小
CSS——基础知识
初识CSS：丰富多彩的网页样式

编程要求
在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其C

			
		

	





	

		

			

				
					
关于CSS的基础知识

				
			

			

				

					m0_68015749的博客
				

				

					02-17
					
					2219
					
				

			

		

		

			
				
关于css的基础知识

			
		

	





	

		

			

				
					
CSS3.0

				
			

			

				

					weixin_44960905的博客
				

				

					03-25
					
					2633
					
				

			

		

		

			
				
CSS3
Cascading Style Sheet  层叠级联样式表
CSS：表现（美化网页）
发展史
CSS1.0
CSS2.0 DIV+CSS，html与css结构分离的思想
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画
快速入门
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
&lt

			
		

	





	

		

			

				
					
网页设计必学：CSS四种样式引入方式及常用样式

					
最新发布

				
			

			

				

					云端源想的博客
				

				

					03-26
					
					1665
					
				

			

		

		

			
				
在Web开发的世界中，CSS（层叠样式表）是构建视觉吸引力和定义网页布局的不可或缺的工具。掌握如何恰当地引入CSS样式以及理解它们的优先级规则，对于前端开发者来说至关重要。今天，我们就来深入探讨CSS的四种引入方式，以及选择器的优先级之谜，了解常用的CSS样式及使用方法！

			
		

	





	

		

			

				
					
【自学CSS笔记第1篇】——CSS引入方式

				
			

			

				

					m0_64231944的博客
				

				

					10-15
					
					431
					
				

			

		

		

			
				
CSS引入方式

			
		

	





	

		

			

				
					
掌握Dreamweaver第8章：CSS样式表详解与应用

				
			

			

				

					
				

			

		

		

			
				
 学生将学习如何通过三种方式打开“新建CSS样式”对话框，并在对话框中填写样式名称、选择器类型等信息，以便创建和应用CSS样式。  通过本章的学习，学生将能够掌握基础的CSS样式表使用方法，学会如何利用CSS进行...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
STM32单片机定制

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值