css-----层叠样式表

最新推荐文章于 2023-08-02 16:48:42 发布

sunshinegaigai

最新推荐文章于 2023-08-02 16:48:42 发布

阅读量374

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_42578658/article/details/90453099

版权

javaweb 专栏收录该内容

30 篇文章 5 订阅

订阅专栏

内嵌式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <title>使用CSS内嵌式</title>
   <style type="text/css">  /*声明优先加载和解析css代码*/
   /*定义标题标记居中对齐*/ 
   h2{ text-align:center;}   
   /*定义div标记样式色*/
   div{ border: 1px solid red; width: 300px;  height: 80px; color:blue; }       
   </style>
  </head>
  <body>
      <h2>内嵌式CSS样式</h2>
      <div>
 	 使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，
 	 title标记之后。
      </div>
  </body>
</html>

嵌入式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
      <title>使用链入式CSS样式表</title>
      <link href="style.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
   <h2>内嵌式CSS样式</h2>
   <div>
 	使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，
 	title标记之后。
   </div>
 </body>
</html>

css选择器和常用属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>选择器</title>
<style type="text/css">
/* 1.类选择器的定义*/
.red {
	color: red;
}
.green {
	color: green;
}
.font18 {
	font-size: 18px;
}
/* 2.id选择器的定义*/
#bold {
	font-weight: bold;
}
#font24 {
	font-size: 24px;
}
</style>
</head>
<body>
	<!--类选择器的使用-->
	<h1 class="red">标题一：class="red"，设置文字为红色。</h1>
	<p class="green font18">
        段落一: class="green font18",设置文字为绿色，字号为18px。
     </p>
	<p class="red font18">
        段落二: class="red font18",设置文字为红色，字号为18px。
     </p>
	<!--id选择器的使用-->
	<p id="bold">段落1：id="bold"，设置粗体文字。</p>
	<p id="font24">段落2：id="font24"，设置字号为24px。</p>
	<p id="font24">段落3：id="font24"，设置字号为24px。</p>
	<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>
</html>

另有标记选择器：<bodey><h1><a>.通配符选择器：*{}

css常用属性

sunshinegaigai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-----层叠样式表

内嵌式<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>使用CSS内嵌式</title>...
复制链接

扫一扫