HTML中嵌入css的三种方式

最新推荐文章于 2024-06-16 23:58:06 发布

繁华落叶草

最新推荐文章于 2024-06-16 23:58:06 发布

阅读量3.3k

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/wht18720080085/article/details/69787911

版权

JavaWeb 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

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
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML中嵌入css的三种方式

首先需要明确以下几个问题：1 什么是css？ Cascadeing style sheet 层叠样式表不属于编程语言2 css作用是什么？ css是html的化妆品，可以让html变得更漂亮专门用来修饰html的3 css在哪里编写？ css代码专门嵌入的html代码中的没有html代码，css没有作用4 当前我们学习的是css2
复制链接

扫一扫

专栏目录