<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">

 <html>

 <head>

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

 <title>CSS层叠样式表</title>

 <!--外部样式表

 <head>

     <link rel="stylesheet" type="text/css"href="mystyle.css">

 </head>

 hr{color:red;}

 p{margin-left:20px;}

 body{background-color:blue;}

 -->

 <!--内部样式表

 <head>

     <style>

         hr{color:red;}

         p{margin-left:20px;}

         body{background-color:blue;}

     </style>

 </head>

 -->

 <!--内联样式表

 <p style="hr{color:red;margin-left:20px;"></p>

 -->

 <style type="text/css">

 /*id选择器*/

 #para1

 {

     text-alignLcenter;

     color:red;

 }

 /*class(类)选择器*/

 .center{text-align:center;}

 /*指定特定的元素使用class*/

 p.center{text-align:center;}

 /*文本对齐方式*/

 h1{text=align:center;}

 /*文本修饰*/

 a{text-decoration:none;}

 h1{text-decoration:overline;}

 h2{text-decoration:line-through;}

 h3{text-decoration:underline;}

 /*文本转换*/

 p.uppercase{text-transform:uppercase;}

 p.lowercase{text-transform:lowercase;}

 p.capitalize{text-transform:capitalize;}

 /*文本缩进*/

 p{text-indent:50px;}

 /*字体样式 正常 斜体 倾斜的文字*/

 p.normal{font-style:normal;}

 p.italic{font-style:italic;}

 p.oblique{font-style:oblique;}

 /*用em来设置字体大小*/

 p{font-size:2.5em;}/*40px/16=2.5em*/

 /*CSS链接样式*/

 a:link{color:red;}/*正常,未被访问过的链接*/

 a:visited{color:red;}/*用户已经访问过的链接*/

 a:hover{color:red;}/*当用户鼠标放在链接上时*/

 a:active{color:red;}/*链接呗点击的那一刻*/

 /*列表-缩写属性*/

 ul

 {

     list-style:spuare url("spaurple.gif");

 }

 /*表格 折叠边框*/

 table

 {

     border-collapse:collapse;

 }

 bable,th,td

 {

     border:1px solid black;

 }

 /*表格属性*/

 td

 {

     text-align:center;

     height:100px;

     width:100px;

     vertical-align:bottom;

     padding:10px;

     border:1px solid blue;

     background-color:green;

     color:black;

 }

 /*CSS边框属性*/

 border-style:none;/*默认无边框*/

 border-style:dotted;/*点线框*/

 border-style:dashed;/*虚线框 */

 border-style:solid;/*实线边界*/

 border-style:double;/*定义两个边界  值等于border-width*/

 border-style:groove;/*3D沟槽边界*/

 border-style:ridge;/*3D脊边界*/

 border-style:inset;/*3D的嵌入边框*/

 border-style:outset;/*3D的突出边框*/

 /*CSS  Display(显示) Visibility(可见性)*/

 a.hidden{visibility:hidden;}/*任然占空间*/

 a.hidden{visibility:none;}/*不占空间*/

 /*改变元素显示*/

 li{display:inline;}/*把列表项显示为行内元素*/

 span{display:block}/*把span元素显示为块元素*/

 /*CSS 定位*/

 /*相对定位relative  原本锁占空间不变*/

 h2.pos_top

 {

     position:relative;

     top:-50px;

 }

 /*绝对定位Absolute 不占据空间*/

 h2

 {

     position:absolute;

     left:100px;

     top:150px;

 }

 /*Fixed 定位  位置固定 即使窗口滚动 也不移动*/

 p.pos_fixed

 {

     position:fixed;

     top:30px;

     right:5px;

 }

 /*CSS 水平对齐 Horizontal align*/

 /*中心对齐  使用margin属性*/

 .center

 {

     margin-left:auto;

     margin-right:auto;

     width:70%;

     background-color:red;

 }

 /*使用position属性设置左右对齐*/

 .right

 {

     position:absolute;

     right:0px;

     width:300px;

     background-color:blue;

 }

 /*使用float属性设置左右对齐*/

 .right

 {

     float:right;

     width:300px;

     background-color:red;

 }

 /*CSS组合选择符*/

 /*后代选取器*/

 div p

 {

     font-size:12px;

 }

 /*子元素选取器*/

 div>p

 {

     font-size:12px;

 }

 /*相邻兄弟选取器*/

 div+p

 {

     font-size:12px;

 }

 /*普通相邻兄弟选取器*/

 div~p

 {

     font-size:12px;

 }

 ul

 {

     list-style:none;

     margin:0;

     padding:0;

 }

 /*垂直导航栏*/

 /*a

 {

     display:block;

     width:60px;

 }*/

 /*水平导航栏*/

 li

 {

     display:inline;

 }

 /*图片栏*/

 div.img

 {

     margin:2px;

     border:1px solid red;

     height:auto;

     width:auto;

     float:left;

     text-align:center;

 }

 div.img img

 {

     display:inline;

     margin:3px;

     border:1px solid blue;

 }

 div.img a:hover img

 {

     border:1px solid pink;

 }

 div.desc

 {

     text-align:center;

     font-weight:normal;

     width:120px;

     margin:2px;

 }

 </style>

 <script type="text/javascript">

 document.write("CSS详细样式");

 </script>

 </head>

 <body>

 <div>

     <ul>

         <li><a href="default.asp">Home</a></li>

         <li><a href="news.asp">News</a></li>

         <li><a href="contact.asp">Contact</a></li>

         <li><a href="about.asp">About</a></li>

     </ul>

 </div>

 </body>

 </html>

CSS详细样式的更多相关文章

  1. （3）css文本样式

    本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式.                       一.弄懂文本文字的制作.利用css的样式定义版面 ...

  2. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  3. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  4. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  7. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  8. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  9. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

随机推荐

  1. AngularJS之手动加载模块app和controller

    使用ng的页面中一般都是使用模块自动加载,页面的结构一般是这样的 加载angularjs脚本 加载业务代码脚本(或者写在script标签中) html结构代码(带有ng指令) 就像这样 app.htm ...

  2. Android——手机内部文件存储（作业）

    作业:把用户的注册信息存储到文件里,登录成功后读出并显示出来 activity_practice2的layout文件: <?xml version="1.0" encodin ...

  3. cache是什么文件？

    通常人们所说的Cache就是指缓存SRAM. SRAM叫静态内存,"静态"指的是当我们将一笔数据写入SRAM后,除非重新写入新数据或关闭电源,否则写入的数据保持不变. 由于CPU的 ...

  4. 论文阅读之：Photo-Realistic Single Image Super-Resolution Using a Generative Adversarial Network

    Photo-Realistic Single Image Super-Resolution Using a Generative Adversarial Network  2016.10.23 摘要: ...

  5. 需求文档2_The Battle of Polytopia

    需求文档 ------------------------------------- 1. 游戏详细分析 The Battle of Polytopia简要介绍 探索型.策略型的对战塔防游戏,回合制. ...

  6. mongoose学习文档

    名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 来自cnode社区 1.创建一个 ...

  7. ASP.NET MVC利用ajax把action的JavaScript注册到页面并执行

    相信大家在做Webform时经常会遇到在页面的后台CS文件中根据数据运行结果修改页面显示样式.显示(隐藏).或者弹出框,当时我们会用到ScriptManage或者Page来向页面注册一段js来实现页面 ...

  8. 【MySQL】优化—工欲善其事，必先利其器之EXPLAIN

    接触MySQL已经有一段时间了,了解如何优化它也迫在眉睫了,话说工欲善其事,必先利其器.最近我就打算了解下几个优化MySQL中经常用到的工具.今天就简单介绍下EXPLAIN. 环境准备 Explain ...

  9. WebApi：使用方法名或者控制器名作为接口地址

    今天遇到一个问题:新建的WebApi的项目生成的接口的地址都是以控制器的名字命名的,这样的话,在方法前添加ActionName就不起作用了,但之前一个项目是可以的. 接口代码: public clas ...

  10. Access使用参数化UPDATE数据时，数据无法更新的问题

    今天update access数据库时,使用了参数化的方式,结果不报错,但是数据也没有更新.经过google发现access使用参数化时,参数位置必须和赋值顺序相同才行,否则更新时就会出现数据无法更新 ...