Heim >Web-Frontend >H5-Tutorial >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:091416Durchsuche
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 Zwei Schlüsselattribute in CSS: (1) Das Anzeigeattribut hat drei Werte: keine Nicht anzeigen (2) Das Positionsattribut Häufig verwendete Attribute sind wie folgt: 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 Diese Rahmeneinstellung wird nur im Firefox-Browser unterstützt , und der Laufeffekt ist 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: 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: 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).
Interner Stil, schreiben Sie den Stil in die .html-Datei
Inline-Stil, schreiben Sie den Stil in style=" "
Wenn ein Konflikt auftritt: Externer Stil
Block-für-Block-Anzeige die Markierung als Markierung
inline Anzeige der Markierung als Inline-Markierung <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>
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. (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} 鼠标离开时<!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>
<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><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>
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen