Permettez-moi de partager le diagramme du système CSS. C'est très utile. Veuillez le sauvegarder. L'article suivant vous présentera les connaissances d'introduction au CSS. "Système CSS" She et Feuille de style en cascade
Police, Couleur, Espacement des bords, hauteur, largeur, image d'arrière-plan, positionnement de la page Web, page Web flottante...
Sélecteur CSS (accentuation)
Embellir la page Web (texte, ombre, lien hypertexte, liste, dégradé)Modèle de boîteFlottant , positionnement
Animation Web
Avantages du CSS ;
1 Séparation du contenu et des performances
3. utilisez des fichiers CSS indépendants du HTML 5. Utilisez le référencement pour être facilement indexé par les moteurs de recherche
1. Sélecteur
1 Sélectionnez un certain élément ou élément sur la page
Basique. sélecteur
Sélecteur de tag
Sélecteur de classe
sélecteur d'id
Sélecteur de niveau
Sélecteur descendant : derrière un élément
1 2 3 | body p{
background: #c56b22;
}
|
Copier après la connexion
2. Sélecteur enfant
-
1 2 3 4 | body>p{
background: deepskyblue;
}
|
Copier après la connexion
3. Sélecteur de frères et sœurs adjacents1 2 3 4 | .active + p{
background: orange;
}
|
Copier après la connexion
4. Sélecteur universel
1 2 3 4 | .active~p{
background: aquamarine;
}
|
Copier après la connexion
- 2. Trois. Embellissez la page Web
1. Style de police
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ul li:first-child{
background: #c56b22;
}
ul li:last-child{
background: aqua;
}
p:nth-child(1){
background: antiquewhite;
}
p:nth-of-type(2) {
background: #b04a6f;
}
|
Copier après la connexion
2. Style de texte
CouleurAlignement du texte
Retrait de la première ligne Hauteur de la ligneCentre de texte sur une seule ligne ed de haut en bas !
DécorationAlignement horizontal de l'image du texte : est vertical
3, ombre
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!--
font-family:字体
font-size:字体大小 px代表像素,em代表一个字的缩进大小
font-weight:字体粗细 最大800,相当于bolder
color:字体颜色
-->
<style>
body{
font-family: Arial;
}
h1{
font-size: 40px;
}
p[ class =p1]{
font-weight: bold;
color: #b04a6f;
}
</style>
<style>
p{
font:oblique bold 20px Arial;
}
</style>
|
Copier après la connexion
4, pseudo-classe
1 2 3 4 5 6 7 8 9 10 11 12 | <style>
#price{
text-shadow: #c5527d 5px -5px 1px;
}
</style>
<body>
<p id= "price" >
¥30
</p>
</body>
|
Copier après la connexion
color rgb rgba
- 5, Liste
text-align=center
text-indent:2em
1) Fondline-height:
Couleur de fondtext-decoration:
/middle
Image de fond/vertical-align: middle;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <style>
a{
text-decoration: none;
color: #000000;
}
a:hover{
color: #c56b22;
font-size: 20px;
}
a:active{
color: #c5527d;
}
</style>
<body>
<a href= "#" >
<img src= "images/1.jpg" alt= "图片加载失败" >
</a>
<p>
<a href= "#" >《从0到1开启商业与未来的秘密》</a>
</p>
<p>
作者:[美]<a href= "#" > 彼得·蒂尔,布莱克·马斯特斯(Blake Masters)</a>著,
<a href= "#" >高玉芳</a> 译
</p>
</body>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style>
div{
width: 800px;
height: 500px;
border: 1px solid #fcb4dc;
background-image: url( "image/1.jpg" );
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
|
Copier après la connexion
2) Dégradé
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #fcb4dc url( "../image/d.jpeg" ) 250px 4px no-repeat;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url( "../image/r.jpeg" );
background-repeat: no-repeat;
background-position: 200px 1px;
}
|
Copier après la connexion
3) Modèle de boîte
Bordure
Marges intérieures et extérieures Bordure du coin du cercle
4) Problème d'effondrement de la bordure parent
1 2 | background-color: #A9C9FF;
background-image: linear-gradient(60deg, #A9C9FF 0%, #FFBBEC 100%);
|
Copier après la connexion
Solution :
- Augmenter la hauteur de l'élément parent
Copier après la connexion
Ajouter un p vide tag, effacez le 1 2 3 | #father{
border:1px #000 solid;
height:800px}
|
Copier après la connexion
flottant Copier après la connexion
overflow1 2 3 4 | .clear{
clear:both;
margin:0;
padding:0;}
|
Copier après la connexion
- La classe parent ajoute une pseudo classe
1 | #在父级元素中添加一个 overflow:hodden;
|
Copier après la connexion
Si elle flotte, elle se détachera du flux de documents standard, nous devons donc résoudre le problème de l'effondrement de la bordure parent - 6. Positionnement
Positionnement relatif
Spécifie le décalage par rapport à la position d'origine. S'il s'agit d'un positionnement relatif, il sera toujours dans le flux de documents standard. position: relative
1 2 3 4 | #father:after{
content:'';
display:block;
clear:both;}
|
Copier après la connexion
Positionnement absolu
- position:absolue
1 2 3 4 | top:-20px;
left:20px;
bottom:-10px;
right:20px;
|
Copier après la connexion
positionnement fixe- position: fixe
z-index
niveau, la valeur par défaut est 0 , le plus élevé est illimité
1 2 3 4 5 | 定位:基于xxx定位,.上下左右~
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移~
3、在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
|
Copier après la connexion
Apprentissage recommandé :
Tutoriel vidéo CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!