Was ist CSS?
Cascading Stylesheet-Sprache (keine Programmiersprache, sondern eine Stylesheet-Sprache)
CSS ist eine HTML-Kosmetik, die speziell zum Modifizieren von HTML verwendet wird.
CSS stellt HTML bereit, daher ist HTML der Hauptteil und CSS ist an HTML angehängt.
So betten Sie CSS ein
1. Inline-Definition<tag style="Stilname: Stilwert;"></tag>
2. Definieren Sie interne StilblöckeSchreiben Sie < style type="text/css"></ style> in das Head-Tag
3. Link zu externen Stildateien Eingeführt in den Head-Tag < link rel="stylesheet" type="text/css" href=" "></ link>
Bei der Web-Frontend-Entwicklung wird am häufigsten die dritte Methode verwendet
CSS-Selektor
- Tag-Selektor
- ID-Selektor
- Klassenselektor
ID-Selektor>Klassenselektor>Tag-Selektor
/*标签选择器，作用于所有此标签*/
div {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
/*id选择器，只作用于id这个元素，同一个网页中id不可重复*/
#id {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
/*class选择器，作用于当前网页中某一类标签*/
.class {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
Gängige CSS-Stile
Es besteht keine Notwendigkeit, sich Stilattributwerte zu merken. Konsultieren Sie einfach die entsprechenden CSS-Handbücher und überprüfen Sie diese jederzeit.
/*隐藏*/
div {
display:none;
display:block;
}
/*文本装饰样式*/
div {
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink;
}
/*列表*/
div {
list-style-type:none;
list-style-type:solid;
list-style-type:circle;
}
/*设置鼠标的悬停效果(hover在使用时:两边不能有空格)*/
span:hover {
color:red;
font-size:100px;
}
/*内外补丁，适用于盒子套盒子场景的盒子定位*/
/*<div id="div1">
<div id="div2">
</div>
</div> 盒子套盒子*/
#div1 {
width:300px;
height:300px;
blackground-color:#00FFFF;
border:solid 1px red;
/*padding-left:20px 打内补丁*/
}
#div2 {
width:100px;
height:100px;
blackground-color:black;
border:solid 1px red;
/*在div2这个节点顶部top打一个补丁，这个补丁高位10px*/
/*margin-top:10px 打外补丁*/
}
/*float浮动效果*/
div {
float:left;
float:right;
}
/*定位样式*/
div {
position:absolute;
top:300px;
left:300px;
}
/*光标样式*/
div {
cursor:pointer;/*变小手样式，尽量不要使用hand有浏览器兼容问题*/
}