<!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. Java笔记6-数组

    知识大纲一.数组的应用由于数组是用来存储数据的,所以,它的操作总是增.删除.改.查的操作.数组做为一种最基本的数据结构,它在查询上效率是最高的.但是在增加.删除的操作效率是最低的. 因为,数组的长度一 ...

  2. HDU 5943 Kingdom of Obsession

    题意:n个人编号为[s+1, s+n],有n个座位编号为[1,n],编号为 i 的人只能坐到编号为它的约数的座位,问每个人是否都有位置坐. 题解:由于质数只能坐到1或者它本身的位置上,所以如果[n+1 ...

  3. 1、C#入门第一课

    C# 读作C Sharp,所以程序文件的扩展名为.cs 新建项目-窗体应用程序 所谓的Visual C#就是指的可视化编程,主要在设计窗口布置好自己的控件(一些具有一定功能的小部件,例如如可以点击的按 ...

  4. JSBinding+SharpKit / 更新的原理

    首先,其实不是热更新,而是更新. 热更新意思是不重启游戏,但只要你脚本里有存储数据,就不可能.所以只能叫更新. 但大家都这么说,所以... 先举个具体的例子: 如果是C#:在 Prefab 的 Gam ...

  5. 轻量级分布式 RPC 框架

    @import url(/css/cuteeditor.css); 源码地址:http://git.oschina.net/huangyong/rpc RPC,即 Remote Procedure C ...

  6. Nim游戏变种——取纽扣游戏

    (2017腾讯实习生校招笔试题)Calvin和David正在玩取纽扣游戏,桌上一共有16个纽扣,两人轮流来取纽扣,每人每次可以选择取1个或3个或6个(不允许不取),谁取完最后的纽扣谁赢.Cavin和D ...

  7. Silverlight管理系统源代码（SilverlightOAFlame开发框架主要提供二次开发）

    Silverlight OA系统简介 系统功能简介 l 程序界面介绍: 左侧为主菜单,主菜单可以展开和收起,主菜单下面的所有模块都可以在数据库中扩展增加,模块的权限和用户角色挂钩,可以在数据库中创建多 ...

  8. 《MySQL 存储过程编程》-读书笔记

    本书结构: 第一部分:存储编程基础 第1章:存储过程程序基础 第2章:MySQL存储编程指南 第3章:语言基础 第4章:语句块 第5章:在存储程序中使用SQL 第一章:MySQL存储程序介绍 存储程序 ...

  9. 【转载】芯片级拆解51、AVR、MSP430、凌阳61、PIC，5种单片机，多张显微照片

    先秀一张解剖照,放大裁剪,小米1S微距拍摄,800万像素摄像头很给力!今天等待被拆的是5个单片机芯片:(1)凌阳16位单片机SPCE061A ,这是我接触的第一个单片机,最高主频49MHz,32KB的 ...

  10. int和NSInteger区别

    NSInteger会自动根据操作系统的位数(32或者64位)返回最大的类型 查到c语言中,int和long的字节数是和操作系统指针所占位数相等. 但c语言中说,long的长度永远大于或等于int ob ...