HTML引入CSS样式的三种方式

1.内联定义方式:

  在标签内部使用style属性来设置元素的css样式

  语法格式:

1 <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;....." 2 </标签> 

2.样式块方式:

  在head标签中使用style块

  语法格式:

 1 <head>
 2     <style type="text/css">
 3           选择器{
 4              样式名 : 样式值;
 5              样式名 : 样式值;
 6           }
 7           选择器{
 8              样式名 : 样式值;
 9              样式名 : 样式值;
10           }
11 
12     </style>
13 
14 </head>        

id选择器:(作用于1个)

可以设置整个网页中的某个元素,不能重用

eg. 此时id=user

#user(任意){

  font-size : 24px;

  color : red;

}

标签选择器:(作用于多个)

该网页中此标签都用这个样式,范围比id选择器广

div {

  font-size : 24px;

  color : red;

}

类选择器:

.类名{

  ...

}

.myclass{

  .../*

    只要元素class属性的类名相同,可以认为属于一类标签

  /*

}

3.链入外部样式表文件(最常用)

  将样式写到一个独立的xxx.css文件中,在需要的网页中直接引入css文件,样式也随之引入

优点:易维护

  语法格式:

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

posted @ 2023-03-23 21:36  hangsingplus  Views(192)  Comments(0Edit  收藏  举报