易亚有|易晓俊|全能立交桥|易经交通系统
现在是 2024-06-25 星期二 五月廿十   点击打开俗谷哥  点击打开百度点击打开邮件询查    收藏本站
□ 站 内 搜 索 □
请输入查询的字符串:


标题查询 内容查询



发布时间: 2014-05-03 14:34:01 被阅览数:1319 次 来源: 易亚有|易晓俊|全能立交桥|易经交通系统
文字 〖 自动滚屏(右键暂停)

一、样式表
1、嵌入式
<head>
....
<style type="text/css">
#left .trackback input,p {
....
}
</style>
....
</head>

2、链接式
<head>
....
<link href="main.css" rel="stylesheet" type="text/css">
</head>

3、引入式
<head>
....
<style="text/css">@import url(main.css)</style>
</head>

二、选择符
id、类、群(标记)可以相互修饰组合
"{}"前的名称用","分隔表示被分隔的两名称都被给予相同的样式
"{}"前的名称用"空格"分隔(群id及群类不能加空格组合,则直接写在一起)表示上下级关系,"{}"内的样式只给予其下级

1、类别择符(用点,class="bold"的bold就是类名称了)
<head>
....
<style type="text/css">
.bold {font-weight:bold}
</style>
</head>
<body>
<p class="bold">这段是粗字</p>
</body>

2、id择符(用#,id="red"的red就是id了)
<head>
....
<style type="text/css">
#red {color:red}
</style>
</head>
<body>
<p id="red">这是ID择符_红色</p>
</body>

3、群选择符(在前不用加任何字符,实际是标记例如<a></a>,<li></li>,<p></p>等)
<head>
....
<style type="text/css">
p {font-weight:bold}
</style>
</head>
<body>
<p>这段是粗字</p>
</body>

3.1、群类别选择符
<head>
....
<style type="text/css">
p.bold {font-weight:bold}
</style>
</head>
<body>
<p class="bold">这段是粗字</p>
</body>

3.2、群id选择符
<head>
....
<style type="text/css">
p#red {color:red}
</style>
</head>
<body>
<p id="red">这是ID择符_红色</p>
</body>

 

字体属性:(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;(内嵌)inline-block(行块) 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 /*超链接文字格式*/
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表单运用:
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
八、CSS定位四周边距:
margin: 8px 0 8px 0;
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|normal| 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-width border-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|inline-block|list-item}视为不存在,且不加载!
2 控制显示 {visibility:hidden}隐藏,但在浏览时保留位置 
3 控制空白 {white-space:normal|pre|nowarp} 
4 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 
5 图形列表 {list-style-image:URL} 
6 位置列表 {list-style-position:inside|outside} 
7 目录列表 {list-style:目录样式类型|目录样式位置|url} 
8 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

>行内元素列表
<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为
<input> 元素定义标注(标记)
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量

>块级元素列表
<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为
<fieldset>元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体(正文)
<td>表格中的标准单元格
<tfoot>定义表格的页脚(脚注或表注)
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行


 

 


上两条同类新闻:

页底
SketchUp中国论坛手绘100网筑龙网自由设计新家园紫天SketchUp中文志ARC设计中文网拓者设计吧易利项目管理Excel教程学习office学习EaBIM56su
中国汉化SketchUp吧中国门户三维网致学网ABBS论坛织梦网中国渲染网中国渲染网论坛在浏览IE模型Google模型库火星时代网BIM论坛BIM中国道医网名医妙方精华千首
新浪搜狐网易新华网凤凰网央视网联合早报人民网中国新闻网中国移动赶集网淘宝网驱动之家太平洋电脑网 电驴下载 吾爱破解源码爱好者
编程论坛源码之家网站视频教程51CTC学院W3School网络程序学习W3School网页代码测试脚本之家PHP100论坛希网动态域名 花生壳动态域名
摩尔网工商银行建设银行中国银行农业银行招商银行交通银行中信银行民生银行
卫视寻星参数 地球在线 天下易家人 ico图标在线转换 微信公众平台 微信开发平台 企业微信 微信商户平台 深圳人社局 PHP完全手册 HTML30分钟入门 W3CSCHOOL菜鸟教程 Jquery EasyUI中文网 jQuery UI中文网 jQuery插件库 弹出层LayUI镜像站 弹出层LayUI镜像站 jQuery Mobile实例教程 phpStudy DIV+CSS布局 PHP在线加密 PHP加密 生成二维码 腾讯课堂 素材火 二当家 TP框架 TP3.2.3开发手册 5iDev-Web开发在线教程 博客园 众号调试 企微调试 Bootstrap前端框架 base64与图片互转 helloweba技术分享 jquery选择器大全 HTML/CSS/JavaScript前端在线调试 码农教程
mysql函数汇总 前端开发 正则表达式 脚本之家在线工具 中文转码 Unix时间戳在线转换 可视化网页布局 签名设计在线生成 阿里云 su坯子库 欧创定位
纯净操作系统 打印机驱动网 jquery各版本 jquery与js选择器 云端笔记 机械时代网 淋风网校 SolidWorks自学 穿透映照 中国建师网 引导键 数库字典 信呼 短信宝 水晶头网线排法 汉字转拼音 汉字转字母 分析图表 酷家乐 720VR 酷开VR C语言中文网
版权所有  电子邮箱:yyy6901@qq.com  QQ交谈或留言(还未是好友时也可进行)  微云  百度云网盘  360网盘  迅雷快传  华为网盘  2014年入深户积分表
---  ICP备案编号:粤ICP备09094614号  ---