<!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. Codeforces Round #164 (Div. 2)

    A. Games 模拟. B. Buttons 简单计数. C. Beautiful Sets of Points 显然每行每列只能有一个点,那么最大点数为\(1+min(n, m)\). 在不考虑\ ...

  2. Latex转换之PDF

    近期一直在做如何使用latex将模板转换成PDF.现在写下在项目中如何实现. 1.首先你先进官网下载http://www.miktex.org/download.我用的是如下图所示. 在下载好的Mik ...

  3. github 如何合并不同分支

    From: http://stackoverflow.com/questions/1123344/merging-between-forks-in-github 1. 添加remote origina ...

  4. Python学习笔记——Day5(转载)

    python 编码转换 主要介绍了python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1 等编码之间的转换. 常见的编码转换分为以下几种情 ...

  5. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  6. Sea.js学习3——Sea.js的CMD 模块定义规范

    在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...

  7. unity, itween, closed path

  8. HTC Vive开发笔记之手柄震动

    手柄震动的代码SteamVR_Controller脚本的最上面的注释里面就有说明,其实也很简单 // Example usage: //这个栗子是左手柄震动 右手震动只需把Leftmost换成Righ ...

  9. linux查看磁盘io的几种方法

    怎样才能快速的定位到并发高是由于磁盘io开销大呢?可以通过三种方式: 第一种:用 top 命令 中的cpu 信息观察 Top可以看到的cpu信息有: Tasks: 29 total, 1 runnin ...

  10. （转）DataGridView多维表头及其扩展功能

    dataGridView1.RowHeadersVisible = false;把整行选中那一列去掉.如果需要整行选中,新增一按钮列模拟实现.上源码:多维DataGridView 有个简易的方法: 1 ...