CSS的简单使用

最新推荐文章于 2022-08-17 20:31:22 发布
最新推荐文章于 2022-08-17 20:31:22 发布
阅读量178 收藏
点赞数
分类专栏： 培训笔记 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42712280/article/details/107482853
版权

添加的两种方式：

  1. 在HTML文档中直接定义
  2. 存为一个文件名是*.css
<HTML>
<HEAD>
<TITLE>CSS DEMO - 使用CSS 使用元素选择器</TITLE>
	<style>
		<!--
			h3 {
				font-family:Arial;
				font-style:italic;
				color:green;
			  }
			  h2{color:red}
                          p{color:red}
		-->
	</style>
	
</HEAD>
<BODY>
	<h3>This is a green,italic,Arial H3 header.</h3>
	<h2>This is another green,italic,Arial H3 header.</h3>
	  <P>
	  	这是正文 这是正文 这是正文
	  </P>
</BODY>
</HTML>
-----------------------------------------------
<html>
	<head>
		<title>id选择器示例</title>
		<style type="text/css">
      #myID {text-decoration:underline}
		</style>
	<head>
	<body>
	  <h3 id="myID">这是一个标题</h3>
	  <P>
	  	这是正文 这是正文 这是正文 
	  </P>
	  <P id="myID">
	  	这是正文 这是正文 这是正文
	  </P>
  </body>
<html>
-------------------------------------------------
<html>
	<head>
		<title>class选择器示例</title>
		<style type="text/css">
      .myID {text-decoration:underline}
      #myID {text-decoration:line-through}
		</style>
	<head>
	<body>
	  <h3 class="myID">这是一个标题</h3>
	  <P id="myID">
	  	这是正文 这是正文 
	  </P>
	  <P class="myID">
	  	这是正文 这是正文
	  </P>
  </body>
<html>
-----------------------------------------------
<html>
	<head>
		<title>后代选择器示例</title>
		<style type="text/css">
      <!--表示li标签中的b标签的格式-->
      li b{text-decoration:underline}
		</style>
	<head>
	<body>
		这是li外面<b>下划线</b>
	  <li>这是li里面<b>下划线</b></li>	  
  </body>
<html>

在head中的两种引用.ss文件的方法
<HTML>
<HEAD>
<TITLE>CSS 演示</TITLE>
	<link rel=stylesheet href="globalstyle.css" type="text/css">   
	<!--
	<style type="text/css">		
		@import url("globalstyle.css")
	</style>
	-->
</HEAD>


<BODY>
	<H1>Headline is blue</H1>

	<P style="color:green;font-size:72;">While the paragraph is green.
	</P>
	<a href="">hhh</a>

</BODY>
</HTML>
-----------------------------------------
globalstyle.css:
H1{color:blue}
		a:link {cursor:wait;text-decoration:none ;color:blue}
                a:hover {cursor:wait;text-decoration:underline;color:#C6EF4A}
                a:visited {cursor:wait;text-decoration:none;color:#F253F0}
                a:active {cursor:wait;text-decoration:none;color:#F253F0 }

设置背景颜色，字体颜色，背景图片

<HTML>
<HEAD>
	<TITLE>字体、背景颜色使用</TITLE>
		
		<style type="text/css">
		<!--
                        .bkcolor{background-color: #CCEFCC} 
			.greentext {color: green}
			.redtext {color: #FF0000}
			.bluetext {color: rgb(0,0,255)}
		-->	
		</style>
</HEAD>
<BODY>
	<p class="greentext">绿色文本</p>
	<p class="redtext">红色文本</p>
	<p class="bluetext">蓝色文本</p>
        <p class="bkcolor">绿色背景</p>
	aaa
</BODY>
</HTML>
------------------------------------------
<HTML>
<HEAD>
	<TITLE>利用CSS实现的网页背景图片</TITLE>
	<style type="text/css">
		<!--
			.bg-image{ background-image: url('1.gif') }
		-->
	</style>
</HEAD>
<BODY >
	<H1 class="bg-image" style="color:blue">
          CSS可以为没有背景属性的标记加上背景图        </H1>
</BODY>
</HTML>
---------------------------------------------
滤镜：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS滤镜特效</title>
<style type="text/css">
<!--
.wave {
	filter: Wave(Add=0, Freq=6, LightStrength=20, Phase=15, Strength=8);
}
-->
</style>
<style type="text/css">
<!--
.Xray {
	filter: Xray;
	;
}
.Shadow {
	filter: Shadow(Color=#666666, Direction=135);
}
-->
</style>
<style type="text/css">
<!--
.Gray {
	filter: Gray;
}
.Invert {
	filter: Invert;
}
.Chroma {
	filter: Chroma(Color=#0000FF);
}
.DropShadow {
	filter: DropShadow(Color=#cccccc, OffX=10, OffY=10, Positive=1);
}
.FlipH {
	filter: FlipH;
}
.FlipV {
	filter: FlipV;
}
.Alpha {
	filter: Alpha(Opacity=100, FinishOpacity=0, Style=2);
}
.Blur {
	filter: Blur(Add=0, Direction=1, Strength=8);
}
-->
</style>
</head>

<body>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr align="center"> 
    <td><img src="lion.jpg" width="160" height="194"></td>
    <td><img src="lion.jpg" width="160" height="194" class="Alpha"></td>
    <td><img src="lion.jpg" width="160" height="194" class="Blur"></td>
  </tr>
  <tr align="center"> 
    <td>原图</td>
    <td>Alpha滤镜</td>
    <td>Blur滤镜</td>
  </tr>
</table>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr align="center"> 
    <td><img src="bigcat1.gif" width="200" height="257" class="Chroma"></td>
    <td>
    <img src="bigcat.gif" width="200" height="257" class="DropShadow"></td>
  </tr>
  <tr align="center"> 
    <td>Chroma滤镜</td>
    <td>DropShadow滤镜</td>
  </tr>
  <tr align="center"> 
    <td><img src="bigcat.gif" width="200" height="257" class="FlipH"></td>
    <td><img src="bigcat.gif" width="200" height="257" class="FlipV"></td>
  </tr>
  <tr align="center"> 
    <td>FlipH滤镜<br> </td>
    <td>FlipV滤镜</td>
  </tr>
</table>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr align="center"> 
    <td><img src="cat.jpg" width="150" height="161"></td>
    <td><img src="cat.jpg" width="150" height="161" class="gray"></td>
    <td><img src="cat.jpg" width="150" height="161" class="invert"></td>
  </tr>
  <tr align="center"> 
    <td>原图</td>
    <td>Gray滤镜</td>
    <td>Invert滤镜</td>
  </tr>
</table>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2" class="shadow">
  <tr align="center"> 
    <td><img src="pig.jpg" width="150" height="166" class="shadow"></td>
    <td><img src="pig.jpg" width="150" height="166" class="wave"></td>
    <td><img src="pig.jpg" width="150" height="166" class="Xray"></td>
  </tr>
  <tr align="center"> 
    <td>Shadow滤镜</td>
    <td>Wave滤镜</td>
    <td>Xray滤镜</td>
  </tr>
</table>
</body>
</html>

CSS鼠标形状：

<HTML>
<HEAD>
	<TITLE>鼠标形状演示</TITLE>
	<style type="text/css">
		<!--
			.hand{cursor:hand;}			/*手形*/
			.crosshair{cursor:crosshair;}	        /*精确定位“+”字*/
			.move{cursor:move;}			/*移动*/
			.e-resize{cursor:e-resize;}		/*箭头朝右方*/
			.ne-resize{cursor:ne-resize;}	        /*箭头朝右上方*/
			.nw-resize{cursor:nw-resize;}	        /*箭头朝左上方*/
			.n-resize{cursor:n-resize;}		/*箭头朝上方*/
			.se-resize{cursor:se-resize;}	        /*箭头朝右下方*/
			.s-resize{cursor:s-resize;}		/*箭头朝下方*/
			.w-resize{cursor:w-resize;}		/*箭头朝左方*/
			.text{cursor:text;}			/*“I”字型*/
			.wait{cursor:wait;}			/*等待*/
			.help{cursor:help;}			/*帮助*/
		-->
	</style>
</HEAD>
<BODY>
	<p class="hand">Give me a hand!（手形）</p>
	<p class="crosshair">Give me a crosshair（精确定位）!</p>
	<p class="move">Give me a Move（移动）!</p>
	<p class="e-resize">Give me a e-resize(箭头方向朝右)!</p>
	<p class="ne-resize">Give me a ne-resize(箭头方向朝右上)!</p>
	<p class="nw-resize">Give me a nw-resize(箭头方向朝左上)!</p>
	<p class="n-resize">Give me a n-resize(上)!</p>
	<p class="se-resize">Give me a se-resize(右下)!</p>
	<p class="s-resize">Give me a s-resize(下)!</p>
	<p class="w-resize">Give me a w-resize(左)!</p>
	<p class="text">Give me a text(文本)!</p>
	<p class="wait">Give me a wait(等待)!</p>
	<p class="help">Give me a help(帮助)!</p>
</BODY>
</HTML>

作业：

<html>
<head>
<title>CSS的演示</title>
<style type="text/css">

body {font-size: 12px;color: #FF00FF;}
a:link {font-size: 12px;color: #000000;text-decoration: underline;}
a:visited {font-size: 12px;font-weight: bold;color: #FF00FF;text-decoration: line-through;}
a:hover {font-size: 12px;font-weight: bold;color: #009900;text-decoration: overline;}
a:active {font-size: 12px;font-weight: bolder;color: #FF3300;text-decoration: line-through;}
.aaa {font-size: 24px;color: #FF0000;text-decoration: underline;}

</style>
</head>
<body>
<p class="aaa">百纳欢迎您的到来！</p>
<p>今天的投入，明天的回报！</p>
<p><a href="0917.htm">百纳欢迎您的到来！</a></p>
<p>今天的投入，明天的回报！</p>
<p>百纳欢迎您的到来！</p>
<p>今天的投入，明天的回报！</p>
<EMBED src=kissbye.mid width=145 height=60 autostart=True loop=True></EMBDE>
<video controls loop height=600px width=600px>
<source src="案例视频.mp4">
</video>
</body>
</html>

 

虚心求教的少年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS简单使用
dawuafang
05-15 115
CSS简单使用 标签 ： 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能. CSS与HTML结合 CSS与HTML结合的方式有四种: style属性: 在每个HTML标签...
CSS的简单用法
橘子女侠
11-06 481
css（层叠样式表）是一种格式化网页的标准方式，用于设置网页的样式，定义了如何显示HTML元素。 css的简单用法： 1. 基本语法： 选择器{属性：属性值；属性：属性值；.......},其中选择器可以是标签，类名，ID名。 2. css的样式表： 2.1 内链样式表： &lt;body style="background-color:green;margin:0;"&gt;&lt;...
CSS的简单用法（上）
retreatweb的博客
02-12 482
CSS的作用和发展 什么是CSS CSS 指层叠样式表 (Cascading Style Sheets)，是一种专门描述结构文档的表现方式的文档，包括字体大小、颜色、以及元素的精确定位等等。CSS可以让传统的web页面更具表现力。 CSS相比传统的HTMLD的优势 表达效果丰富 文档体积小 便于信息检索 可读性好CSS的基本使用 1、CSS的引入方式 CSS可以控制HTML的表现形式，
css的简单使用
Study
07-16 207
css css是什么？ CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条...
Bootstrap CSS使用方法
08-31
Bootstrap的特点包括简单灵活的使用方式、友好的学习曲线、优秀的浏览器兼容性、响应式设计以及全面的文档支持。 2. **HTML5和CSS3支持**： Bootstrap 为了兼容旧版的Internet Explorer浏览器（如IE6、7、8），...
使用CSS脉动星球效果
最新发布
12-19
使用CSS脉动星球效果，CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）...样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。
使用css绘制的iphoneX界面
06-05
在这个案例中，它会定义一个简单的布局，包括头部、主体和脚部，这些元素将通过CSS进行美化。开发者可能使用了`<div>`元素来模拟iPhone X的屏幕框架，然后用更多的HTML元素来表示状态栏、屏幕内容区域以及虚拟Home键...
简单CSS博客网页模板
01-14
【简单CSS博客网页模板】是一种基于CSS（层叠样式表）技术设计的网页布局模板，主要特点是简洁明了，适用于创建个人博客或者小型网站。在网页设计中，CSS起着至关重要的作用，它负责控制页面的外观和布局，包括字体...
css样式的简单使用
小木头的博客
01-19 608
####4.初识CSS####   ##4.1##     4.1.1CSS的基本语法结构     行内样式，在html标签中直接使用style属性设置css样式 内部样式表，把css代码写在head的style标签中 h3{ color: #090; } p{ font-size: 16px; color: red;
css的使用方法
tjy1214的博客
07-27 1290
  &lt;link rel="stylesheet" href="../../css/first.css"&gt; &lt;!--引入css文件，相当于把所有的css复制到当前位置--&gt; 行内样式： 缺点：1.内容和样式没有分离。            2.样式没有复用性，仅作用于当前一个样式 优点：1.写法简单，适用范围广            2.优先级高 内部样式： ...
CSS的使用方法
iteye_9815的博客
12-03 116
我们为网页添加样式表的方法有四种。 1．最简单的方法是直接添加在HTML的标识符（tag）里： < Tag style=”properties”>网页内容< /tag> 举个例子： < p style=”color: blue; font-size: 10pt”>CSS实例< /p> 代码说明： 用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直...
css 简单概念与使用方法
一个随缘学习的猿
01-31 2322
CSS : 层叠样式表(英文全称:Cascading Style Sheets）。看完本篇文章，你就大概了解了css 1. 简介：是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用 标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网...
8个简单和实用的CSS技巧
wangfengmadking的专栏
04-05 118
最好的解决方案往往是最简单的，这里列出8个CSS技巧，非常简单，简单到只需要写一行代码，只需要定义一个属性参数。非常适合学习CSS的新手朋友阅读。 1. 使用line-height来达到垂直居中 line-height:24px; 当你有一个固定高度的内容块，你可以通过把line-height和内容块的高度设为相同的数值而达到文本的垂直居中。这里有一个演示. 2. 使用ove...
CSS的三种使用方法
o_jj_o的博客
01-03 1113
属性(css样式) 写法 属性名称=属性值 （1）行间样式：（它只对当前的这个标签起作用） 写在标签的style属性里面 &lt;div style="width: 100px;height: 100px;background: green"&gt;&lt;/div&gt; （2）内嵌式 &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
【CSS学习笔记】持续更新中~
m0_46442631的博客
08-17 191
CSS学习笔记
更改表格行tr的背景颜色
weixin_45190226的博客
02-22 7420
一.业务代码说明： 制作一张商品信息表格，要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化，当鼠标移开其背景颜色就会恢复为白色。 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change table row backGroundColor</title> <style>
点击tr改变颜色，其他tr不变色
weixin_43411148的博客
01-14 513
 &lt;script type="text/javascript"&gt;     $(".tr").on("click",function(){         var tr=document.getElementsByClassName("tr");         $(tr).each(function(){             $(this).css("background-colo...
css如何使用
05-31
以下是一个简单的 CSS 代码示例，它会将页面中所有段落的文本颜色设置为红色： ```css p { color: red; } ``` 在这个例子中，`p` 是选择器，用于选择页面中所有的段落元素。`color` 是属性，用于设置文本颜色的值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值