Comment implémenter CSS et partager un exemple de code de sélecteurs

Implémentation et sélecteur CSS Contenu de cette leçon :

1 Quatre façons d'implémenter CSS 1, dans chaque balise html Là. est un attribut style style , et la valeur de cet attribut est le code CSS. (Pour une balise) 2, utilisez la balise style . Généralement défini dans la balise head . (Pour plusieurs balises identiques) 3. Lorsque plusieurs pages utilisent le même style, le style peut être emballé individuellement sous forme de fichier CSS Importer 4. Liez un fichier CSS via la balise de lien dans la balise d'en-tête HTML

2 Sélecteur Sélecteur de balises p. {} Sélecteur de classe .haha sélecteur d'identifiant #qq (La valeur de l'identifiant est dans Il est unique dans la page, car en plus d'être utilisé par CSS, cet attribut est également utilisé par javascript ) L'utilisation du sélecteur de classe et du sélecteur d'identifiant est la même, et la priorité de l'identifiant sélecteur Plus élevé que le sélecteur de classe, plus la priorité est basse, plus elle est élevée

3 Notes CSS css : Séparer le contenu et l'affichage de la page Web. style , fonction d'affichage améliorée.

Cascade CSS Feuilles de style en cascade

Séparez les styles dans la page Web et contrôlez-les complètement par CSS, améliorant ainsi la réutilisabilité et l'évolutivité des styles.

Format : Sélecteur {Nom de l'attribut : valeur de l'attribut ; Nom de l'attribut : valeur de l'attribut ;...}

4 façons de combiner CSS avec HTML :

1. La balise HTML a l'attribut style

2. Lorsqu'il y a plusieurs balises sur la page avec le même style, vous pouvez définir la balise de style pour encapsuler le style à réutiliser

css代码 Copier après la connexion 3. Lorsque plusieurs pages utilisent le même style, le style peut être emballé individuellement sous forme de fichier CSS et importé

@import url(“1.css”); Copier après la connexion 4. Balise d'en-tête HTML

Copier après la connexion Conseils : Afin d'améliorer la réutilisabilité et l'évolutivité des styles, définissez et encapsulez plusieurs styles séparément dans des fichiers CSS, tels que p.css, p.css... dans un fichier CSS total, utilisez import pour importer ces fichiers CSS, puis utilisez la balise de lien dans la page HTML pour importer le fichier CSS total.

Priorité : Principe de proximité L'attribut de style défini sur la balise peut remplacer les autres styles

Sélecteur :

1. Le nom de la balise HTML est un sélecteur

2. Sélecteur de classe : L'attribut class dans la balise est spécifié Lors de la définition du style, ajoutez un point js . référence Utilisez className

lorsque 3. Sélecteur d'ID : L'attribut id de la balise doit être aussi unique que possible pour faciliter JavaScript pour obtenir l'élément

4. Sélecteur étendu :

a , Sélecteur d'association : La balise dans la table de balises p représente la zone p dans la table

Combinaison sélecteur : sélections multiples Appareil séparé par des virgules

c. Pour le sélecteur d'élément : l' état de l'élément tel que l'état par défaut, l'état du clic, l'état du survol du lien hypertexte Attendez

a :link a :visited a :hover a :active Commande LV HA

删除 超链接默认下划线： text-decoration ：none

p :first-letter p :first-line focus:IE6不支持

CSS滤镜：通过一些代码丰富了的样式

网页设计时， p+CSS

p和P标签都属于行级区域，回车效果，SPAN标签为块级区域，无回车效果

可加b ord er、color等属性，P标签中不要嵌套p标签

四、代码一 @import url(“1.css”); 4，通过HTML头标签中的link标签链接一个CSS文件 二、选择器 标签选择器 div{} 类选择器 .haha id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用) 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高 --> Insert title here /* @IMPORT url(1.css); @IMPORT url(div.css); @IMPORT url(span.css); */ div.haha{ background-color: #000; } @import url(“1.css”); 4，通过HTML头标签中的link标签链接一个CSS文件 --> 这是一个div区域1 这是一个div区域2 span区域1 span区域2 这是一个段落1

这是一个段落2

Copier après la connexion 五、代码二

无标题文档 /*@import url(1.css); p{ background-color:#09F; color:#FFF; } .haha{ background-color:#FF3; color:#0C0; }*//*预定样式，实现动态的加载。.hehe{ background-color:#C93; color:#00F; }*//*#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。 background-color:#000; color:#FFF; }*//*span b{关联选择器 选择器中的选择器 background-color:#09F; color:#FFF; }*//*组合选择器*//*.haha,p b{对多种选择器进行相同样式定义 background-color:#000; color:#C00; }*//*伪元素 超链接的状态。*//*未访问*/a:link{ background-color:#06F; color:#FFF; text-decoration:none; font-size:18px;}/*鼠标悬停*/a:hover{ background-color:#FFF; color:#F00; font-size:24px;}/*点击效果*/a:active{ background-color:#000; color:#FFF; font-size:36px;}/*访问后效果*/a:visited{ background-color:#FF9; color:#000; text-decoration:line-through;}p:first-letter{ font-size:36px; color:#F00;}p:hover{ background-color:#F00; color:#FFF;}input:focus{ background-color:#09F;}#qq{ float:left;}/*L V H A*/ 伪元素选择器演示 这是一个p 区域 1

这是一个p区域2

span 区域 1 span区域2 这是一个段落1

这是一个段落2

Copier après la connexion