ホームページ > 記事 > ウェブフロントエンド > HTML の基本的な知識。CSS スタイルシートとスタイル属性について詳しく説明します。

HTML の基本的な知識。CSS スタイルシートとスタイル属性について詳しく説明します。

php中世界最好的语言オリジナル: 2018-01-22 10:43:432060ブラウズ

今回はCSSのスタイルシートとスタイル属性について詳しくご紹介しますCSSのスタイルシートとスタイル属性を使用する際の注意点を一つ紹介します。時間。

位置: 固定

ロック位置 (ブラウザーに対する相対的な位置)。一部の Web サイトの右下隅にあるポップアップウィンドウなど。

2. 位置: 絶対

絶対位置:

1. 外側のレイヤーに位置: 絶対 (または相対) がない場合、p はブラウザを基準にして配置されます (b は 50 ピクセルです)。ブラウザの右端からの距離、下の境界線は 20 ピクセルです)。

2. 外側のレイヤーには、position: 絶対 (または相対) があり、下の図に示すように、p は外側の境界線に対して相対的に配置されます (d の右端から 50 ピクセル、d の下端から 20 ピクセル)。）。

3. 位置:相対

相対位置:

以下に示すように、この p を含む p の特定の位置を基準に固定されます。外側のレイヤーにそれが含まれていない場合、相対位置はブラウザーに対して固定されます。

4. レイヤー化 (

z-index)

Z 軸方向のレイヤー化は、レイヤーの数が多いほど高いと理解できます。

上記の相対的な例では、aa が a をカバーしていることがわかります。これは、後で記述されたコードの表示レベルが高いためです。では、コードの順序を変更せずに、a が aa をカバーするにはどうすればよいでしょうか。以下の通り:

5. float: left, right

Left と right の位置 (左、上) を指定する必要はなく、ブラウザーに対して直接相対的です。アウターが折り返されている場合は、アウターpから1行を除いた位置の左上または右上が表示されます。

追加: 1.

overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；
<p >
</p>   //截断流

2. カーソル: ポインタマウスがポイントしたときの形状

3. 半透明効果:

    <p class="box">透明区域<p>
             在样式表中的代码为：
             .box
             {
             opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
             }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style type="text/css">  
.a   
{   
    border:5px solid blue;   
    width:1000px;   
    height:100px;   
    margin:10px;   
    left:150px;   
    top:80px;   
    position:absolute;}   
.b   
{   
    border:5px solid blue;   
    width:240px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:200px;   
    position:absolute;}   
.c   
{   
    border:5px solid blue;   
    width:740px;   
    height:300px;   
    margin:10px;   
    left:410px;   
    top:200px;   
    position:absolute;}   
.d   
{   
    border:5px solid blue;   
    width:740px;   
    height:200px;   
    margin:10px;   
    left:410px;   
    top:520px;   
    position:absolute;}   
.e   
{   
    border:5px solid blue;   
    width:240px;   
    height:1500px;   
    margin:10px;   
    left:150px;   
    top:420px;   
    position:absolute;}   
.f   
{   
    border:5px solid blue;   
    width:240px;   
    height:150px;   
    margin:10px;   
    left:150px;   
    top:1940px;   
    position:absolute;}   
.g   
{   
    border:5px solid blue;   
    width:740px;   
    height:1350px;   
    margin:10px;   
    left:410px;   
    top:740px;   
    position:absolute;}       
.h   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2110px;   
    position:absolute;}   
.i   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2330px;   
    position:absolute;}   
</style>  
</head>  
  
<body bgcolor="#F0F0F0">  
<p class="a">a</p>  
<p class="b">b</p>  
<p class="c">c</p>  
<p class="d">d</p>  
<p class="e">e</p>  
<p class="f">f</p>  
<p class="g">g</p>  
<p class="h">h</p>  
<p class="i">i</p>  
</body>  
</html>

これらの事例を読んだ後、あなたはこの方法を習得したと思います。 php 中国語 Web サイトのその他の関連記事にご注意ください。

HTML の基本的な知識。CSS スタイル シートとスタイル属性について詳しく説明します。

関連記事

HTML の基本的な知識。CSS スタイルシートとスタイル属性について詳しく説明します。