HTML中CSS的引入

css引入

  1. 行内样式
    在标签中添加 style属性,

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式表的引入title>
head>
<body>
	<div style="width: 100px;height: 100px;background-color: blue;">div>	
body>
html>
  1. 内部样式

    
    	
    
    
	<style>
	 /*标签选择器*/
	 div{
	 	width: 200px;
	 	height: 200px;
	 	background-color: pink;
	 }
style>
  1. 外部样式表
    新建.css文件

    方式1:
    	
    
    
    方式2:
    	
    
    
	<head>
	<meta charset="UTF-8">
	<title>样式表的引入title>
	
	<link rel="stylesheet" type="text/css" href="index.css">
	head>
<head>
	<meta charset="UTF-8">
	<title>样式表的引入title>
	
	<style>
		@import'index.css'
	style>
head>

index.css

div{
	width: 200px;
	height: 200px;
	background-color: coral;
}

区别:
link 属于html中标签,语法
在加载页面的时候,就会同时加载css样式表
@import 属于css语法范围
页面加载完成之后,才会加载css样式表

你可能感兴趣的:(html+css,html)