Un nouveau départ pour la conception de mises en page de pages Web div CSS (3)-tutoriel CSS-php.cn

Un nouveau départ pour la conception de mises en page de pages Web div CSS (3)

黄舟

Libérer： 2016-12-29 14:17:13

original

1198 Les gens l'ont consulté

Ce qui suit présente le sélecteur de combinaison
Le sélecteur de combinaison signifie que les mêmes attributs sont rassemblés

Par exemple,

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

Copier après la connexion

Je veux le texte de ceux-ci 5 types de titres Tous deviennent rouges, évidemment les définir un par un est trop compliqué
On peut faire ça



 

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

Copier après la connexion

Bien sûr, on peut aussi combiner le sélecteur d'identifiant, le sélecteur de classe, et sélecteur d'étiquette ensemble

,a,#b,div{
color:red
}

Copier après la connexion

Notez qu'ils doivent être séparés par des virgules
S'ils ne sont pas séparés par des virgules, c'est du sélecteur parent-enfant dont nous parlerons ci-dessous

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

Copier après la connexion

Si vous voulez que toutes les balises hi du div soient rouges
, il existe de nombreuses façons. La première consiste à utiliser le sélecteur de balises, mais cela créera toutes les balises H1 sur la page. rouge Sinon
vous pouvez également utiliser des balises de classe. Mais il est difficile de classer dans chaque balise h1

Nous pouvons le faire



 

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

Copier après la connexion

C'est OK<🎜. >
Si c'est le cas

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

Copier après la connexion

C'est ok



 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

Copier après la connexion

C'est très simple, en fait, la sélection parentale peut contrôler n'importe quelle étiquette ou classe. ou un sélecteur d'identité en dessous, c'est-à-dire un petit-fils ou un arrière-petit-fils

C'est donc également possible



 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

Copier après la connexion

Mais il est recommandé de ne pas faire cela. Parce qu'il est facile de se tromper si les niveaux ne sont pas clairs

Un autre sélecteur d'attribut qui n'est pas très couramment utilisé

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]{
color:red;
}
</style> <head>
<body>
<div id="a">
<a title="a"><h1>标题</h1></a>
<a title="b"><h1>标题</h1></a>
<div>
</body>
</html>

Copier après la connexion

Doit être appris

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copier après la connexion

La description de la documentation n'est utile que

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 


标题
标题

Copier après la connexion

Valable uniquement pour un

Le sélecteur d'attribut est pour les formulaires sans classe ni identifiant Il est particulièrement utile lors de la définition des styles :

input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

Copier après la connexion

Mais ce n'est pas couramment utilisé. Vous pouvez maîtriser le contenu sans suivre la formation nécessaire

Ce qui suit est une introduction aux sélecteurs adjacents
Cela peut être difficile à comprendre

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;} </style> <head>
<body>
<h1>标题</h1>
<p>我离上面标题50px</p>
<p>不变</p>
<p>不变</p>
</body>
</html>

Copier après la connexion

C'est en fait le style du premier p Margin-top:50px signifie que la marge extérieure est de 50px, j'apprendrai plus tard que

.
a également un sous-élément. Les sélecteurs sont également difficiles à comprendre

Regardons d'abord ce qui suit

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

Copier après la connexion

C'est très familier, le sélecteur parent-enfant. J'ai dit que le père peut contrôler n'importe lequel des éléments enfants ci-dessous, donc les deux deviennent rouges

Si je veux seulement que a soit un élément enfant de p et que l'autre a soit un élément enfant de span, cela devrait l'être. comme ça

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p>a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

Copier après la connexion

Ces deux sélecteurs Vous devez ajouter (bien sûr ce n'est pas le seul), sinon il sera invalide

Ces deux sélecteurs sont très flexibles. En tant qu'expert, vous pouvez progresser. Pour les débutants, il est préférable de poser des bases solides pour les autres sélecteurs

C'est maintenant le modèle de boîte de div de contenu clé

Un nouveau départ pour la conception de mises en page de pages Web div CSS (3) C'est une photo du W3C, je regarde une autre photo

Un nouveau départ pour la conception de mises en page de pages Web div CSS (3) En fait, vous pouvez comprendre il suffit de le regarder

Ce qui précède est le contenu du nouveau début de la conception de mise en page Web div CSS (3), plus connexe Veuillez faire attention au site Web PHP chinois (www.php.cn) pour le contenu !