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 de 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 CSSImporter

3. Lorsque plusieurs pages utilisent le même style, le style peut être emballé individuellement sous forme de fichier CSS et importé

/css”>@import url(“1 .css»);

4. Liez un fichier CSS via la balise de lien dans la balise d'en-tête HTML

rel=”stylesheet” href=”1.css” media L'attribut est facultatif, écran de périphérique par défaut/>

Conseil : pour améliorer la réutilisabilité et l'évolutivité des styles, définissez plusieurs styles séparément et combinez-les. Encapsulez-les dans des fichiers CSS, tels que p.css, div.css. .. Dans un fichier CSS général, utilisez import pour importer ces fichiers CSS, puis utilisez la balise link dans la page HTML pour importer le fichier CSS général.

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

Sélecteur :

1. Sélecteur de balise : chacun La balise HTML. name est un sélecteur

2. Sélecteur de classe : spécifiez l'attribut de classe dans la balise. Ajoutez un point lors de la définition du style. Utilisez className

lors du référencement de js. Les attributs de la balise doivent être aussi uniques que possible pour faciliter l'obtention des éléments par JavaScript

4. Sélecteur d'extension :

a. Sélecteur d'association :

balise dans la balise table div représente. le tableau dans la zone div du tableau

combinaison sélecteur : plusieurs sélecteurs séparés par des virgules

c. état d'un hyperlien, cliquez sur Statut, survolez l'état, etc.

a:link a:visited a:hover a:active LVHA order

Supprimez le soulignement par défaut de l'hyperlien : text-decoration : aucun

:première lettre p:première ligne focus : IE6 ne prend pas en charge

Filtres CSS : styles enrichis par certains codes

Lors de la conception de pages Web,

DIV+CSS

Les balises DIV et P sont des zones au niveau des lignes avec des effets de retour chariot. Les balises SPAN sont des zones au niveau du bloc sans effets de retour chariot

Vous pouvez ajouter des attributs. tels que la bordure et la couleur. Ne les intégrez pas dans les balises P

4. Code 1

 1 <!-- 2 本课内容： 3 一、实现CSS四种方式 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签) 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入 7     <style type=”text/css”>@import url(“1.css”);</style> 8 4，通过HTML头标签中的link标签链接一个CSS文件 9     <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq  (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高 
15  -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式：26 标签选择器27 div{28         background-color: #000;29         color: #FFF    
30     }31 32  -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38     @IMPORT url(1.css);39     @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43     background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52     <!--53     css和html相结合的第一种方式54     1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)55     2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56     3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入57     <style type=”text/css”>@import url(“1.css”);</style>58     4，通过HTML头标签中的link标签链接一个CSS文件59     <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>60 61      -->62      <!--  -->63 64 65     <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->66     <!-- color: #F00 为颜色的缩写 -->67     <div style ="color: #F00">这是一个div区域1</div>68     <div class="haha">这是一个div区域2</div>69     <span>span区域1</span>70     <span>span区域2</span>71     <p>这是一个段落1</p>72     <p>这是一个段落2</p>73 74     75 </body>76 </html>

Copier après la connexion

五、代码二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);

div{
        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,div 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;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L  V  H  A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
    1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。 
    2，使用style标签的方式。 一般都定义在head标签中
    
    
    优先级：标签选择器<类选择器<id选择器<style属性    --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>

Copier après la connexion

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!