HTML + CSSのエントリ

はじめに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样式设置的小技

おすすめ

転載: www.cnblogs.com/qqfff/p/12244451.html