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 style html

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>

Copy after login

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>

Copy after login

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>

Copy after login

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;}

Copy after login

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>

Copy after login

Thank you for reading. Have you learned it?

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