はじめに1html
<META> HTMLドキュメントに関するメタ情報を定義します。<リンク>定義は、外部リソースとの関係を文書化します。文書で定義された<スタイル>スタイル情報。<スクリプト>カスタムクライアントスクリプト
2タグ(1)、セマンティックコード
<P> </ P>段落
<Hxの> </ HX>タイトル
上の<em>の</ em>のイタリック強調
太字の<STRONG> </ strong>をより強調
別途設けられた<スパン> </ span>のスタイル
<Q> </ Q>ショートリファレンス ""
<BLOCKQUOTE> </ BLOCKQUOTE>長い引用され、テキストを中心に
<BR/>入力してください
&NBSPに、スペース
<HR />水平分割
<アドレス> </アドレス>アドレスイタリック
<CODE> </ code>のコードの行に貼り付けます
コードの<PRE> </ PRE>行
3タグ(2)
<UL>
<LI> </ LI>
順序に関係なく、</ UL>ソート、
<OL>
<LI> </ LI>
</オル>、ソート開始1
<DIV> </ div>区画板、論理的に独立したサブアウト
<DIVのID = "xxxは"> </ div>のプレートに命名します
<表要約=「」>テーブル、テーブル(図示せず)のプロファイルを記述し
<キャプション> </キャプション>表のタイトル
<TBODY>ブロック状、板
<TR> <TH> </番目> </ TR>表の行/テーブルヘッダ
<TR> <TD> </ TD> </ TR>表の行/テーブルセル
<TR> <TD> </ TD> </ TR>
</ TBODY>
</ TABLE>
ラベル4(3)
<a aのhref = </a>に
<a name="" title=""> </a>の锚点
HREF
題名
ターゲット=」_ブランク」
mailto:XX; AA CC = XX&BCC = XX&被写体= XX&本体= XX
<IMG SRC =」」ALT =」」タイトル=」」> </ IMG>
5フォームタグを使用して、ユーザーとの対話
<FORM>メソッド= "" acion = "" </フォーム>フォーム/モードpostget /ようsave.phpを転送するように作用します
<入力タイプ=「テキスト」名前=「MYNAME」/>タグの入力テキストボックス
<入力タイプ=「パスワード」名前=「合格/」>パスワードパスワードボックス
タイプ=「」タイプ
テキスト、テキストボックス
パスワードパスワードボックス
送信ボタンを提出
リセットリセットボタン
ラジオラジオボタン
=「チェック」がチェック=「デフォルト」チェックボックス、デフォルト値の種類を設定
名前=「」デーモンASP、PHPでの使用のためにという名前のテキストボックス
ボタンテキストのデフォルト値を設定する値=「」テキストボックス
<Testarea行= "10" COLS = "50">ここで...... </ TEXTAREA>複数行のテキスト行colsの列ラインを入力します
<select>のドロップダウンリストボックス
<「選択」オプション値=「XX」を選択=> XX </ option>の設定デフォルトを選択=、サーバーに送信された値の値を「選択」
<オプション値=」CC」> CC </オプション>
</ select>の
<select multiple=”multiple”></select>下拉列表多选,复合multiple
<input type=”submit” vaue=”提交” name=”submit”>
<input type=”reset” value=”重置” name=”reset”>
<label for=”控件id名称”></label>注释,与id关联,for与id对应
6认识css
/**/
7嵌入式css
<style type=”text/css”>
p{ color : red };
</style>
<p style=”color:blue”></p>
<link href=”” rel=”stylesheet” type=”text/css”>
8选择器
.class多次,同时多个样式
{
color : red
};
…
<span class=”a”></span>
#id唯一,只能一个样式样式
{
color : red
};
…
<span id=”a”></span>
*{}
a:hover{}
9.继承
p{color:red;}具有
p{border:1px solid red;}不具体
10.排版
(文字排版——字体)font-family:"宋体",sans-serif;
(文字排版——字号)font-size:12px;color:#666
(文字排版——粗体)font-weight:bold
(文字排版——斜体)font-style:italic;
(文字排版—下划线)text-decoration:underline;
(文字排版—删除线)text-decoration:line-through
(段落排版——缩进)text-indent:2em;
(段落排版—行间距)line-height:2em;
(段落排版—字间距)letter-spacing:50px
(段落排版——对齐)text-align:center;
11.模型
块级元素<div>、 <p>、<h1>、<form>、<ul> 和 <li>
display:block;
内联元素<span>、<a>、<label>、<strong>、<em>
display:inline;
内联块状元素<img>、<input>
display:inline-block
盒子模型
盒子里padding内边距、盒子与盒子的margin外边距
盒子边框border
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:
div{
border:2px solid red;
}
上面是 border 代码的缩写形式,可以分开写:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意:
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用像素(px)。
现在有一个问题,如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css 样式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒子填充padding
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
盒子边界
元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:
div{margin:20px 10px 15px 30px;}
也可以分开写:
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写:
div{ margin:10px;}
如果上下边界一样为10px,左右一样为20px,可以这么写:
div{ margin:10px 20px;}
总结一下:padding和margin的区别,padding在边框里,margin在边框外。
12.css布局模型
在网页中,元素有三种布局模型:
1、流动模型(Flow)(默认)
2、浮动模型 (Float)
3、层模型(Layer)
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
absolute和relative
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
position:absolute;
width:99%;
bottom:0px;
}
13.css代码缩写,减少带宽
(斜体)font-style:italic;
(文字参数)font-variant:small-caps;
(排版粗体)font-weight:bold;
(字号,颜色)font-size:12px;
(行高)line-height:1.6em;
(字体) font-family:"宋体",sans-serif;
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意:
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
14.颜色值
在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:
1、英文命令颜色
前面几个小节中经常用到的就是这种设置方法:
p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
配色表:
长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
2、em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
下面注意一个特殊情况:
但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
3、百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
15.css样式设置的小技