ホームページ > 記事 > ウェブフロントエンド > バックエンド プログラマーがフロントエンド (CSS) について語る レッスン 5: CSS style_html/css_WEB-ITnose
CSS を使用すると、背景として単色を適用したり、背景画像を使用して非常に複雑な効果を作成したりすることもできます。
background-color 属性を使用して要素の背景色を設定できます。このプロパティは、任意の正当な色の値を受け入れます。
例:
p {background-color: gray;}
画像を背景に配置するには、background-image 属性を使用する必要があります。 Background-image プロパティのデフォルト値は none です。これは、背景に画像が配置されないことを意味します。背景画像を設定する必要がある場合は、この属性の URL 値を設定する必要があります:
body {background-image: url(/i/eg_bg_04.gif);}
ページ上に背景画像を並べる必要がある場合は、背景を使用できます。 -repeat 属性。
属性値repeatにより、背景画像の場合と同様に、画像が水平方向と垂直方向の両方に並べて表示されます。 repeat-x とrepeat-y を指定すると、画像はそれぞれ水平方向または垂直方向にのみ繰り返されますが、no-repeat を指定すると、画像をどの方向にも並べて表示できなくなります。
デフォルトでは、背景画像は要素の左上隅から始まります。次の例を参照してください:
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
background-position 属性を使用して、背景内の画像の位置を変更できます。
次の例では、body 要素内の背景画像を中央に配置します。
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
background-position プロパティの値を指定するには、さまざまな方法があります。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長さの値を使用することもでき、最後にパーセント値を使用することもできます。値のタイプが異なると、背景画像の配置が若干異なります。
文書が比較的長い場合、文書を下にスクロールすると、背景画像も一緒にスクロールします。文書が画像を超えてスクロールされると、画像が消えます。このスクロールは、background-attachment プロパティを使用して防ぐことができます。この属性を通じて、画像が視覚領域に対して固定されているため、スクロールの影響を受けないことを宣言できます。
<p class="sycode"> <p class="sycode"> body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } </p> </p>
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
p {text-indent: -5em;}
h1{text-align:center;}
4. 文字間隔
p {word-spacing: 30px;}
5. 文字変換 (text-transform)
属性値:大文字
h4 {letter-spacing: 20px}
6. テキスト装飾
属性値:underline
h1 {text-transform: uppercase}
7. テキストの方向 (direct ion)
【注: inline 要素の場合、direction 属性は Unicode の場合にのみ適用されます。 - bidi 属性は、embed または bidi-override に設定されます。 】ltr
rtl
a {text-decoration: none;}
8. 空白文字 (空白) の処理
空白属性は、ユーザー エージェントのスペース、改行、ソースドキュメント内のタブと文字の処理。詳細:value
改行 | 自動折り返し | pre-line | |
keep | allow | 通常 | |
無視 | 許可 | nowrap | |
無視 | 許可されない | pre | |
Keep | 許可されない | pre-wラップ | |
予約済み | 許可 | 三、字体1、设置字体系列。(font-family)
h1 {font-family: Georgia;} 2、设置字体的尺寸。(font-size)
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;} 3、设置字体风格。(font-style)属性值:
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} 4、以小型大写字体或者正常字体显示文本。(font-variant)
p {font-variant:small-caps;} 5、设置字体的粗细。(font-weight)
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} 四、列表1、将图象设置为列表项标志。(list-style-image)
ul li {list-style-image : url(xxx.gif)} 2、设置列表中列表项标志的位置。(list-style-position)属性值:
ul{list-style-position:inside;} 3、设置列表项标志的类型。(list-style-type)
ul {list-style-type : square} 五、表格1、设置是否把表格边框合并为单一的边框。(border-collapse)属性值:
table{border-collapse:collapse;} 2、设置分隔单元格边框的距离。(border-spacing)
table{border-spacing:10px 50px;} 3、设置表格标题的位置。(caption-side)属性值:
caption{caption-side:bottom;} 4、设置是否显示表格中的空单元格。(empty-cells)属性值:
table{empty-cells:hide;} 5、设置显示单元、行和列的算法。(table-layout)属性值:
table{table-layout:fixed;} 六、轮廓轮廓(outline)是绘制于元素周围的边框线,可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 1、设置轮廓的颜色。(outline-color)
p{outline-color:#00ff00;} 2、设置轮廓的样式。(outline-style)属性值:
p{outline-style:dotted;} 3、设置轮廓的宽度。(outline-width)
p{outline-width:5px;}
|