All Articles Dreamweaver
Imparare i CSS in Dreamweaver Parte Esercitazione 2: Creazione di regole di classe
Geoff Blake on Tue, February 15th | 0 comments
In Part One of our look at using CSS in Dreamweaver, I provided a rundown on a few key fundamentals, such as what styles are, how they work, what style sheets are. Remember, a style (also called a "ru

Nella prima parte del nostro sguardo usando i CSS in Dreamweaver , ho fornito una carrellata su alcune nozioni basilari chiave, come quello che gli stili sono, come funzionano, quali sono i fogli di stile. Ricordate, uno stile (detto anche "regola") è semplicemente una collezione di proprietà di formattazione, e un foglio di stile è una lista di stili.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

La cosa fantastica è che possiamo applicare le regole di classe a qualsiasi elemento HTML: tabelle, div, intestazioni, il corpo, norme orizzontali, elenca le opere ...! Questo ci permette di ottenere realmente la nostra pagina e il nostro formattazione sotto controllo. Quindi, diamo uno sguardo alla creazione di un dominio di classe, allora possiamo discutere di come applicarli.

Ecco come creare una regola di classe ...

Passo - 1

Nella parte inferiore del pannello Stili CSS, fare clic sull'icona Nuovo regola CSS.

Step - 2

Nella finestra di dialogo Nuova regola CSS che appare, scegliere di Classe (possono applicare a qualsiasi elemento HTML) dal menu a tendina Tipo di selettore.

Passo - 3

Nel campo Nome Selector, digitare un nome per la nuova regola di classe.

Perché stiamo essenzialmente creando regole di classe da zero, siamo in grado di assegnare loro un nome tutto ciò che vogliamo, ma attenzione a non utilizzare spazi o caratteri speciali nei nomi di classe la regola. Per esempio, se si sta creando una regola di classe per controllare grafica, è possibile denominare la regola "ImageController" o "PictureFixerUpper". Se si sta creando una barra laterale, poi il nome della "sidebar." Regola Nome di 'em come più vi piace, e usare un nome che è utile e significativo!

Passo - 4

Nella parte inferiore della finestra di dialogo, decidere se si desidera salvare la regola in un foglio di stile interno "Solo questo documento" oppure in un foglio di stile esterno "Nuovo file foglio di stile".

Passo - 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

Si noti che la nuova regola viene visualizzata nella parte superiore del pannello Stili CSS. Si noti anche che il nome del vostro dominio è proceduto da un punto / punto. I nomi di dominio di classe deve essere sempre preceduto da un periodo, se non metti uno in quando sei nomi la regola (come abbiamo fatto ritorno al punto 3), quindi Dreamweaver bastone il periodo in automatico.

Ora che avete creato una regola di classe, è il momento di applicarla tutta la pagina. Come accennato in precedenza, a differenza di ridefinito elementi HTML, regole di classe devono essere applicate manualmente nel documento. A seconda di come si applica la regola, sia a livello di blocco o in linea elementi HTML, otterrete risultati diversi sulla tua pagina. Diamo uno sguardo a alcuni modi per farlo.

Ecco come applicare la formattazione a livello di blocco elementi HTML:

Passo - 6

Nella pagina, un solo clic sull'oggetto che si desidera formattare. Per esempio, se si tratta di un titolo o un paragrafo che si desidera formattare, basta semplicemente inserire il cursore nel testo. Se si tratta di un tavolo, div, o immagine, assicuratevi di selezionare l'oggetto. A volte, utilizzando il selettore di tag nella barra di stato in basso a sinistra è utile quando si sta cercando di selezionare gli elementi più grandi. Qualunque cosa sia che si desidera formattare, l'idea è quella di selezionarlo.

Passo - 7

Dal menu di classe sulla finestra di ispezione Proprietà, scegli il tuo dominio di classe. Questo si applica la regola di classe per l'oggetto selezionato. Si noti che il selettore di tag ora indica l'elemento HTML che hai selezionato, così come il nome del dominio di classe, preceduto da un periodo. Per esempio, . Se dovessimo guardare a questo esempio, nella vista Codice, esso sarebbe simile a questa:

. Notice that the rule name in code is not proceeded by a period.


That's how to apply formatting to a block level element. Let's see what happens if we try selecting text instead of simply clicking inside it.

Here's how to apply formatting to an inline element. It's only slightly different, but let's give it a try.

Passo - 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

Passo - 9

Proprio come prima, scegliete il vostro dominio di classe dalla finestra di ispezione Proprietà. La differenza ora è che solo la parola o frase viene formattata. Controllare il selettore di tag, e ti dico cosa succede. Ora si legge seguito da un periodo e il nome del vostro dominio di classe è, ad esempio . In vista Codice, si leggeva . A è un elemento inline. Come potete vedere, lo stesso attributo HTML viene utilizzato (di classe), e la sintassi è esattamente la stessa come era in precedenza, ma si ottiene un risultato molto diverso sulla nostra pagina.

Conoscere e capire, non solo come creare regole di classe, ma anche i due modi di applicarle davvero migliorare la capacità di costruire e sviluppare grandi siti di ricerca. Stylin felice '!

Approfondire in CSS con Esplorare CSS .

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: