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. 泛型之Dictionary

    Dictionary<string, string>是一个泛型 他本身有集合的功能有时候可以把它看成数组 他的结构是这样的:Dictionary<[key], [value]> ...

  2. SQL 根据指定字符拆分字符串

    CREATE FUNCTION [dbo].[F_StringSplit] ( @STR NVARCHAR(MAX)='', )='') )) AS BEGIN DECLARE @NUM INT, @ ...

  3. SLAM reference

    Technical website: OpenSlam: http://openslam.org/ MRPT: http://www.mrpt.org/ Monocular SLAM: https:/ ...

  4. 四十条测试你是不是合格的PHP程序员

    四十条测试你是否合格的PHP程序员,不官方,也不权威,但很给力.超过三条就不合格了.超过五条就得好好反省下自己的不足了. 1. 不会利用如phpDoc这样的工具来恰当地注释你的代码 2. 对优秀的集成 ...

  5. c#获取url请求的返回值（转）

    有两种方式获取. 方法一: /// <summary> /// 获取url的返回值 /// </summary> /// <param name="url&qu ...

  6. json与jsonp应用及其他ajax数据交互方式

    1.json是数据交换格式,使用实例如下: $.getJSON( '/manage/asset/asset_delByIds.action', { 'ids':id }, function(data) ...

  7. 在PC端或移动端应用中接入商业QQ的方法

    今天看博友的博客学习了一种很有用的方法: 在页面中需要接入企业的QQ,访问网址:http://shang.qq.com/widget/consult.php.(就是API接口),然后你只需要登录你的Q ...

  8. wpf datagrid 如何让标头 及内容居中

    头就是这么居中<DataGrid> <DataGrid.ColumnHeaderStyle> <Style TargetType="DataGridColumn ...

  9. python 标准库

    https://www.zhihu.com/question/24590883 https://www.zhihu.com/question/20501628 http://blog.csdn.net ...

  10. linux清空文件等有用的指令

    1).    > filename 2).    :> filename 3).   echo "" > filename  (文件大小被截为1字节) 4).   ...