CSS内联样式与外联样式

第一种内联样式

通过HTML元素的style属性来设置CSS样式,语法如下:

style="css属性:css属性值;"

示例代码:

DOCTYPE html>
<html>
  <head>
    <title>01_第一种使用方式.htmltitle>
  head>
  <body>
    
	<div style="color:red;" >atguigudiv>
  body>
html>

第二种内联样式

通过HTML页面的style元素来设置CSS样式,语法如下:

<style type="text/css">
	选择器 {
		属性名 : 属性值;
	}
style>

示例代码:

DOCTYPE html>
<html>
  <head>
    <title>02_第二种使用方式.htmltitle>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<style type="text/css">
		div {
			color : red;
		}
	style>
  head>
  <body>
    <div>atguigudiv>
  body>
html>

外联样式

通过HTML页面的link元素来引入外部CSS样式,语法如下:

<link href="css文件路径" rel="stylesheet" type="text/css" />

示例代码:

DOCTYPE html>
<html>
  <head>
    <title>04_第四种使用方式.htmltitle>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<link href="div.css" rel="stylesheet" type="text/css" />
  head>
  <body>
    <div>atguigudiv>
  body>
html>
html>

你可能感兴趣的:(CSS,前端开发,css,前端)