CSS样式表嵌入到网页中的几种方法

html-css06

CSS样式表嵌入到网页中的几种方法,第1张

css样式表嵌入网页有以下三种方法:

1,内联样式

内联样式是直接在html标签上定义该标签的css样式,如:

<div

style="width:200pxheight:30px"></div>

2,内部样式

内部样式是写在html文件中,且包含在<style></style>代码块中,如:

<style>

.box{width:200pxheight:30px}

</style>

<div

class="box"></div>

3,外部样式

外部样式是通过在html中引用外部css文件来控制样式,如:

html文件中写入引用语句:

<link

href="css文件路径"

rel="stylesheet"

media="screen"

/>

css主要有三种引用方法:

1,内部引用,在html文档中在<style>标签里面写的css样式

<style>

bdoy{font-size:14px}

</style>

2,外部引用,用<link>标签引用外部的css文件,将样式引用到html文档来。

<link rel="stylesheet" type="text/css" href="style.css">

3,在标签中使用,使用style属性将当前的标签样式改变。

<div style="color:red"></div>

三种方式:

1、第一种行内样式,也就是给标签添加style属性,例子如下

<div style="width:100pxheight:100px"></div>

2、第二种,直接写在html页面中的style标签中,例子如下,

<div class="box"></div>

<style>

    .box{

        width:200px

        font-size:14px

        color:red

    }

</style>

3、第三种,使用外链css样式表,单独保存为css文件,将css样式都写入css文件中,例子如下,

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="index.css">//这个地方写css文件的位置

</head>