div+css 레이아웃_CSS/HTML 시작하기

Apprenez-vous la mise en page CSS ? Êtes-vous toujours incapable de maîtriser pleinement la mise en page CSS pure ? Il y a généralement deux situations qui freinent votre apprentissage :

La première possibilité est que vous n'avez pas encore compris les principes de traitement CSS des pages. Avant de considérer les performances globales de votre page, vous devez d'abord considérer la sémantique et la structure du contenu, puis ajouter du CSS pour la sémantique et la structure. Cet article vous expliquera comment structurer le HTML.

Une autre raison est que vous ne connaissez pas les attributs très familiers de la couche de présentation (tels que cellpadding, hspace, align="left", etc.) et que vous ne savez pas en quelle instruction CSS les convertir. . Une fois que vous aurez résolu le premier problème et que vous saurez comment structurer votre HTML, je vous donnerai une liste détaillant le CSS à utiliser pour remplacer les attributs de présentation d'origine.

HTML structuré
Lorsque nous apprenons pour la première fois à créer des pages Web, nous réfléchissons toujours d'abord à la manière de les concevoir, en tenant compte des images, des polices, des couleurs et des plans de mise en page. Ensuite, nous utilisons Photoshop ou Fireworks pour le dessiner et le découper en petites images. Enfin, modifiez le HTML pour restaurer toutes les conceptions de la page.

Si vous souhaitez que votre page HTML soit mise en page avec CSS (elle est compatible avec CSS), vous devez revenir en arrière et recommencer. Ne pensez pas d'abord à « l'apparence », mais pensez d'abord à l'apparence. sémantique et structure du contenu de votre page.

L'apparence n'est pas la chose la plus importante. Une page HTML bien structurée peut être présentée sous n'importe quelle apparence, et CSS Zen Garden en est un exemple typique. CSS Zen Garden nous aide enfin à réaliser la puissance du CSS.

Le HTML ne se limite pas à être lu sur un écran d'ordinateur. Vos images soigneusement conçues dans Photoshop peuvent ne pas être affichées sur les PDA, les téléphones mobiles et les lecteurs d'écran. Mais une page HTML bien structurée peut être affichée n'importe où et sur n'importe quel périphérique réseau grâce à différentes définitions de CSS.

Commencez à réfléchir
Tout d'abord, vous devez apprendre ce qu'est la « structure », que certains auteurs appellent également « sémantique ». Ce terme signifie que vous devez analyser vos blocs de contenu et l'objectif de chaque élément de contenu, puis créer la structure HTML correspondante en fonction de ces objectifs de contenu.

Si vous vous asseyez et analysez et planifiez soigneusement la structure de votre page, vous pourriez vous retrouver avec quelques éléments comme celui-ci :

Logo et nom du site
Contenu de la page principale
Site navigation (Menu principal)
Sous-menu
Champ de recherche
Zone rituelle (comme le panier d'achat, la caisse)
Pied de page (droit d'auteur et mentions légales associées)
Nous utilisons généralement des éléments DIV pour combiner ces structures Définissez-le comme ceci :

Ceci n'est pas une mise en page, mais une structure. Il s'agit d'une description sémantique des blocs de contenu. Lorsque vous comprenez votre structure, vous pouvez ajouter l'ID correspondant au DIV. Tout bloc de contenu peut être contenu dans un conteneur DIV et un autre DIV peut y être imbriqué. Les blocs de contenu peuvent contenir n'importe quel élément HTML : titres, paragraphes, images, tableaux, listes, etc.

D'après ce qui précède, vous savez déjà comment structurer le HTML et vous pouvez désormais définir la mise en page et le style. Chaque bloc de contenu peut être placé n'importe où sur la page et la couleur, la police, la bordure, l'arrière-plan, les propriétés d'alignement, etc. du bloc peuvent être spécifiées.

Utiliser des sélecteurs est une chose merveilleuse
Le nom de l'identifiant est un moyen de contrôler un certain bloc de contenu en entourant ce bloc de contenu avec un DIV et en ajoutant un identifiant unique, vous pouvez utiliser CSS pour sélectionner. it.Convertisseur pour définir précisément l'apparence de chaque élément de la page, y compris les titres, les listes, les images, les liens ou les paragraphes, etc. Par exemple, si vous écrivez une règle CSS pour #header, elle peut être complètement différente de la règle d'image dans #content.

Un autre exemple est : vous pouvez définir des styles de liens dans différents blocs de contenu via différentes règles. Quelque chose comme ceci : #globalnav a:link ou #subnav a:link ou #content a:link. Vous pouvez également définir différents styles pour le même élément dans différents blocs de contenu. Par exemple, définissez les styles de p dans #content et #footer respectivement via #content p et #footer p. Structurellement parlant, votre page est composée d'images, de liens, de listes, de paragraphes, etc. Ces éléments eux-mêmes n'affectent pas le périphérique réseau sur lequel ils sont affichés (PDA, téléphone mobile ou TV Internet). Ils peuvent être définis comme n'importe quelle apparence de performance.

Une page HTML soigneusement structurée est très simple et chaque élément est utilisé à des fins structurelles. Lorsque vous souhaitez mettre en retrait un paragraphe, vous n'avez pas besoin d'utiliser la balise blockquote. Utilisez simplement la balise p et ajoutez une règle de marge CSS à p pour atteindre l'objectif d'indentation. p est une balise structurée et margin est un attribut de présentation. La première appartient au HTML et la seconde au CSS. (Il s'agit de la séparation de la structure et de la présentation.)

Il n'y a presque pas de balises d'attribut de présentation dans une page HTML bien structurée. Le code est très propre et concis. Par exemple, le code d'origine ne peut désormais écrire qu'en HTML, et tout ce qui contrôle les performances est écrit en CSS. En HTML structuré, un tableau est un tableau, rien d'autre (comme être utilisé pour la mise en page). et positionnement).

Pratiquez la structure vous-même
Ce qui précède n'est que la structure la plus basique. Dans l'application réelle, vous pouvez ajuster les blocs de contenu en fonction de vos besoins. L'imbrication DIV se produit souvent, et vous verrez qu'il y a d'autres couches dans la couche "conteneur", avec une structure similaire à celle-ci :

une liste

une autre liste

중첩된 div 요소를 사용하면 프레젠테이션을 제어하기 위해 더 많은 CSS 규칙을 정의할 수 있습니다. 예를 들어 #navcontainer에 목록을 오른쪽에 맞추는 규칙을 제공하고, #globalnav에 목록을 왼쪽에 맞추는 규칙을 제공할 수 있습니다. , 그리고 # Subnav의 목록은 완전히 다른 성능을 가지고 있습니다.

기존 메소드를 CSS로 대체
다음 목록은 기존 메소드를 CSS로 대체하는 데 도움이 됩니다.

HTML 속성 및 해당 CSS 메소드
HTML 속성 CSS 메소드 설명
align ="left"

align="right" float: left;

float: right; CSS를 사용하여 그림, 단락, div, 제목, 표, 목록 등 모든 요소를 ​​플로팅합니다.

float 속성을 사용하는 경우 부동 요소의 너비를 정의해야 합니다.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; CSS를 사용하면 본문 요소뿐만 아니라 모든 요소에 여백을 설정할 수 있습니다. 상단, 오른쪽, 하단 및 왼쪽 요소의 여백 값을 각각 지정할 수 있습니다.

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:방문: #339; :hover: #999;

a:active: #00f;
HTML에서는 링크의 색상이 본문의 속성값으로 정의됩니다. 링크 스타일은 페이지 전체에서 동일합니다. CSS 선택기를 사용하면 페이지의 여러 부분에서 링크 스타일이 다를 수 있습니다.

bgcolor="#FFFFFF" background-color: #fff; CSS에서는 본문 및 테이블 요소뿐만 아니라 모든 요소에 대해 배경색을 정의할 수 있습니다.

bordercolor="#FFFFFF" border-color: #fff; 모든 요소는 테두리(boeder)를 설정할 수 있으며 위쪽, 오른쪽, 아래쪽 및 왼쪽을 각각 정의할 수 있습니다.

border="3 "

cellspacing="3" border-width: 3px; CSS를 이용하여 테이블의 테두리를 통일된 스타일로 정의하거나 상단, 우측, 상단의 색상, 크기, 스타일을 정의할 수 있습니다. 각각 하단 및 왼쪽 테두리.

table, td 또는 th 선택기를 사용할 수 있습니다.

경계 없는 효과를 설정해야 하는 경우 CSS 정의를 사용할 수 있습니다. border-collapse: Collapse;







지우기: 왼쪽

지우기: 오른쪽; > 많은 2열 또는 3열 레이아웃은 위치 지정을 위해 float 속성을 사용합니다. 플로팅 레이어에 배경색이나 배경 이미지를 정의하는 경우

cellpadding="3"

vspace="3"

hspace를 사용할 수 있습니다. = "3" padding: 3px; CSS를 사용하면 모든 요소에 padding 속성을 설정할 수 있습니다. 마찬가지로 padding도 위쪽, 오른쪽, 아래쪽 및 왼쪽으로 설정할 수 있습니다. 패딩은 투명합니다.

align="center" text-align: center;

margin-right: auto; margin-left: auto;
텍스트 정렬은 텍스트에만 적용됩니다. 🎜>div, p와 같은 블록 수준 요소는 margin-right: auto; 및 margin-left: auto를 사용하여 가로 중앙에 배치될 수 있습니다.


몇 가지 아쉬운 기술 및 작업 조건
브라우저의 CSS 지원으로 인해 CSS가 기존 방법과 동일한 효과를 얻을 수 있도록 몇 가지 트릭(해킹)을 채택하거나 환경(해결 방법)을 설정해야 하는 경우가 있습니다. 예를 들어, 블록 수준 요소는 수평 센터링 기술, 상자 모델 버그 기술 등을 사용해야 하는 경우가 있습니다. 이러한 모든 기술은 Molly Holzschlag의 기사 "통합 웹 디자인: 장기 CSS 해킹 관리 전략"에 자세히 설명되어 있습니다.

CSS 팁에 대한 또 다른 리소스 사이트는 Big John과 Holly Bergevin의 "Position is Everything"입니다.

부동 동작 이해
Eric Meyer의 "Containing Floats"는 레이아웃에 부동 속성을 사용하는 방법을 익히는 데 도움이 됩니다. 플로트 요소를 지워야 하는 경우가 있습니다. "구조적 마크업 없이 플로트를 지우는 방법"을 읽어보면 매우 도움이 됩니다.

추가 도움말
기존 CSS 토론 목록은 CSS 레이아웃 요약을 포함하여 WiKiA 토론 그룹에서 정보를 수집하는 좋은 리소스입니다(css-discuss.incutio.com/ ?page=CssLayouts). , CSS 팁 요약(css-discuss.incutio.com/?page=CssHack) 등