The three major styles of CSS

Others 2023-07-01 04:31:39 views: null

css style

Inline

  • Also known as: inline style, inline style, embedded style
<!-- style作为属性直接写在标签后面, style属性可以包含任何 CSS属性 -->
<div style="font-size: 40px; color: #FF0000;">我是div</div>
<div style="font-size: 40px; color: blue;">我是div2号</div>
<p style="font-size: 40px; color: orange;">我是段落</p>
  • Use inline styles when styles need to be applied only once on an element
  • shortcoming
    • The performance and content are mixed together, and the structural style is not separated, which is not conducive to later maintenance
    • Styles cannot be reused (not recommended)

Internal

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部样式表</title>
		<!-- 2、在head中间创建一个style标签 -->
		<style type="text/css">
			/* 3、在style标签中，就可以直接书写css代码，进行修饰 */
			p {
      
      
				color: red;
				font-size: 30px;
				/* 
                	在书写css的时候，如果没有特殊规定，
                    数值必须带单位(html不必)，px:像素 
                */
			}
			div{
      
      
				color: blue;
				font-size: 80px;
			}
		</style>
	</head>
	<body>
		<!-- 1、先创建想要修饰的对象 -->
		<div>CSS基础学习</div>
		<p>我是段落</p>
	</body>
</html>
  • Internal style sheets are used when individual documents require specific styling
    • Suitable for case, short page development
  • <style>Define an internal style sheet in the head of the document using the tag
  • <style>The label can be placed anywhere, not necessarily <head>inside. The reason why it is placed <head>in it is to let the browser load CSS first when loading, so that the browser will know who wants to modify what style, and after loading it into html, it can directly give the style to the relevant object.
  • Advantages: Separation of structural styles, easy maintenance
  • Disadvantages: CSS styles can only be used in one page

External formula

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式表</title>
		<!-- 3、利用<link>标签或者import引入css文件 -->
		<!-- css外部引入方式1(推荐使用) -->
		<!-- 
			rel: relationship; 
				rel属性是必须的, 规定当前文档与被链接文档/资源之间的关系
			stylesheet:样式表
		-->
		<link rel="stylesheet" type="text/css" href="外部样式.css" /> 
		<!-- link的另一种用法，链接标题<title>前面的小图标 -->
		<link rel="icon" href="images/icon.jpg" />
        
		<!-- css外部引入方式2 -->
		<style type="text/css">
			@import url("demo.css"); /* @import：导入，引入； */
		</style>
	</head>
	<body>
		<!-- 1、先创建想要修饰的对象 -->
		<div>CSS基础学习外部样式</div>
		<div>CSS基础学习外部样式</div>
		<p>我是段落</p>
		<p>我是段落</p>
		<!-- 2、新建一个css文件 -->
	</body>
</html>
  • External style sheets are ideal when styles need to be applied to many pages
    • Suitable for whole site development and relatively long page development
  • In the case of external style sheets, you can change the look of the entire site by changing one file. Each page uses <link>the tag to link to the style sheet. The browser will read the style declaration from the CSS file and format the document according to it.
  • advantage
    • Separation of structured styles, easy maintenance
    • Style reuse, can be used on multiple pages
  • <link>importThe difference between
    • In essence, <link>it is an HTML label, but importa way provided by CSS
    • load order
      • <link>When the page (the content inside the body) is loaded (that is, when it is browsed by the viewer), the <link>imported CSS will be loaded at the same time
      • importThe imported CSS will wait for the page to load before loading. If this loading method is used, there will be a flickering effect when the network speed is relatively slow, which will affect the user experience.
    • difference in compatibility
      • @importIt is provided by CSS2.1, so old browsers do not support it, @importonly IE5 and above can recognize it
      • <link>Labels don't have this problem
    • use DOM
      • When using JavaScript to control the DOM to change the style, you can only use <link>the tag
      • Because @importit is not controlled by the DOM

multiple style priority

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多重样式优先级</title>
		<link rel="stylesheet" type="text/css" href="demo.css"/>
		<style type="text/css">
			div{
      
      
				color: blue;
			}
			p{
      
      
				color: blue;
			}
		</style>  
		<!--
			demo.css里面p标签设置的是红色
			这里<style>距离<p>标签比<link>近，所以显示的是蓝色字体
		-->
	</head>
	<body>
		<div style="font-size: 50px; color: orange;">
			解析规则第一条测试
		</div>
		<p>
			解析规则第二条测试：外部和内部样式表同时使用
		</p>
	</body>
</html>
  • multiple style priority
    • When using internal, external, and inline style sheets to modify the same tag at the same time, the inline style sheet has the highest priority, that is, the displayed result is an inline style
    • When external and internal style sheets are used at the same time, which css style is closest to the label will eventually display which style

insert image description here

Guess you like

Origin blog.csdn.net/weixin_43417844/article/details/122396018
Recommended
Ranking
PAT Level B 1094 Google's Recruitment (20 points) Python
Old Wei wins the offer to take you to learn --- brush (integer number 31. 1 appears) title series
Bilibili: Barrage Screening: Baijiaxing: Import XML directly
개체 배열 중복 제거
matplotlib—patches.Circle
[Observation] It is also a cordless vacuum cleaner, why does Dyson V10 dare to sell 4990 yuan?
0410
Apache Kafka message delivery reliability analysis
How hotel occupancy records inquiry etj
Essential knowledge for getting started with speculating in spot silver
Daily
More
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

Code World

© 2018 codetd.com