recherche

Maison  >  Article  >  interface Web  >  Résumé de quelques points de connaissances sur HTML et CSS

Résumé de quelques points de connaissances sur HTML et CSS

零下一度
零下一度original
2017-06-25 09:39:551303parcourir

Une page complète se compose de trois parties :

  • html : Langage de balisage hypertexte

    • Grâce aux balises sémantiques, Construisez la page "structure"

  • css : feuille de style en cascade

    • est responsable du "style" de la page et embellit la page

  • js : langage de script léger ; l'interaction fait référence à deux endroits (comportement)

    • le front-end lui-même "animation" écrite sur la page

    • L'"interaction des données" du front et du backend
      La combinaison de la structure, du style et du comportement

Comment introduire le CSS

  1. Embedded (embedded)

    <style>
    body{
        height:100%;
        background-color: red;
    }
</style>

  2. Style en ligne

    <body style="height:100%; background: #333333">

  3. Type de lien externe (développement réel, tous les liens externes sont utilisés)

    <link rel="stylesheet" href="style.css?1.1.11"/>

Priorité CSS

  • Inline>embedded>lien externe

attributs et styles communs CSS

  • Lorsqu'ils sont mal définis Parfois, dans la console Chrome, il y aura un point d'exclamation jaune, invitant

  • couleur : valeur de couleur ; il existe trois façons d'exprimer la couleur
    Touche de raccourci : c+tab

    • En anglais : rouge

    • rgb(255,0,0)

    • #fff

  • taille de la police : taille de la police

    • Touche de raccourci : fsz30-> 🎜>
      font:400 14px/28px "宋体";

    arrière-plan : Ajouter un arrière-plan

  • L'image se répète par défaut horizontalement et verticalement

    • Position :

      • Position horizontale : gauche centre droite

      • Position verticale : haut centre bas

    Écriture complète :

  • background: url("images/bg2.png") no-repeat left center red;

      • background-image:url("adresse de l'image")

      • background-repeat:no-repeat; /repeat-x;/repeat-y

      • background-position:0 0

      • background-color :rouge

    Si la police est inclinée

      • style de police : italique incliné ／ normal Normal

    Souligné et barré

    • décoration de texte : barré ; barré

    • décoration de texte : aucun; Supprimer le soulignement

    • text-decoration : souligner ; Ajouter le soulignement

    • Sélection dans le périphérique CSS :

    1. Sélecteur d'étiquette : div p ul li dt dd em i u del strong b étiquette d'entrée de la table

      • Inconvénients : Seules les opérations courantes peuvent être effectuées et individuelles. les opérations ne peuvent pas être effectuées

    2. sélecteur de classe

    • 3.id :

    • , la même page peut avoir d'innombrables noms de classe identiques

      .class名

    • , la même page ne peut avoir qu'un nom d'identification (les noms d'identification ne peuvent pas être répétés) ;

      #id名

      • Dans le processus de développement réel, la classe est utilisée pour définir les styles et l'identifiant est utilisé pour obtenir des éléments 

    • <div class="div1 div2 div3" id="div1"></div>
    4. Sélecteur de descendant : div p (sélectionnez tous les éléments p des descendants sous le conteneur div)

    • 5. Sélecteur d'enfant : div > (sélectionnez le fils sous le conteneur div) ; compatible avec IE7+

    • 6. Sélecteur d'intersection : div.div1

    • 7. Sélecteur d'union : div, p

    • 8. Wildcard * : représente tous les éléments

    • 9. Sélecteur de commande : Compatible avec IE8+ >

    • 10. brother selector ul li+li{} est compatible avec IE7+

    • Développer les navigateurs couramment utilisés

    • chrome

  • IE7~11

firefox

  • Héritage CSS et cascade

  • Attributs commençant par la police peut être héritée ; la hauteur de la ligne

  • la couleur peut être héritée

le texte peut également être hérité, comme l'alignement du texte

  • poids css

  • !le poids important est infini; (moins Utilisez-le bien)

  • Le poids de id est supérieur au poids de la classe

modèle de boîte CSS

  • Le modèle de boîte CSS se compose de 5 parties :

  • Largeur et hauteur du contenu+padding+border+margin

    Texte sur une seule ligne Centrage : hauteur = hauteur de ligne

    • Centrage du texte multiligne, remplissage et hauteur de ligne

    • remplissage :

      • padding是内边距

      • padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色

      • padding是复合值
        padding:30px; ->pl30; pt30;pr30;pb30
        padding:20px 30px; ->上下为20px 左右30px
        padding:10px 20px 30px; -> 上10px 左右20px 下30px
        padding:10px 20px 30px 10px; 上 右 下 左

        如果现设置padding:30px
        再设置padding-left:10px
        请问最后的值各是多少？
        左10px; 其他都是30px

    • margin：外边框

    • border:

      • border:1px solid #000;

      • border-width

      • border-style：solid（实体）,dashed（虚线）,dotted（点）

      • border-color

    行内元素和块级元素

    • p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行

    • 文本元素：p span a i em u b strong img

    • 容器级：div li dt dd h级（不建议）

    • 除了p，所有的文本元素，都是行内元素

    • 所有容器级别的元素，都是块元素

    • 块和行内元素的相互转化

      • display：inline; //行内

      • display:inline-block;//行内块

      • display：block; //块

    • 关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）

    • 关于脱离文档流的方法

    • 浮动 float:left; float:right;

    • 绝对定位 position:absolute;

    • 固定定位 position:fixed;

    • 重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；

    • 注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽

    • 清除浮动

      • 固定高度height:xxxpx;
        缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度

      • overflow:hidden

      • clear:both
        缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度

      • 伪类清除浮动

        ul::after{
display: block;
height:0;
content: '';
clear: both;
}

  1. 溢出隐藏

  2. 清除浮动
    缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了

  • 透明度处理

    • rgba() 背景透明，文字不透明；

    • opacity:0 背景透明，文字也透明；

      opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity=10);

    最基本的开发，首先必须创建的项目结构

    • images文件夹：放切好的图片

    • css文件夹：放置css文件：index.css

    • index.html文件

    关于继承

    • 宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)

    • font可以继承

    • color可以继承：当遇到a标签的时候， color无效；

    • line-height可以继承

    当文本超度固定宽度的处理方法：

    • 单行文本出超固定宽度出现省略号的写法：

      white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis

    • 英文不折行的问题处理： word-wrap:break-word;

    • 出现滚动条的写法overflow-y:scroll;

    区分伪类和伪元素

    • 伪元素：用:和::都可以，现在建议用::

    • 伪类：给当前选择器添加动效，只能用:

    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
    Article précédent：Explication détaillée de la façon de centrer verticalement un élément flottantArticle suivant：Explication détaillée de la façon de centrer verticalement un élément flottant

    Articles Liés

    Voir plus