静的 Web 開発 CSS_html/css_WEB-ITnose

 

二章 CSS

1节
CSS介绍

CSS(Cascading Style Sheets) //cascade级联,串联
CSS由两个部分组成:选择器，以及一条或多条声明
selector{declaration1;declaration2;...}

一级标签

 

2节
CSS定义三种样式

1 内联式

一级标题

2 嵌入式 //一节中的样式
3 外联式
//新建一个css @charset "UTF-8"; h1{font-size:36px;color:pink;}
//指定关联文件的类型，指定关联文件与当前文件的关系，引用关联文件
//如果通过嵌入式和外部引入同时对一个 选择器进行了修饰，以最下面的一个样式为准 (最后执行的样式会覆盖前面的样式)
//外联式又有两种:
1
属于XHTML
当页面被加载时，link引入的会同时被加载
所有浏览器都支持
支持通过dom进行操作
2 @import url("*.css");
属于CSS特有的,必须嵌套到

7セクション
CSSテキスト

text-indent:2em indent
text-align テキスト配置
単語間隔
文字間隔 文字間隔
text-transform 文字変換
text-decoration テキスト装飾 なし 下線 上線 ラインスルーflash
white-space は通常の空白を処理します

8セクション
CSSフォント

font-familyフォント形式
font-styleフォントスタイルnormal italic italic oblique oblique
font-variant スモールキャップを設定する
font-weightnormal太字 100-900
font-size

これも斜体です、斜体と同じです

9セクション
CSSリンク

//ハイパーリンク 下線を削除しますデフォルトで、ホバー時に下線を追加します
a{text-decoration:none;}
a:hover{text-decoration:underline;}

10 セクション
CSS リスト

ul{list-style:none ;} / /スタイルなし
ul{list-style-position:center,center;}
ul{list-style-type:square;}
ul li{list-style-image:url(...);}

セクション11
CSSテーブル

border-collapse 表の枠線を1つの枠線に結合する（折りたたみ）かどうかを設定します
border-spacing 分割したセル間の距離を設定します
vertical-align 垂直方向の配置上下中央
caption-side を設定します表のタイトルの位置
empty-cells 表内の空のセルを表示するかどうかを設定します
table-layout セル、行、列を表示するアルゴリズム（レイアウト）を設定します

12セクション
CSS ボックスモデル (ボックスモデル)

ボーダーマージン
パディング内側マージン
マージン外側マージン

ボックスモデルは、要素ボックスが要素コンテンツ、パディング、ボーダー、外側マージンをどのように処理するかを指定します
tr{border: 1px Solid #333 ;} //順序なし 破線 破線
div{width:200;height:100;border:2px 破線 #333;padding:5px;margin=10px;}
//Firefox---レイアウト---

セクション 13
CSS アウトライン (アウトライン)

//アウトラインは要素の周囲に引かれる線で、境界線の外側に位置し、要素を強調表示できます
//アウトライン属性は、要素のスタイル、色、幅を指定します要素

アウトラインカラー アウトラインスタイル アウトライン幅
div{幅: 200px;高さ: 100px;border:solid #CCC 5px;outline:solid #F00 2px;}
input{outline:none;}
input: focus{border: green 1px Solid;} //入力タグがフォーカスを取得したときのスタイル

14セクション
margin&padding

padding パディング（長さの値、パーセント、負の値は使用できません、デフォルトは設定されています）上下左右の値)
padding-top / /特定の方向を指定して特定のサイズを設定します
paddng-left
padding-right
padding-bottom

#div1{width:200px;height:100px ;border:赤の破線 2px;padding:5px 10px 20px 30px;margin :10px;}
#div2{width:200px;height:100px;border:赤の破線 2px;margin-top:-10px;margin-left:10% ;}
#div3{幅:50;高さ:50px;背景:グレー;マージン-上:20%;}
#div4{幅:960x;高さ:40px;背景:#333;マージン-左:10px;マージン:0 auto;}

margin //負の値も表示可能

//位置---???---