Heim > Artikel > Web-Frontend > Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (4) – CSS2 und CSS3

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (4) – CSS2 und CSS3

黄舟Original: 2017-01-22 10:34:091375Durchsuche

Im vorherigen Artikel haben wir erwähnt, dass das Erlernen von HTML5 CSS-Kenntnisse erfordert. Beim Entwerfen der Seite müssen Sie das Layout und die Struktur der HTML5-Seite kennen . Lassen Sie uns zunächst die grundlegende Verwendung von CSS2 überprüfen und dann die Beziehung und den Unterschied zu CSS3 betrachten.

1. Was ist CSS?

Cascading Stylesheet (Cascading Stylesheet) bietet Ausdruck für Webseiten. Gemäß den W3C-Spezifikationen sollten beim Entwerfen einer Webseite die Daten und die Struktur der Webseite in die HTML-Datei geschrieben werden, das Erscheinungsbild der Webseite sollte in die CSS-Datei geschrieben werden und das Verhalten der Webseite sollte ebenfalls geschrieben werden in der .js-Datei geschrieben. Der Zweck besteht darin, die Daten, das Erscheinungsbild und das Verhalten der Webseite zu trennen, um die Codewartung zu erleichtern.

2. CSS-Selektor:

(1) Tag-Selektor (einfacher Selektor)

(2) Klassenselektor

.s1{  
    属性名：属性  
}

Da ist auch ein benannter Klassenselektor, wie folgt:

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

(3) ID-Selektor

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

(4) Selektorgruppierung

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

(5) Ableitung des Selektors

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

Anmerkung in CSS

/*   */

Priorität des Stils:

Externer Stil, schreiben Sie den Stil hinein die .css-Datei
Interner Stil, schreiben Sie den Stil in die .html-Datei
Inline-Stil, schreiben Sie den Stil in style=" "
Wenn ein Konflikt auftritt: Externer Stil

Zwei Schlüsselattribute in CSS:

(1) Das Anzeigeattribut

hat drei Werte:
Block-für-Block-Anzeige die Markierung als Markierung
inline Anzeige der Markierung als Inline-Markierung

keine Nicht anzeigen

<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) Das Positionsattribut
hat drei Werte :
static:Standardwert. Der Browser platziert die Tags auf die Standardart (links-rechts, oben-unten).
Absolut: Offset relativ zum übergeordneten Tag (dem Tag, an dem es sich befindet).
relativ: Platzieren Sie es zuerst auf die Standardmethode und versetzen Sie es dann.

Häufig verwendete Attribute sind wie folgt:

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

Das Obige ist eine grundlegende Zusammenfassung des CSS, das wir zuvor gelernt haben Schauen Sie sich die Eigenschaften von CSS3 an. Öffnen Sie zunächst das CSS3-Referenzhandbuch (Download-Adresse: http://download.csdn.net/detail/lxq_xsyu/6784027)

Schauen Sie sich zunächst die Rahmenfarbe an, um den Rahmen festzulegen

Verwandte Attribute: Rahmenfarbe oben, Farbe Rand rechts, Farbe Rand unten, Farbe Rand links

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

Diese Rahmeneinstellung wird nur im Firefox-Browser unterstützt , und der Laufeffekt ist

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (4) – CSS2 und CSS3

Sie können dem CSS3.0-Referenzbuch entnehmen, dass CSS3 viele Stilattribute hinzufügt. Weitere Informationen finden Sie in diesem Handbuch Wunderschöner Schnittstelleneffekt als CSS2. In Kombination mit JS können wir auch die Produktion von Seitenanimationen realisieren.

Sehen wir uns die Erstellung eines abgerundeten Eckeneffekts für Schnittstellenelemente an

Um diesen Effekt in CSS2 zu erzielen, müssen wir zwei Bilder erstellen. Der Code lautet wie folgt:

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

Obwohl die obige Methode das Problem löst, fügt sie ein redundantes Tag hinzu. Sehen wir uns an, wie man es mit CSS3 löst:

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

Das Obige ist der Inhalt der mobilen HTML5-Entwicklung (4) von Xiaoqiang – CSS2 und CSS3. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (3) – Vergleich zwischen HTML5 und HTML4Nächster Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (3) – Vergleich zwischen HTML5 und HTML4

In Verbindung stehende Artikel

Mehr sehen