CSS中的属性

一、html标签<pre>...</pre>文字格式化<div>......</div>列块容器字体大小变化 <font size=?>想输入的字</font> 字体颜色 <font color="...">想输入的字</font> 字体变粗 <b>想输入的字</b> 字体变斜 <i>想输入的字</i> 字体加下划线 <u>想输入的字</u> 对正中央ㄉ语法 <p align="center">内容</p> 对正左边ㄉ语法 <p align="left">内容</p> 对正右边ㄉ语法 <p align="right">内容 </p> 字体删除线 <s>想输入的字</s> 字体设置 <font face="字体名称">想输入的字</font> 打字机字体 <tt>想输入的字</tt> 上标字 <sup>想输入的字</sup> 下标字 <sub>想输入的字</sub> 水平线 <hr color="..."> 换行输入 想输入的字<br>想输入的字 超链接 <a href="想链接网址">链接地的名称</a> <a href="mailto:填入email">要显示的字打这里</a>网络邮寄标签贴图 <img src="图形的网址"> 跑马灯(循环) <marquee behavior=scroll>想输入的字</marquee>外部文件导入格式标签CSS外部导入格式：<link rel="stylesheet" type="text/css" href="/css.css" />直接引用：<style type="text/css"><!--id{...}--></style>javascript - 加载外部.js独立文件：<script type="text/javascript" src="/script.js"></script> 二、CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration:overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 三、CSS符号属性：list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position:outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性：a /*所有超链接*/ a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/ 鼠标光标样式：链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下:border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/ 七、CSS表单运用：文字方块 <input type="text" name="T1" size="15"> 按钮 <input type="submit" value="submit" name="B1"> 复选框 <input type="checkbox" name="C1"> 选择钮 <input type="radio" value="V1" checked name="R1"> 多行文字方块 <textarea rows="1" name="S1" cols="15"></textarea> 下拉式菜单 <select size="1" name="D1"><option>选项1</option><option>选项2</option></select> 八、CSS边界样式：margin-top:10px; /*上边界*/ margin-right:10px; /*右边界值*/ margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/ 九、CSS边框空白padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白*/ 基本语法 　规则 选择符 任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如， P { text-indent: 3em } 当中的选择符是P。 类选择符 单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 : code.html { color: #191970 } code.css { color: #4b0082 } 　以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如， <P 例如，code.html.proprietary是无效的。</p> 类的声明也可以无须相关的元素: .note { font-size: small } 在这个例子，名为note的类可以被用于任何元素。 一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。 ID 选择符 ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下: #svp94O { text-indent: 3em } 这点可以参考HTML中的ID属性: 　<P ID=svp94O>文本缩进3em 关联选择符 关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符 P EM { background: yellow } 是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。 　声明 属性 一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。 值 声明的值是一个属性接受的指定。例如，属性颜色能接受值red。 组合 为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } 　继承 实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。 有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。 　　注解 样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式: /* COMMENTS CANNOT BE NESTED */ 伪类和伪元素 伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。 伪类或伪元素规则的形式如 选择符:伪类 { 属性: 值 } 或 选择符:伪元素 { 属性: 值 } 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下: 选择符.类: 伪类 { 属性: 值 } 或 选择符.类: 伪元素 { 属性: 值 } 定位锚伪类 　伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。 一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下: A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% } 首行伪元素 通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子: 　P:first-line { 　font-variant: small-caps; 　font-weight: bold } 首个字母伪元素 首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如: 　P:first-letter { font-size: 300%; float: left } 会比普通字体加大三倍。