Résumé de quelques points de connaissances sur HTML et CSS-tutoriel HTML-php.cn

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

Embedded (embedded)

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

Copier après la connexion

Style en ligne

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

Copier après la connexion

Type de lien externe (développement réel, tous les liens externes sont utilisés)
```
<link rel="stylesheet" href="style.css?1.1.11"/>
```
Copier après la connexion

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 "宋体";

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

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

, 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名

<div class="div1 div2 div3" id="div1"></div>

Copier après la connexion

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

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;
}

Copier après la connexion

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

透明度处理

rgba() 背景透明，文字不透明；
opacity:0 背景透明，文字也透明；
```
opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity=10);
```
Copier après la connexion

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

images文件夹：放切好的图片
css文件夹：放置css文件：index.css
index.html文件

关于继承

宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
font可以继承
color可以继承：当遇到a标签的时候， color无效；
line-height可以继承

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

单行文本出超固定宽度出现省略号的写法：
```
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
```
Copier après la connexion
英文不折行的问题处理： 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 de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

3 Il y a quelques semaines By DDD

Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment apprivoiser les loups

4 Il y a quelques semaines By DDD

Niveaux de force pour chaque ennemi et monstre de R.E.P.O.

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Grow A Garden - Guide de mutation complet

2 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Java

1659

Tutoriel CakePHP

1416

Tutoriel Laravel

1310

Tutoriel PHP

1258

Tutoriel C#

1233

Afficher plus

Related knowledge

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Apr 09, 2025 am 12:11 AM

React combine JSX et HTML pour améliorer l'expérience utilisateur. 1) JSX incorpore du HTML pour rendre le développement plus intuitif. 2) Le mécanisme DOM virtuel optimise les performances et réduit les opérations DOM. 3) Interface utilisateur de gestion basée sur les composants pour améliorer la maintenabilité. 4) La gestion des états et le traitement des événements améliorent l'interactivité.

Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

See all articles