网页基础知识-常用div+css(全)
来源:互联网 发布:brew install java 编辑:程序博客网 时间:2024/06/07 05:42
网页基础知识-常用div+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:top;/*垂直向上对齐*/
vertical-align:bottom;/*垂直向下对齐*/
vertical-align:middle;/*垂直居中对齐*/
vertical-align:text-top;/*文字垂直向上对齐*/
vertical-align:text-bottom;/*文字垂直向下对齐*/
二、CSS内补丁
padding:10px; 上下左右为10像素
padding:10px 20px; 上下为10像素,左右为20像素。
Padding:10px 10px 10px 10px 上右下左为10像素
Padding:10px 10px 10px 上、左右、下为10像素。
三、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 : 1pxsolid #6699cc; /*上框线*/
border-bottom :1px solid #6699cc; /*下框线*/
border-left : 1pxsolid #6699cc; /*左框线*/
border-right : 1pxsolid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color :#369 /*设置上框线top颜色*/
border-top-width:1px /*设置上框线top宽度*/
border-top-style :solid/*设置上框线top样式*/
可以缩写为:border:2px dashed #cccccc; 一个2像素虚线灰色的边框。
其他框线样式
solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/
groove /*立体内凸框*/ ridge /*立体浮雕框*/
inset /*凹框*/ outset /*凸框*/
序号中文说明 标记语法
1 宽度{width:长度|百分比| auto}
2 高度{height:数值|auto}
3 浮动{float:left|right|none}
4 清除{clear:none|left|right|both}
5 段首空格 {text-indent:数值|inherit}
6 水平对齐 {text-align:left|right|center|justify}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10行 间 距{line-height:数值|inherit|normal;}
11 单词间距 {word-spacing:数值|inherit|normal}
12 字体变形 {font-variant:inherit|normal|small-cps }
13 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
14 字体变形 {font-size-adjust:inherit|none}
15 书写方式 {writing-mode:lr-tb|tb-rl}参数:lr-tb:从左向右,从上往下 tb-rl:从上往下,从右向左。
16 控制显示 {display:none|block|inline|list-item}
17 控制空白 {white-space:normal|pre|nowarp}
18 目录列表 {list-style:目录样式类型|目录样式位置|url}
layout-flow:vertical-ideographic; 文字竖向排列。
字体属性:(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)
背景属性: (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 属性的了解很模糊*/
列表属性: (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) (裁切)
<!- - ... - -> 用於html文件中的註解
<ahref target=> 指定超鏈結的分割視窗目標
<ahref=#錨的名稱> 設定鏈結錨點的名稱
<ahref=> 設定超鏈結
<aname=錨的名稱> 錨點名稱
<address>....</address> 電子郵件位址文字格式設定
<b>粗體字</b> 粗體字效果
<basetarget=> 分割視窗預設目標
<basefontsize> 更改預設字形大小
<bgsoundsrc=> 加入背景音樂
<big> 顯示大字體
<blink> 閃爍文字效果( ie不適用 )
<bodytext= link= vlink=> 設定文字、鏈結顏色
<body> 顯示本文
<br> 換行
<captionalign=> 設定表格標題位置
<caption>...</caption> 為表格加上標題
<center> 置中對齊
<cite>...<cite>用於引經據典的文字
<code>...</code> 用於列出一段程式碼
<comment>...</comment> 加上註解
<dd> 設定定義列表的項目解說
<dfn>...</dfn>顯示"定義"文字
<dir>...</dir> 列表文字標籤
<dl>...</dl> 設定定義列表的標籤
<dt> 設定定義列表的項目
<em> 強調之用
<fontface> 指定字形
<fontsize> 設定字體大小
<formaction=> 設表單的處理方式
<formmethod=> 設定表單之資料傳送方式
<framemarginheight=> 設定架視視窗的上下邊界
<framemarginwidth=> 設定架視視窗的左右邊界
<framename=> 框架視窗命名
<framenoresize> 鎖住分割視窗的大小
<framescrolling=> 設定分割視窗的捲軸 (yes,no )
<framesrc> 框架內要顯示的文件
<framesetcols=> 將視窗分割成左右垂直的方式
<framesetrows=> 將視窗分割成上下水平的方式
<frameset>...</frameset> 劃分分割視窗
<h1>---<h6>設定文字标题大小
<head>...</head> 標示文件資訊
<hr> 加上分隔線
<html>...</html> 文件的開始與結束
<i>...</i> 斜體字
<imgalign=> 調整圖形影像的位置 ( top,left,right)
<imgalt=> 圖形影像註解
<imgdynsrc= loop=> 加入影片
<imgsrc= height= width=> 插入圖片並預設圖形大小
<imghspace=> 插入圖片並預設圖形的左右邊界
<imglowsrc=> 預載低解析度圖片功能
<imgsrc border=> 設定圖片邊界
<imgsrc=> 插入圖片
<imgvspace=> 插入圖片並預設圖形的上下邊界
<inputtype= name= value=> 在表單中加入輸入欄位
<isindex>...</isindex> 定義查詢用表單
<kbd>...</kbd> 表示使用者輸入文字
<litype>...</li> 列表的項目 ( 可指定符號 )
<marquee>...</marquee> 跑馬燈效果
<menu>...</menu> 條列文字標籤
<metaname="refresh" content= url=> 自動更新文件內容
<multiple> 可同時選擇多項的列表欄
<noframe> 定義不出現分割視窗的文字
<ol>...</ol> 有序號的列表
<option> 定義表單中列表欄的項目
<palign=> 設定對齊方向
<p>...</p> 分段
<person>...</person> 顯示人名
<pre>...</pre> 使用原有排列 ( 格式化文字內容 )
<samp>...</samp> 用於引用字
<select>...</select>在表單中定義列表欄
<small>...</small>顯示小字體
<strike>...</strike> 文字加刪除線
<strong>...</strong> 用於加強語氣
<sup>...</sup> 上標字
<sub>...</sub> 下標字
<tableborder=> 調整表格的寬線高度
<tablecellpadding=> 調整資料欄位之邊界
<tablecellspacing=> 調整表格線的寬度
<tableheight=> 調整表格的高度
<tablewidth=> 調整表格的寬度
<table>...</table> 產生表格的標籤
<tdalign=> 調整表格欄位之左右對齊
<tdbgcolor=> 設定表格欄位之背景顏色
<tdcolspan rowspan=> 表格欄位的合併
<tdnowrap=> 設定表格欄位不換行
<tdvalign=> 調整表格欄位之上下對齊
<tdwidth=> 調整表格欄位寬度
<td>...</td> 定義表格的資料欄位
<textareaname= rows= cols=> 表單中加入多少列的文字輸入欄
<textareawrap=> 決定文字輸入欄是自動否換行
<th>...</th> 定義表格的標頭欄位
<title>...</title> 文件標題
<tr>...</tr> 定義表格美一行
<tt>...</tt>打字機字體
<u>...</u>文字加底線
<ultype>...</ul> 無序號的列表 ( 可指定符號 )
<var>...</var> 用於顯示變數
- 网页基础知识-常用div+css(全)
- DIV+CSS网页布局常用的一些基础知识整理
- DIV+CSS网页布局常用的一些基础知识整理
- css+div网页设计(一)--基础知识
- DIV CSS 网页兼容全搞定
- CSS网页布局常用的基础知识
- CSS网页布局常用的基础知识
- 常用网页布局(div+css)之一
- DIV+CSS常用的网页布局代码
- DIV+CSS常用的网页布局代码
- DIV+CSS网页设计常用布局代码
- 常用DIV+CSS网页制作布局技术
- CSS+DIV(二) 网页常用的布局
- DIV+CSS网页设计常用布局代码
- 【CSS+DIV网页样式与布局】——基础知识总结
- DIV+CSS网页布局常用的方法与技巧
- DIV CSS网页布局常用的方法与技巧
- DIV+CSS网页布局常用的方法与技巧
- CF
- zabbix agent配置遇到的问题(配置tomcat监控)
- @interface注解类定义的几点思考
- Linux 文件权限管理小记
- 深度学习和自然语言处理中的attention和memory机制
- 网页基础知识-常用div+css(全)
- ios开发者证书申请
- Python 中的几种矩阵乘法 np.dot, np.multiply, *
- zabbix 3.0+saltstack实现对日志文件内容监控
- unit14
- 最近看博客看的手都有点痒了哈,所以决定以后一周来写点,主要类容以干货为主。
- C#获取路径
- hdu 1009 FatMouse' Trade(贪心)
- 中继器,集线器,网桥,交换机,路由器,网关的功能和区别