<!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. ubuntu下mysql的常用命令，MySQL数据库的基本操作命令

    一.mysql服务操作 0.查看数据库版本 sql-> status; 1.net start mysql //启动mysql服务 2.net stop mysql //停止mysql服务  3 ...

  2. 【我所理解的Cocos2d-x】第六章 精灵Sprite 读书笔记

    简介: 精灵是2D游戏里最重要的元素.游戏场景中大部分可见的元素都直接或间接地与精灵相关. 在Cococs2d-xz中,精灵使用Sprite表示,它将一张纹理的一部分或者全部的矩形区域绘制在屏幕上. ...

  3. The error occurred while setting parameters--索引 3 超出范围 sqlserver2008

    这个问题不是jar包冲突,是表的问题,表里的ID设置成自动增加1,就可以了!

  4. oracle 左边填充函数使用

    左边填充 select lpad('abcde',10,'0') from dual; ==>00000abcde select lpad('abcde',10,'x') from dual;= ...

  5. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序:

  6. python---pymysql

    pymysql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.2.7用MySQLdb,3.0用pymysql. #下载安装 pip3 install pymysql 使用 执 ...

  7. Linux free命令详解（转）

    解释一下Linux上free命令的输出.(转自:http://www.cnblogs.com/coldplayerest/archive/2010/02/20/1669949.html) 下面是fre ...

  8. Python-Tkinter几何布局管理（转）

    所有的Tkinter组件都包含专用的几何管理方法,这些方法是用来组织和管理整个父配件区中子配件的布局的.Tkinter提供了截然不同的三种几何管理类:pack.grid和place. pack() p ...

  9. log4j打印mybatis sql语句

    Mybatis默认使用有slf4j 必须加上依赖 <dependency> <groupId>org.slf4j</groupId> <artifactId& ...

  10. yum install nginx

    先安装nginx的yum源 http://nginx.org/en/linux_packages.html#stable 找到链接,安装: rpm -ivh http://nginx.org/pack ...