Xiaoqiang の HTML5 モバイル開発への道 (4) - CSS2 と CSS3-H5 チュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発への道 (4) - CSS2 と CSS3

黄舟

リリース： 2017-01-22 10:34:09

オリジナル

1413 人が閲覧しました

前回の記事で、HTML5 を学ぶには CSS の知識が必要であると述べました。ページをデザインする際には、HTML5 ページのレイアウトと構造を知る必要があります。非常に豪華で美しいインターフェイスを実現するには、CSS を使用する必要があります。まずはCSS2の基本的な使い方を確認してから、CSS3との関係や違いを見ていきましょう。

1.CSSとは何ですか?

カスケードスタイルシート (カスケードスタイルシート) は、Web ページのプレゼンテーション形式を提供します。 W3Cの仕様によれば、Webページをデザインする際には、Webページのデータと構造をHTMLファイルに記述し、Webページの外観をCSSファイルに記述し、Webページの動作を.js ファイルに書き込まれます。この目的は、Web ページのデータ、外観、動作を分離して、コードのメンテナンスを容易にすることです。

2. CSS セレクター:

(1) タグセレクター (単純なセレクター)

(2) クラスセレクター

.s1{  
    属性名：属性  
}

ログイン後にコピー

次のような名前付きクラスセレクターもあります:

 div.s1{  
    font-size;120px;  
}

ログイン後にコピー

(3 ) ID セレクター

#d1{  
    font-size:italic;  
    font-weight:900;  
}

ログイン後にコピー

(4) セレクターのグループ化

h1,h2,h3{   //用逗号隔开  
<span style="white-space:pre">  </span>color:bllue;  
    }

ログイン後にコピー

(5) セレクターの導出

#d2 p{  
span style="white-space:pre">   </span>color:red;  
font-size:300;  
    }

ログイン後にコピー

CSS 内のコメント

/*   */

ログイン後にコピー

スタイルの優先順位:

外部スタイル、スタイルを
.css ファイルの内部スタイルに書きます。 .html ファイル内のスタイル
インラインスタイル、style=" "
競合が発生した場合: 外部スタイル <内部スタイル<インラインスタイル。

CSS の 2 つの主要な属性:

(1) 表示属性

には 3 つの値があります:
block マークをブロックマークとして表示する
inline マークをインラインマークとして表示する

none 表示しない

<html>  
    <!--display属性-->  
    <head>  
        <style>  
            #d1{  
                width:200px;  
                height:100px;  
                background-color:red;  
                color:white;  
                font-size:40px;  
                display:inline; <!--改为行内标记-->  
            }  
            #d2{  
                width:200px;  
                height:100px;  
                background-color:blue;  
                color:white;  
                font-size:40px;  
                display:inline; <!--改为行内标记-->  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello1</div>  
    <!--标记d2会另起一行显示-->  
        <div id="d2">hello2</div>  
    </body>  
</html>

ログイン後にコピー

(2) 位置属性
には 3 つの値があります:
static: デフォルト値。ブラウザはタグをデフォルトの方法 (左から右、上から下) で配置します。
絶対: 親マーク (マークが配置されているマーク) を基準としたオフセット。
相対: 最初にデフォルトの方法で配置し、次にオフセットします。

一般的に使用される属性は次のとおりです:

 (1)文本相关的属性  
font-size:30px; //字体大小  
font-style:normal(正常)/italic(斜体)  
font-weight:800; //100－900 (粗细)  
font-family:"宋体"; //字体  
text-align:left/center/right;  //文本水平对齐方式  
line-height:30px;  //行高  一般和容器的高值相同放在中间  
cursor:pointer/wait;   //光标的形状  
    (2)背景相关的属性  
background-color:red;  //背景颜色  
background-color:#88eeff;  //RGB格式颜色设置  
background-color:rgb(100,100,100);  //可以用这种格式输入十进制数的颜色值  
background-image:url(images/t1.jpg);  //背景图片  
background-repeat:no-repeat/repeat-x/repeat-y;   //平铺方式  
background-position:30px 20px; //(水平和垂直)背景位置  
background-attachment:scroll(默认)/fixed;  //依附方式    
也可以同时设置背景的多个特性：  
background:背景颜色 背景图片 平铺方式 依附方式  水平位置 垂直位置；  
    (3)边框  
border-left:1px solid red;  
border-right:2px dotted black;  
border-bottom:  
border-top:  
border:1px solid red;  
    (4)定位  
width:100px;  
height:200px;  
margin  //外边距  
margin-left:20px;  
margin-right:30px;  
margin-top:40px;  
margin-buttom:50px;  
可以简化为：margin:top right bottom left;  
      margin:40 30 50 20;  
padding  //内边距  
padding-left:  
padding-right:  
padding-top:  
padding-buttom:  
可以简化为：padding:top right bottom left;  
内边距会将父标记撑开  
     (5)浮动  
取消标记独占一行的特性  
float:left/right;  //向左，向右浮动  
clear:both;  //清除浮动的影响  
     (6)其他  
list-style-type:none;除掉列表选项的小圆点。  
text-decoreation:underline;    //给文本加下划线  
     (7)连接的伪样式  
a:link{color:red} 没有访问时  
a:visited{color:blue} 鼠标放上时  
a:action{color:green} 鼠标点击时  
a:hover{color:yellow} 鼠标离开时

ログイン後にコピー

上記は、これまでに学習した CSS の基本的な概要です。まず、css3 のリファレンスマニュアルを開きます (ダウンロードアドレス: http://download.csdn.net /detail/lxq_xsyu/6784027)

まずは border-color 設定の border を見てみましょう

関連プロパティ: border-top-color、border-right-color、border-bottom-color、border -left-color

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="utf-8" />  
<meta name="robots" content="all" />  
<meta name="author" content="Tencent-ISRD" />  
<meta name="Copyright" content="Tencent" />  
<title>Border-color</title>  
<style>  
    div{  
        border: 8px solid #000;  
        -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        padding: 5px 5px 5px 15px;  
    }  
</style>  
</head>  
<body>  
<div>在Firefox浏览器里能看到边框颜色渐变效果</div>  
</body>  
</html>

ログイン後にコピー

この設定は、Firefox ブラウザーでのみサポートされています。実行中の効果は、css3 で多くのスタイル属性を追加できることがわかります。このマニュアルを参照して、css2よりも豪華なインターフェイス効果を作成できます。jsと組み合わせると、ページアニメーションも実現できます。

次に、インターフェース要素の角丸効果の作成を見てみましょう Xiaoqiang の HTML5 モバイル開発への道 (4) - CSS2 と CSS3

CSS2 でこの効果を実現するには、2 つの画像を作成する必要があります。コードは次のとおりです:

<html>  
    <head>  
        <style type="text/css">  
            a{  
                display:block;  
                height:40px;  
                float:left;  
                font-size:1.2em;  
                padding-right:0.8em;  
                background:url(images/headerRight.png) no-repeat scroll top right;  
            }  
              
            a span{  
                background:url(images/headerLeft.png) no-repeat;  
                display:block;  
                line-height:40px;  
                padding-left:0.8em;  
            }  
        </style>  
    </head>  
    <body>  
        <a href="#"><span>Box Title</span></a>  
    </body>  
</html>

ログイン後にコピー

上記の方法で問題は解決しますが、冗長なタグが追加されます。css3 を使用して解決する方法を見てみましょう:

<html>  
    <head>  
        <style type="text/css">  
            a{  
                float:left;  
                height:40px;  
                line-height:40px;  
                padding-left:0.8em;  
                padding-right:0.8em;  
                border-top-left-radius:8px;  
                border-top-right-radius:8px;  
                background-image:url(image/headerTiny.png);  
                backgrount-repeat:repeat-x;  
            }  
        </style>  
    </head>  
    <body>  
        <a href="#"><span>Box Title</span></a>  
    </body>  
</html>

ログイン後にコピー

上記は Xiaoqiang の HTML5 モバイル開発パス (4) - — CSS2 および CSS3 の内容さらに関連する内容については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。