Maison  >  Article  >  interface Web  >  Résumé du nouveau contenu en HTML5+CSS3

Résumé du nouveau contenu en HTML5+CSS3

零到壹度
零到壹度original
2018-03-24 10:02:561716parcourir

En parlant de H5+C3, pensez-vous qu'il y a trop de choses ? Aujourd'hui, j'ai fait un résumé.

Que sont les sélecteurs CSS3 ?
Sélecteur d'attribut, sélecteur de pseudo-classe, sélecteur de pseudo-éléments.


Quelles sont les nouveautés de CSS3 ?
1. Couleur : ajout du mode RGBA, HSLA
2. Ombre du texte (text-shadow,)
3. Bordure : coins arrondis (bordure-radius) ombre de la bordure : boîte-ombre 4. Modèle de boîte : box-sizing
5. Background : background-size Définir la taille de l'image d'arrière-plan background-origin Définir l'origine de l'image d'arrière-plan
background-clip Définir la zone de recadrage du image d'arrière-plan sur ", "La séparation peut définir plusieurs arrière-plans pour une mise en page adaptative
6. Dégradé : dégradé linéaire, dégradé radial
7 Transition : une transition, une animation peut être réalisée
Animation personnalisée9 . Le seul pseudo-élément introduit dans CSS3 est : :selection
10 Requêtes multimédias, disposition multi-colonnes
12. y) rotate( x, y) skew(x, y) scale(x, y)
13. Conversion 3D


Quelles sont les nouvelles pseudo-classes en CSS3 ?


:first-child sélectionne le premier élément enfant d'un élément ; :last-child sélectionne le dernier élément enfant d'un élément :nth-child(n) sélectionne un élément Un ou éléments enfants plus spécifiques d'un élément
Exemple : p:nth-child(3) : Le troisième doit être un élément p sinon il sera invalide


:nth-last-child ( ) Sélectionnez un ou plusieurs sous-éléments spécifiques d'un élément, en commençant par le dernier sous-élément de cet élément

:nth-of-type() Sélectionnez l'élément spécifié
:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/ 
:nth-child(n*length)/*n的倍数选择,n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
:nth-child(n) //就是所有选择的元素
“n”只能是"n",不能使用其他字母代替,不然会没有任何效果的。
Par exemple : p: nth- of-child(3) sélectionne le troisième élément p


:nth-last-of-type() sélectionne l'élément spécifié, en comptant à partir du dernier élément
:first-of -type sélectionne le premier ; élément enfant du même type sous un élément supérieur ;

: last-of-type sélectionne le dernier élément enfant du même type sous un élément supérieur

: only-child sélectionne l'élément de son élément parent Le seul élément ;
: only-of-type sélectionne un élément qui est le seul élément enfant du même type que son élément supérieur
: vide Il n'y a pas de contenu dans l'élément sélectionné
: not () ne le fait pas les éléments correspondant à ce sélecteur sont tous des éléments sauf un certain élément
:enabled, :disabled contrôle l'état désactivé du contrôle de formulaire.
: coché, le bouton radio ou la case à cocher est sélectionné.
::first-line sélectionne la première ligne de l'élément
::first-letter sélectionne la première lettre du bloc de texte
::before et ::after sont principalement utilisés pour donner le devant de l'élément element Ou insérer du contenu plus tard. Ces deux "contenus" couramment utilisés sont utilisés ensemble. Le plus écrit consiste à effacer la sélection flottante
::, qui est utilisée pour modifier l'effet par défaut de la sélection de texte lors de la navigation sur les pages Web. 🎜>
Quelles sont les nouvelles fonctionnalités de html5 ? Quels éléments ont été supprimés ? Comment gérer les problèmes de compatibilité des navigateurs avec les nouvelles balises HTML5 ? Comment différencier HTML et HTML5 ?

Nouvelles fonctionnalités :

1. API glisser-déposer
2. Meilleures balises de contenu sémantique (en-tête, navigation, pied de page, côté, article, section) 3. API audio, vidéo (audio, vidéo) 4. API Canvas
5. API de géolocalisation
6. Stockage local hors ligne Stockage à long terme des données, les données ne seront pas perdues après le le navigateur est fermé ;
7. Les données de SessionStorage seront automatiquement supprimées après la fermeture du navigateur
8. Contrôles de formulaire, calendrier, date, heure, email, url, recherche
9 . Géolocalisation



Prise en charge des nouvelles balises HTML5 :

* IE8/IE7/IE6 prend en charge les balises générées par la méthode document.createElement,
Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises HTML5, Une fois que le navigateur prend en charge la nouvelle balise, vous devez ajouter le style par défaut de la balise : * Bien sûr, le meilleur moyen est d'utiliser directement un framework mature. Le plus utilisé est le framework html5shim
.

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!

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