Learn the three link methods of CSS in Html in one minute-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Learn the three link methods of CSS in Html in one minute

烟雨青岚

Jul 06, 2020 pm 01:17 PM

css stylehtml

Learn the three link methods of CSS in Html in one minute

There are three linking methods in CSS in html. Do you know which ones they are? The three linking methods of CSS text are inline definition, linking into internal CSS, and linking into external CSS. Let’s take a look at them below.

There are three ways to link css text: inline definition, linking into internal css, and linking into external css

1. The code is:

<html>
	<head>
		<title>内联定义</title>
	</head>
	<body>
		<p style="border:2px solid #000000">内联定义</p>
		<p style="color:red">内联定义</p>
		<p style="font-size:12px">内联定义</p>
	</body></html>

2. The code is:

<html>
	<head>
		<title>链入内部css</title>
		<style type="text/css">
			#myid
			{
				width:200px;
				height:300px;
				color:red;
			}
			.myclass
			{
				width:200px;
				height:300px;
				color:red;
			}
		</style>
	</head>
	<body>
		<p id="myid">链入内部css</p>
		<p class="myclass">链入内部css</p>
		
	</body></html>

3. The code is:

<html>
	<head>
		<title>链入外部css</title>
		<link type="text/css" rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<p id="p1">链入外部css</p>
		<p id="p2">链入外部css</p>
		<p class="p3">链入外部css</p>
	</body></html>

code 3's style.css is in the same folder as your html file.

The code is :

#p1{
	border:2px;
	color:red;}
 #p2{
	border:2px;
	color:blue;}
 .p3{
	border:2px;
	color:red;}

In the css,
id must be preceded by a

Add a .

in front of #class. Supplement:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>外联式css样式03</title>
    <!-- 引入外部的css样式表
        引入css样式表有两种方式:(面试)
        1.link标签引入  推荐使用
        2.@import引入
    -->
    <!-- 
        link标签引入,该标签写在head标签里(与文档配置有关,不需显示)
    -->
      <link rel="stylesheet" href="style.css">
    <!-- 
        @import引入,需要写在style标签里
    -->
    <style typle="text/css">
        @import url(style.css)
    </style>
    <!-- link与import的区别:
        1.link是html语法,import是css语法.
        2.link是在html文档加载时同时开始加载对应的css文件:@import是在html文档加载完成后才开始加载对应的css文件.
        3.link可以引入任何类型的文件,而import只能引入css文件.
        4.使用link方式引入的css样式我们在后期可以使用js的方式进行修改,但是import不可以.

        我们以后使用link

        当一个网站有多个文档时,建议使用外联式.

     --></head><body>
    <p>lalala</p></body></html>

Thank you for reading. Have you learned it?

This article is reproduced from: https://blog.csdn.net/weixin_43670802/article/details/94174581

Recommended tutorial: "HTML Tutorial"

The above is the detailed content of Learn the three link methods of CSS in Html in one minute. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

See all articles