Maison > Article > interface Web > Le chemin de Xiaoqiang vers le développement mobile HTML5 (4) - CSS2 et CSS3

Le chemin de Xiaoqiang vers le développement mobile HTML5 (4) - CSS2 et CSS3

黄舟original: 2017-01-22 10:34:091377parcourir

Dans l'article précédent, nous avons mentionné que l'apprentissage du HTML5 nécessite une connaissance du CSS. Lors de la conception de la page, vous devez connaître la mise en page et la structure de la page HTML5. Pour obtenir une interface très belle et magnifique, vous devez utiliser CSS. . Passons d'abord en revue l'utilisation de base de CSS2, puis examinons la relation et la différence avec CSS3.

1. Qu'est-ce que le CSS ?

La feuille de style en cascade (feuille de style en cascade) fournit une expression aux pages Web. Selon les spécifications du W3C, lors de la conception d'une page Web, les données et la structure de la page Web doivent être écrites dans le fichier HTML, l'apparence de la page Web doit être écrite dans le fichier CSS et le comportement de la page Web doit être écrit dans le fichier .js. Le but est de séparer les données, l'apparence et le comportement de la page Web pour faciliter la maintenance du code.

2. sélecteur css :

(1) sélecteur de balises (sélecteur simple)

(2) sélecteur de classe

.s1{  
    属性名：属性  
}

Là est également un sélecteur de classe nommé, comme suit :

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

(3) sélecteur d'identifiant

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

(4) Regroupement de sélecteurs

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

(5) Dérivation du sélecteur

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

Annotation en CSS

/*   */

Priorité du style :

Style externe, écrire le style en le fichier .css
Style interne, écrivez le style dans le fichier .html
Style en ligne, écrivez le style à l'intérieur de style=" "
Quand un conflit survient : Style externe

(1) L'attribut d'affichage

a trois valeurs :
affichage bloc par bloc la marque en tant que marque
inline Afficher la marque en tant que marque en ligne

aucun Ne pas afficher

<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) L'attribut position
a trois valeurs :
statique : valeur par défaut. Le navigateur placera les balises de la manière par défaut (gauche-droite, haut-bas).
Absolu : Décalage par rapport à la balise parent (la balise où elle se trouve).
relatif : placez-le d'abord de la manière par défaut, puis décalez-le.

Les attributs couramment utilisés sont les suivants :

 (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} 鼠标离开时

Ce qui précède est un résumé de base du CSS que nous avons appris auparavant. un aperçu des caractéristiques de CSS3. Ouvrez d'abord le manuel de référence CSS3 (adresse de téléchargement : http://download.csdn.net/detail/lxq_xsyu/6784027)

Premier regard sur border-color pour définir la bordure.

Attributs associés : 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>

Ce paramètre de bordure n'est pris en charge que sur le navigateur Firefox , et l'effet d'exécution est

Le chemin de Xiaoqiang vers le développement mobile HTML5 (4) - CSS2 et CSS3

Vous pouvez voir dans le livre de référence css3.0 que css3 ajoute de nombreux attributs de style. Nous pouvons nous référer à ce manuel pour en créer un plus. effet d'interface magnifique que CSS2. S'il est combiné avec js, nous pouvons également réaliser une production d'animation de page.

Jetons un coup d'œil à la création d'un effet de coin arrondi pour les éléments d'interface

Afin d'obtenir cet effet en CSS2, nous devons créer deux images. Le code est le suivant :

<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>

Bien que la méthode ci-dessus résolve le problème, elle ajoute une balise redondante. Voyons comment le résoudre en utilisant 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>

Ce qui précède est le contenu du développement mobile HTML5 de Xiaoqiang (4) - CSS2 et CSS3 Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (3) - Comparaison entre HTML5 et HTML4Article suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (3) - Comparaison entre HTML5 et HTML4

Articles Liés

Voir plus