2013-09-30

CSS:TIPS

◆スタイル設定の方法

参考:
http://www.kanzaki.com/docs/html/htminfo17.html

1.外部ファイルによるスタイル設定

<link rel="stylesheet" href="default.css" type="text/css" />


2.head要素内のstyle要素で指定

  <style type="text/css">
    p  {color: red}
    h2 {color: blue; font-size: 120%}

  </style>

3.インラインstyle属性

<p style="color: red"></p>


◆ブロックレベル要素とインライン要素

ブロックレベル要素:
見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識される。

<div>、<table>、<p>、<h1>-<h6>、<hr>、
<address>、<blockquote>、<center>、<dl>、<fieldset>、<form>、<noframes>、<noscript>、<ol>、<pre>、<ul>


インライン要素:
主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。

<a>、<img>、<span>、<br>、
<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

◆画像(IMG)を中央揃えにする

インライン要素の text-align は親のブロック要素で定義する

<div class="center"><img src="icon.jpg" /></div>
<div class="center"><a></div>

.center{
    text-align: center;
}

◆ <td>を均等に割り付ける

<table style="table-layout: fixed;">

◆margin、paddingの初期化

* { margin: 0; padding: 0; } を先頭に記載する。*の意味は、「すべて」。
(使うタグだけを初期化した方が効率的という考え方もある。)