网站建设必看之CSS样式大全
css样式是什么

css样式是什么
CSS(Cascading Style Sheets)即层叠样式表,是一种用来设计网页样式的语言。
CSS 可以控制HTML 元素的颜色、尺寸、位置、字体等方面的表现形式,从而让网页拥有更好的视觉效果和交互性。
通过CSS,网页设计师可以将设计与内容分离,使得网页结构和样式可以独立更新和移植。
CSS 样式包括选择器和属性两个部分。
选择器指定了要设置样式的HTML 元素,而属性则表示需要设置的样式的特征,如字号、字体、背景颜色等。
在HTML 中,可以通过页面头部的`<head>` 标签中的`<style>` 标签或者外部的`link` 标签引入CSS 文件。
通过这些方式,可以定义各种选择器和属性,来达到设计独特、精美的网页的目的。
css精品分享

2.1.4 选择器的注意事项
<程序2-10> <html> <head> <style type="text/css"> .style1{ font-size:20px;background-color:pink;color:black;} #style2{background-color:silver;font-style:italic;} </style> </head> <body> <span id="style2" class="style1">这是一则重要的新闻</span> </body> </html>
2.1.3开的两个或更多的单元选择符组成的字符串 例: p em{color:red; font-size:2cm;background:green} 表示段落(p)中的强调文本(em)是红色文字,字号为 2cm,背景色是绿色。 .style1 span{color:red;font-style:italic;}
2.1.3 复合选择器-后代选择器
<程序2-9>
<html> <head> <title>后代选择器示例2</title> <style type="text/css"> .style1{ font_size:20px;color:black;background-color:silver;} .style1 span{color:red;font-style:italic;} </style> </head> <body> <p class=“style1”>这是一则非常<span>重<b>import</b>要</span>的 新闻 </p> </body> </html>
第7章 网页设计与制作-CSS样式使用

行内样式
这种样式是直接添加在HTML的标签里,语法如下:
<标签名 style=”样式规则的集合”>网页内容< /标签名>
【例】:
<p style=”color: blue; font-size: 10pt”>CSS实例</p>
代码说明:
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显 示直观,但是这种方法不怎么常用,因为这样添加无法完全发挥 样式表的优势“内容结构和格式控制分别保存”。
案例(文字滚动效果) <marquee direction="up" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"> <div>文字内容</div></marquee>
div设置宽高 400*100 固定定位 top: 20% left: 25%;
复习
第7章 CSS样式使用
$ [知识目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
8 [能力目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
什么是CSS层叠样式表
• CSS(Cascading Stylesheets,层叠样式 表)是一种制作网页的新技术,也有的人称 之为层叠样式表(Cascading Stylesheet) ,现在已经为大多数的浏览器所支持,成为 网页设计必不可少的工具之一。
看看段落中的字体有什么变化?
语法规定
4.注释
你可以在CSS中插入注释来说明你代码的意思 ,注释有利于你或别人以后编辑和更改代码时 理解代码的含义。在浏览器中,注释是不显示 的。CSS注释以"/*" 开头,以"*/" 结尾。
css样式表讲解

3.外部样式表
先创建一个CSS文件,然后在页面中调用这个CSS文
件。
调用的方法:在页面的头部标记<HEAD>中加入下面的
代码 <head> <link href="school.css" rel="stylesheet" type="text/css" />
</head>
<link>标记,用来调用外部的样式表文件。
CSS 样 式 表
CSS 样 式 表
CSS样式表概述 样式表的基本语法 样式表的使用规则 样式表中的常用属性 布局与定位
CSS样式表概述
CSS是Cascading Style Sheet的缩写,称为“层叠样
式表”,简称为“样式表”
层叠是指多个样式可以同时应用于同一个页面或网页
·CSS是一种用来装饰HTML的标记集合,是 对HTML标记的一种扩展,可以进一步美化 HTML页面 样式表的作用: 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表
样式表的使用规则
样式表的分类
按加入的方式不同,可以分为:
行内样式表、
内部样式表
外部样式表。
1.行内样式表(内嵌样式表)
在HTML标记中使用style属性,直接写入需要定义的样式。 例如: <p style="color:Blue; font-size:12px" >内嵌样式表<p> 其中各个属性之间用“;”隔开,属性与属性值之间用“:”隔开.
内联式样式表是在现有HTML元素的基础上,用style属性把 特殊的样式直接加入到那些控制信息的标记中,比如下面的 例子: <p style="color:#ff0000">内联式样式表</p> 这种样式表只会对使用它的元素起作用,而不会影 响HTML文档中的其他元素。也正因为如此,内联式样式表 通常用在需要特殊格式的某个网页对象上。
HTML中CSS样式标签大全及用法

CSS 网页样式大全如下:字体属性:(font)大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位:PX、PD、EM粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性:(background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法background:#000 url(..) repeat fixed left top;区块属性:(Block)字间距letter-spacing: normal; 数值对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性:(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性:(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border:width style color;列表属性:(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全如下一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边框空白padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;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; background-repeat : repeat-y;指定背景位置background-position : 90% 90%; background-position : top; background-position : buttom; background-position : left; background-position : right; background-position : center;五、CSS连接属性:aa:linka:visiteda:activea: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 : #369border-top-width :1pxborder-top-style : solid其他框线样式soliddotteddoublegrooveridgeinsetoutset七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式如下:margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;CSS 属性:字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|no rmal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|uppe r-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resiz e|sw-resize}。
前端基础之CSS标签样式

前端基础之CSS标签样式⼀:字体属性(1)宽/⾼ (1)width:为元素设置宽度 (2)height:为元素设置⾼度PS:块级标签才能设置宽度/⾼度⾏内标签存放⽂本⼤⼩例如:p{width: 30px;height: 30px;}(2)字体样式:关键字:font-family作⽤:更改字体的样式例如:{font-family: "Microsoft Yahei", "微软雅⿊", "Arial", sans-serif}(3)字体⼤⼩:关键字:font-size作⽤:更改⽤户的字体⼤⼩例如:p{font-size: 30px;}(4)字重:关键字:font-weight作⽤:对字体加重或者减轻例如:{/*加重*/font-weight: bolder;/*减轻*/font-weight: lighter;}(4)⽂字颜⾊:关键字:color作⽤:更改样式的颜⾊例如:{/* ⽅式⼀*//*color: red;*//*⽅式⼆*//* color: rgb(255,255,255);*//* ⽅式三第四个参数调整透明度(0-1)*//*color: rgba(255,255,255,0.1); */ /* ⽅式四*/color: #ff0000;}修改颜⾊的四种⽅式(5)⽂字对齐关键字:text-aline作⽤:调解⽂字位置例如:/*居中*/text-align: center;/*左对齐默认*/text-align: left;/* 右对齐*/text-align: right;(5)⽂字装饰关键字:text-decoration作⽤:对⽂字进⾏装饰例{/* ⽂字下⾯没有任何装饰适⽤于超链接超链接下没有任何横线*/ text-decoration: none;/* 下划线*/text-decoration: underline;/* 上划线*/text-decoration: overline;/*穿过⽂字有点类似于删除*/text-decoration: line-through;}装饰⽂字的四种常⽤⽅式如:(6)⽂字缩进关键字:text-indent作⽤:⽂本进⾏缩进{text-indent:32px ;}⼆:背景属性(1)关键字:background(2)作⽤:对背景进⾏操作{/*背景颜⾊*/background-color: red;/* 背景图⽚*/background-image: url("111.png");/* 默认铺满整个屏幕*/background-repeat:repeat ;/* 禁⽌背景重复*/background-repeat: no-repeat;/* ⽔平⽅向重复*/background-repeat: repeat-x;/*垂直⽅向重复*/background-repeat: repeat-y;/*背景位置*/background-position: center;}(3)语句整合例如:background: red center url("111.png");(4)使被装饰的属性固定不动关键字:background-attachment: fixed;例如:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滚动背景图⽰例</title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}</style></head><body><div class="d1"></div><div class="box"></div><div class="d2"></div><div class="d3"></div></body></html>图⽚不动图⽚样式不动三:边框关键字:border作⽤:给被装饰的对象加上边框(1)边框属性 (1)border-width:边框粗细 (2)border-color:边框颜⾊ (3)border-style:边框样式(2)边框样式例如(1):{/*边框颜⾊*/border-color: blue;/*边框粗细*/border-width: 3px;/*边框样式*/border-style: dashed;}(2)也可以单独为某⼀个边框设置样式例如(2):{border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;}(3)border-radius:作⽤:(1)可以使边框变的圆滑(2)设置宽⾼为边框的⼀半可以设置成⼀个圆例如:{width: 100px;height: 100px;border: 3px solid black;background-color: red;/*设置为边框的⼀半*/border-radius: 50%;}四:display属性(1)none: (1)元素存在但是在浏览器中不存在 (2)浏览器中的空间也不存在例如:{display: none;}(2)bolck:将⾏内标签转换成块标签可以设置⾏内标签的⼀些属性值例如:{width: 100px;height: 100px;border: 3px solid red;/*将⾏内标签转换成块标签*/display: block;}(3)inline:将块级元素按⾏内元素显⽰例如:.c1{width: 100px;height: 100px;border: 3px solid red;/*将块标签转换成⾏标签*/display: inline;}.c2{width: 100px;height: 100px;border: 3px solid blue;/*将块标签转换成⾏标签*/display: inline;}(4)inline-block 使元素同时含有⾏内标签以及块标签的特点PS:display:"none"与visibility:hidden的区别:(1)visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占⽤与未隐藏之前⼀样的空间。
css属性大全

css属性大全CSS属性大全。
CSS(Cascading Style Sheets)是一种用来为网页添加样式和布局的样式表语言。
它可以控制网页的字体、颜色、间距、边框、背景等各种样式,是网页设计中不可或缺的一部分。
在这篇文档中,我们将详细介绍CSS中的各种属性,帮助您更好地掌握CSS的应用。
1. 字体属性。
字体属性用于设置网页中文本的字体样式、大小、粗细等。
常用的属性包括font-family(设置字体系列)、font-size(设置字体大小)、font-weight(设置字体粗细)、font-style(设置字体样式)等。
2. 文本属性。
文本属性用于设置文本的对齐方式、行高、间距等。
常用的属性包括text-align(设置文本对齐方式)、line-height(设置行高)、letter-spacing(设置字符间距)、word-spacing(设置单词间距)等。
3. 背景属性。
背景属性用于设置网页元素的背景样式。
常用的属性包括background-color(设置背景颜色)、background-image(设置背景图片)、background-repeat(设置背景重复方式)、background-position(设置背景位置)等。
4. 边框属性。
边框属性用于设置网页元素的边框样式。
常用的属性包括border-width(设置边框宽度)、border-style(设置边框样式)、border-color(设置边框颜色)、border-radius(设置边框圆角)等。
5. 盒模型属性。
盒模型属性用于设置网页元素的尺寸、内边距、外边距等。
常用的属性包括width(设置元素宽度)、height(设置元素高度)、padding(设置内边距)、margin(设置外边距)等。
6. 定位属性。
定位属性用于设置网页元素的位置。
常用的属性包括position(设置定位方式)、top(设置元素顶部位置)、left(设置元素左侧位置)、z-index(设置元素层级)等。
CSS公共样式

CSS公共样式global.css | reset.css(格式化样式)common.css(公共组件样式)layout.css(当前页⾯样式)清除全站所有页⾯的浏览器默认样式,保证在初始样式在所有浏览器下⼀致。
common.css(公共组件样式)⼀般⼀个⽹站所有页⾯头部、底部样式都是⼀致的,⽽且很长时间不会有⼤的改变,改变的⼤概就是产品、运营的经常需要添加、去掉某些⼊⼝的需求,要保证全站所有页⾯头部⼀次替换⽣效,只要把头⽂件,已经对应的样式⼀发,马上⽣效,很快就有响应。
⽐如翻页、表单(输⼊框、按钮)等样式也是全站统⼀的,把这些样式都放到common.css⾥⾯,如果哪天所有的按钮样式要变更,⼀次替换就成功了。
layout.css(当前页⾯样式)公共组件以外的所有样式都写到这个样式⽂件⾥⾯,并且保证⼀个页⾯⼀个独⽴样式,页⾯html和css写法要模块化,保证迅速响应项⽬频繁的迭代。
为什么要保证⼀个页⾯⼀个独⽴样式,⽽且要模块化,肯定有朋友和我有过⼀样的经历,修改⼀⾏样式代码,整个页⾯甚⾄N个页⾯都会受影响,搞了半天还不知道哪⾥出了问题,返回到修改前的版本,就没问题了。
终于找到原因了,却不能改以前的样式,更不能删除,只能增加,时间⼀长,css样式⽂件越来越⼤,最后是不堪重负,整个页⾯代码只能重写。
其实global.css和common.css也可以合并到⼀个⽂件,毕竟格式化样式也就那么⼏⼗⾏代码,⽽且格式化样式、头部、底部样式每个页⾯都会⽤到。
这样每个页⾯就只有2个样式:common.csslayout.css如果common.css⾥⾯组件太多,⽽且很多组件也不是常⽤的,也可以像下⾯这样做:heads.css(格式话样式、头部、底部)common.css(公共组件样式)layout.css(当前页⾯样式)⼀般情况下也只有2个样式,当需要⽤到组件的时候才去link组件样式,也不会有太多问题。
最后,不要把什么东西都往组件样式⾥⾯塞,有写东西宁愿每个页⾯重复拷贝也不要塞到组件样式⾥⾯去。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网站建设必看之CSS样式大全,字体样式,背景样式,文本样式,框架样式.
网站建设必看之CSS样式大全.本文包括了字体样式,背景样式,文本样式,框架样式等温州网站建设中常用的样式.
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体: (font-family) Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性: (background) 色彩 {background-color: #FFFFFF;} 图片 {background-image: url();} 重复 {background-repeat: no-repeat;} 滚动 {background-attachment: fixed;}(固定) scroll;(滚动) 位置 {background-position: left;}(水平) top(垂直); 简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/
区块属性: (Block) /*这个属性第一次认识,要多多研究*/ 字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/ 对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进 {text-indent: 数值px;} 垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)
显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/ 方框属性: (Box) width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 边框属性: (Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#;
简写方法border:width style color; /*简写*/ 列表属性: (List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha; 位置list-style-position: outside;(外) inside; 图像list-style-image: url(..); 定位属性: (Position) Position: absolute; relative; static; visibility: inherit; visible; hidden; overflow: visible; hidden; scroll; auto; clip: rect(12px,auto,12px,auto) (裁切)
css属性代码大全 一 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边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、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 /*超链接文字格式*/