CSSの属性

主に、色の設定、文字の設定、線の設定、ブロックラベルの大きさの設定があります。

color

メインの色を決めます。P,BODY,SPAN,DIV,BORDER,HR等に使います。

color:red;

background-color

背景の色を決めます。

font-size

文字の大きさを決めます。
記号指定、xx-large,x-large,large,medium,small,x-small,xx-small
相対指定、larger,smaller
物理指定、pt,pc,in,cm,mm
その他指定、em(その時のフォントサイズ),ex(xの高さ),px(ピクセル)
よく使うのは、em,pxくらいでしょう。

font-weight

文字の太さを決めます。
100,200,...,900の数字指定、
normal,bold,bolder,lighterの記号指定があります。
よく使うのは、normal,boldくらいです。

font-style

文字を斜めにします。
normal(斜めにしない),italic(斜め),oblique(とても斜め)

font-family

フォントを決めます。 "Times New Roman","MS Pゴシック"等のフォント名の指定と、
serif,sans-serif,cursive,fantasy,monospaceのフォントファミリーがあります。フォント名だけだと、ない場合があるので、フォントファミリーも指定しておきましょう。

font-family:"Times New Roman",serif;

text-align

文字の位置です。left,right,center,justifyから指定します。

text-indent

字下げします。1em,1exあたりがよくつかわれるでしょうか。%での指定もできます。

text-decoration

線を引きます。none(引きません),underline(下線),overline(上線),line-through(取り消し線)

line-height

行の高さを指定します。行間になります。line-height:1.3だと、1.3倍の高さになります。

border-color

線の色

border-width

枠の太さ

border-style

枠のスタイル。none(非表示。初期値),dotted(点線),dashed(破線),solid(実線),double(二重線),groove(溝),ridge(盛上り),inset(段低),outset(段高)

余白 margin padding

ブロック(枠)の外の余白が、marginで、内側がpaddingです。

:first-letter , :first-line

最初の一文字/最初の一行に対しての指定です。使い方が少し変ります。入れ子はできません。

P:first-letter {font-size:1.2em;}

リンク(A)の指定

ハイパーリンクの指定です。入れ子はできます。
A: ハイパーリンク全部。
A:link(未リンク)
A:visited(訪問済リンク)
A:active(マウスを押す時)
A:hover (マウスを重ねた時)

cursor

カーソルの形を変えます。
help,move,wait,text,crosshair,hand
n-resize,w-resize,s-resize,e-resize,nw-resize,ne-resize,se-resize,ne-resize

cursor:help

外部CSSから別のCSSを呼びだす

@import url(basic.css);

CSSの一行目に書きます。;がないとうまくいきません。

位置・省略

border,padding,marginは、位置が指定できます。
border-left:数字等 で指定します。leftの他、right,top,bottomです。

margin-right:40%;

位置をまとめて設定できます。border-color,padding等です。数によって位置の指定が変わります。
border-color:全部
border-color:上下 左右
border-color:上 左右 下
border-color:上 右 下 左

border-color:silver maroon black;

borderやfontは、それだけでいろいろ指定できます。

border:solid 2px red
font:bold italic;
Next : 次のステップへ
Pre  : 前のステップへ
 Up  : HTMLに戻る
Home : ホームに戻る

Presented by Rei

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!
無料ホームページ 無料のクレジットカード 海外格安航空券 海外旅行保険が無料! 海外ホテル