HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="Untitled-练习.css" rel="stylesheet" type="text/css" />

</head>

<body>

<center>

<div style="background-color:#F0C"></div>

</center><br />

<a href="http://www.cnblogs.com/" target="_blank">博客园</a>

<br />

<p></p>

<p></p>

<div class="aa" id="a1">H</div>

<div class="aa" id="a2">E</div>

<div class="aa" id="a3"><p>L</p></div>

<div class="aa" id="a4">L</div>

<div class="aa" id="a5">O</div>

</body>

</html>

CSS

@charset "utf-8";

/* CSS Document */

p/*针对于所有段落，即p标签*/

{

    font-size:36px;/*针对于字体大小*/

    color:#00F;/*针对于字体颜色*/

    background-color:#6F0;}/*针对于背景颜色*/

a/*针对于所有的a标签设置字体大小*/

{

    font-size:24px}

a:link/*访问之前的样式*/

{

    text-decoration:none;/*没有下划线*/

    color:#;}/*字体为黑色*/

a:visited/*访问过后的样式*/

{

    text-decoration:none;/*没有下划线*/

    color:#;}/*字体为黑色*/

a:hover/*鼠标悬浮时的样式*/

{

    text-decoration:underline;/*有下划线*/

    color:#F00;}/*字体为红色*/

a:active/*点击时的样式*/

{

    text-decoration:underline;/*有下划线*/

    color:#00F;}/*字体为蓝色*/

/*class选择器显示的格式是<div class="名字"></div>，该题设名字为".aa"，class选择器都是以"."开头*/

.aa/*设定div的范围，这样显示出来就不是直接占用一行了，这里设置的是共同点，公用的，不同的单独设置在id里面*/

{

    width:30px;

    height:60px;

    transition:width .2s;/*鼠标悬浮时0.2秒显示其他颜色*/

    box-shadow:# 5px 5px 4px;/*设置阴影：颜色灰色，向右移出5个像素，向下移出5个像素，虚化4个像素*/

    border: 1px solid #;}/*边框设为1个像素，solid是实线的意思，设为黑色*/    

.aa p/*.aa余p之间有空格表示p是.aa的后代，针对于.aa当中的p标签*/

{/*如果哪个p标签需要变换颜色可单独进行更改，若不更改则显示最开始时规定的p标签样式*/

    font-size:10px;

    color:#F00;

    background-color:#03C;}

/*设定每个div区域的颜色，在代码中使用时在class="aa"后面加上id="a1,a2,a3,a4,a5"*/

#a1/*在id里面设置不同的特点*/

{

    background-color:#0F0;

    box}

#a1:hover/*鼠标悬浮时的样式*/

{

    cursor:help;/*鼠标悬浮时显示的光标形状为问号，可以变成小手，尽量不要改成小手，因为小手经常被默认为可以进行点击的光标*/

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a2

{

    background-color:#F69;}

#a2:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a3

{

    background-color:#FF0;}

#a3:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a4

{

    background-color:#6FC;}

#a4:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a5

{

    background-color:#F00;}

#a5:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

显示结果图片

5月21日 CSS样式表加阴影的更多相关文章

  1. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  2. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  3. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  4. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  5. 9月9日HTML上午表单元素2（框架、样式表）

    五.框架 1.frameset是双标签框架集,如果使用框架集,当前页面不能有body. frameset属性:①cols代表左右拆分.cols=“300,*”表示左边框架宽300,右边宽剩余的宽度.* ...

  6. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  7. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  8. 关于2013年1月21日的DNS故障分析文章

    首页 资讯 小组 资源 注册 登录       首页 最新文章 业界 开发 IT技术 设计 创业 IT职场 访谈 在国外 经典回顾 更多 > - 导航条 - 首页 最新文章 业界 - Googl ...

  9. Python 学习日志9月21日

    9月21日 周四 今天是个特殊的日子吗,总感觉9月21这个日子听着怪怪的. 今天早晨看<Head First HTML and CSS>第13章节“表格和更多列表”,内容不多,看完并做了详 ...

随机推荐

  1. [C和指针]第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. XAF应用开发教程(三)业务对象模型之引用类型与关联关系

    本节介绍信息系统开发中最常见的问题,引用关系,一对多关系,多对多关系. 以客户信息为例,客户通常需要客户分类,如VIP客户,普通客户,潜在客户.当然,我们可以定义枚举类型进行定义出这个类型,并在客户类 ...

  3. C#正则表达式编程（一）：C#中有关正则的类

    正则表达式是一门灵活性非常强的语言,匹配同样的字符串可能在不同的开发人员那里会得到不同的结果,在平常的时候也是用的时候看看相关资料,不用的时候就丢在脑后了,尽管在处理大部分情况下都能迅速处理,但是处理 ...

  4. compile,build和execute的区别

    一个c程序的生成要经历以下步骤: 1.编写文本代码,生成c或cpp文件,这时候它还是文本的: 2.编译,就是compile,由c编译程序对你写的代码进行词法和句法分析,发现并报告错误,有错时编译不能通 ...

  5. Codeforces 731F Video Cards

    题意:给定n个数字,你可以从中选出一个数A(不能对该数进行修改操作),并对其它数减小至该数的倍数,统计总和.问总和最大是多少? 题解:排序后枚举每个数作为选出的数A,再枚举其他数, sum += a[ ...

  6. Oracle Regexp_substr

    Oracle中REGEXP_SUBSTR函数   Oracle中REGEXP_SUBSTR函数的使用说明:   题目如下: 在oracle中,使用一条语句实现将'17,20,23'拆分成'17','2 ...

  7. flexbox弹性伸缩布局

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Selected SVN connector library is not available or cannot be loaded

    1.错误描述 The following data will be sent: ------ STATUS ------ pluginId            org.eclipse.team.sv ...

  9. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  10. C#_Winfrom下的中英文翻译

    Winform下的语言国际化,几行代码轻松实现   最近做了一些关于winform的项目,需要用到winform的语言国际化,在初使化的时候用起来非常方便.可以参考一下: 核心逻辑: 预览效果演示: ...