HTML中嵌入css的三种方式

来源：互联网发布：最优化方法答案编辑：程序博客网时间：2024/05/22 01:15

首先需要明确以下几个问题：

1 什么是css？
Cascadeing style sheet
层叠样式表
不属于编程语言
2 css作用是什么？
css是html的化妆品，可以让html变得更漂亮
专门用来修饰html的
3 css在哪里编写？
css代码专门嵌入的html代码中的
没有html代码，css没有作用
4 当前我们学习的是css2版本，css3将成为主流。
【css+html5可以完成很多特效】

不多说，先来看第一中方式的代码

<html> <head>  <title>在HTML中嵌入css的第一种方式：内联定义方式</title> </head> <body>  <!--    在html中大部分标签都有style属性，在该属性中设置css的样式  --> <!--   使用style属性来设置超链接标签的样式，让其有下划线，有鼠标悬停效果手型 --> <!--   语法格式：<标签 style="样式名：样式值；样式名：样式值；样式名：样式值；"></标签> ---> <a style="text-decoration:underline;color:red;cursor:pointer;">百度</a> <!--    style="cursor:hand; 在IE浏览器中管用，在FF中无效cursor：pointer;表现更好的，兼容性更强" --> </body></html>

第二种方式：

<html> <head>  <title>在HTML中嵌入css的第二种方式：定义内部样式块对象</title>  <!--   在head标签中使用style标签，在style标签中编写css样式  -->     <style type="text/css">  /*    这是css注释  */  /*     标签选择器定义样式  */  a{     cursor:pointer; color:blue; text-decoration:underline;  }  /*   id选择器  */   #sina{     cursor:pointer; color:red; text-decoration:underline;  }   #guge{     cursor:pointer; color:green; text-decoration:underline;  }  .myclass{ cursor:pointer; color:yellow; text-decoration:underline;     }  /*   类选择器，样式作用于一类  */  </style> </head> <body>    <a class=myclass>百度</a><a id="guge">搜狐</a><a class=myclass>邮箱</a><a id="sina">新浪</a><a class=myclass>腾讯</a><a class="myclass">暴风</a> </body></html>

第三种方式：

<html> <head>  <title>在HTML中嵌入css的第三种方式：嵌入外部样式表文件</title>  <link rel="stylesheet" href="1.css" type="text/css"/>  </style> </head> <body>    <ul>  <li>中国</li>  <li>美国</li>  <li>英国</li>  <li>得国</li></ul><div id=mydiv>   我是一个div图层，我是一个独立的单元</div><div id=mydiv2>   我是一个div图层，我是一个独立的单元</div> </body></html>

1 0