Cornice da tavolo elemento importante. È versatile e spesso utilizzato. Questo tutorial tratterà come inquadrare una tabella, una cella e una riga usando un attributo, ma la parte principale del tutorial si concentrerà sulle proprietà CSS perché il frame diventa generico quando vengono utilizzati gli stili CSS.
Creazione di una cornice utilizzando un attributo
Non è affatto un attributo espandibile, direi privo di significato. L'attributo border imposta la larghezza del bordo e il gioco è fatto. Il prossimo è un esempio:
| Cella 1 | Cella 2 |
Un modo semplice per creare un bordo attorno a un elemento
dico subito registrazioni dettagliate Non darò, poiché in futuro ci sarà un'enorme lezione sulla proprietà di confine e forse più di una. Proprietà generica border è in grado di impostare lo spessore, lo stile e il colore dei bordi (cornici) contemporaneamente. Lo spessore può essere qualsiasi, il colore dei bordi è impostato in formato esadecimale, rgb e parole chiave(rosso, nero, ecc.). Quali sono gli stili, l'immagine qui sotto (l'immagine è presa dal sito htmlbook.ru) e poi un esempio:
td(
bordo: 5px solido #CCCCCC;
}
Inquadrare a sinistra, a destra, in basso e in alto
Quando si utilizza il bordo, viene creato un bordo su tutti i lati. Ma possiamo controllare da quale lato disegnare la cornice. Bordo sinistro bordo sinistro: 2px nero pieno; bordo destro bordo destro: 1px puntato #FF0000 ; bordo inferiore bordo inferiore: 10px solido #000000 ; bordo superiore: 1px verde pieno. Come puoi vedere, non devono avere stessi valori e puoi anche combinarli, ovvero scriverne diversi, ad esempio i bordi sinistro e destro (cornice), ecc. Tutto. Non salirò oltre, questo è l'argomento di un'altra lezione. Esempio:
tavolo(
bordo sinistro: 5px solido #CCCCCC;
bordo destro: 5px solido #CCCCCC;
}
td(
bordo superiore: 5px solido #CCCCCC;
bordo inferiore: 5px solido #CCCCCC;
}
Angoli arrotondati
Ora tocchiamo un po' il tema delle "cose carine" e dell'usabilità. Per rendere arrotondati i bordi delle cornici, c'è proprietà di confine-raggio. È troppo lezione separata, non entreremo molto nel dettaglio. Lui accetta importo diverso argomenti. Scriveremo (solo in questa lezione) un argomento e, se scriviamo un valore, ci sarà lo stesso arrotondamento su tutti i lati (angoli). Il valore può essere in diverse "misure", come pixel e percentuali. Il prossimo è un esempio:
td(
bordo: 5px solido #CCCCCC;
raggio di confine: 10px
}
Margini o riempimento
Affinché il testo non sia proprio accanto alla cornice, è necessario rientrare da essa. La proprietà del padding ci aiuterà in questo. È anche multifunzionale, ma lo considereremo in parte, tutto per lo stesso motivo. Useremo un solo valore. Il valore può essere in diverse "misure", come pixel e percentuali. Il prossimo è un esempio:
td(
bordo: 5px solido #CCCCCC;
raggio di confine: 10px
imbottitura: 10px
La cornice attorno al tavolo ti consente di concentrarti su di esso, separarlo dal resto del contenuto della pagina Web ed espandere il set di strumenti di progettazione del tavolo.
Per creare un bordo, viene applicata la proprietà dello stile del bordo, che viene aggiunta al selettore TABELLA. La tabella ha anche un aspetto spettacolare quando il colore della cornice corrisponde al colore di sfondo dell'intestazione (tag
L'esempio 1 mostra come creare una tabella così semplice.
Esempio 1: creazione di una cornice attorno a un tavolo
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubini | 43 | 51 | 79 |
| smeraldi | 28 | 34 | 48 |
| Zaffiri | 29 | 57 | 36 |
A questo esempio l'allineamento del testo in tutte le celle è allineato a sinistra, il che non è sempre conveniente. Sulla fig. La figura 2 mostra una tabella in cui il contenuto delle celle è allineato al centro, ad eccezione della colonna di sinistra, in cui il testo è allineato a sinistra.
L'allineamento viene modificato utilizzando la proprietà dello stile di allineamento del testo, con le singole celle che richiedono la digitazione nuova classe per controllare in modo flessibile alcune caratteristiche (esempio 2).
Esempio 2: tabella con allineamento del contenuto della cella
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubini | 43 | 51 | 79 |
| smeraldi | 28 | 34 | 48 |
| Zaffiri | 29 | 57 | 36 |
Questo esempio aggiunge una classe di stile denominata lc , che viene aggiunta alle celle della colonna di sinistra per modificare l'allineamento del contenuto e rendere il testo in grassetto.
Una tabella con uno sfondo di intestazione realizzato a forma di gradiente sembra spettacolare (Fig. 3). Allo stesso tempo, creare una tabella del genere non è particolarmente difficile.
In questo caso, viene utilizzato come sfondo un motivo pre-preparato, ad esempio, come mostrato in Fig. quattro.
Esistono diversi modi per aggiungere uno sfondo a una sola riga della tabella. Puoi usare il tag , progettato per memorizzare una o più righe, che vengono presentate nella parte superiore della tabella. Per questo tag, aggiungiamo la proprietà di stile background , che determina contemporaneamente il colore di sfondo e l'immagine di sfondo, nonché la sua ripetibilità (esempio 3).
Esempio 3 Utilizzo immagine di sfondo
In questo esempio, il tag solo copertine linea superiore tabella con il suo titolo. Per questo tag, il colore di sfondo e l'immagine sono impostati contemporaneamente negli stili, come mostrato in Fig. 4. Sebbene il colore sotto l'immagine non sia visibile, è sempre meglio aggiungerlo, ad esempio, nel caso in cui l'utente disabiliti la visualizzazione delle immagini nel browser.
La proprietà CSS border si regola per creare il bordo di un oggetto, in particolare per lo spessore del bordo, per il suo colore e stile. Questa proprietà è ampiamente utilizzata in HTML. Può creare vari effetti per una migliore percezione del contenuto della pagina. Ad esempio, progetta una barra laterale, un'intestazione del sito, un menu, ecc. I valori nella proprietà CSS border possono essere impostati in qualsiasi ordine. La sequenza più comunemente usata è "colore stile spessore". border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset Четыре разных рамки Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover
и рамку CSS border для создания простых эффектов (например, для меню). Вот как это выглядит на странице: Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P)
, где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0) Вот как это выглядит на странице: Задает толщину линии. Ранее мы задавали ее в едином описании border. Синтаксис CSS border-width
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны. Вот как это выглядит на странице: border-width: thin border-width: medium border-width: thick Разная толщина у границ У свойства CSS border
есть производные свойства для задания односторонних границ у элемента: Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border. Также есть свойства На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми Вот как это выглядит на странице: Пример рамки для цитаты Примечание
Иногда требуется сделать несколько границ. Приведем пример Вот как это выглядит на странице: Есть второй способ через наложение теней. Вот как это выглядит на странице: Для создания красивых рамок используют свойство CSS border-radius
(доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту. Вот как это выглядит на странице: Для обращения к border
из JavaScript нужно писать следующую конструкцию: Влад Мержевич С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border
, как наиболее универсальное, а также outline
и, как ни удивительно, box-shadow
, основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой. Самое простое свойство для создания рамок. Имеет те же параметры, что и border
, но существенно отличается от него некоторыми деталями: Возникает вопрос - в каких случаях нужен outline
, когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border
? Ситуаций не так и много, но они встречаются: Надо понимать, что outline
ни в коей мере не заменяет border
и вполне может существовать вместе с ним, как показано в примере 1. Пример 1. Создание рамки
In questo esempio, attorno all'elemento viene aggiunto un bordo nero, separato dallo sfondo da un bordo bianco (Fig. 1). Riso. 1. Bordo intorno all'elemento L'aggiunta di un bordo attraverso il bordo aumenta la larghezza dell'elemento, che è abbastanza evidente quando si combinano bordo e la pseudo-classe :hover. Ci sono due modi per "vincere". Il più semplice è sostituire il bordo con un contorno , che sappiamo non ha alcun effetto sulla dimensione dell'elemento (esempio 2). Esempio 2: fotogramma al passaggio del mouse
il contorno non è sempre adatto, se non altro perché non risente degli angoli arrotondati. Il secondo metodo è adatto qui: aggiungi un bordo invisibile o un bordo che corrisponda al colore di sfondo, quindi modifica i suoi parametri al passaggio del mouse (esempio 3). Quindi non si verificherà alcuno spostamento dell'elemento, poiché la cornice è già presente inizialmente. Ma ricorda sempre che la larghezza dell'elemento è la somma dei valori di larghezza, bordo a sinistra e bordo a destra. Lo stesso vale per l'altezza. Esempio 3: fotogramma al passaggio del mouse
Alcuni browser (Chrome, Safari, ultime versioni Opera) visualizza una piccola icona intorno ai campi modulo quando ricevono lo stato attivo. cornice a colori(Fig. 2). Per rimuoverlo è sufficiente aggiungere il valore none alla proprietà outline negli stili, come mostrato nell'esempio 4. Riso. 2. Inquadrare i campi Esempio 4. Rimuovere la cornice
Sebbene la proprietà box-shadow abbia lo scopo di aggiungere un'ombra attorno a un elemento, può essere utilizzata anche per creare bordi e quelli che non possono essere eseguiti con border o outline . Ciò è dovuto al fatto che il numero di ombre può essere illimitato, i cui parametri sono elencati separati da virgole. Per ottenere una cornice, i primi tre parametri dovrebbero essere impostati a zero, sono responsabili della posizione dell'ombra e della sua sfocatura. La quarta opzione in questo casoè responsabile dello spessore del bordo e il quinto imposta il colore del bordo. Per il secondo telaio, il quarto parametro è uguale alla somma degli spessori dei due telai. L'esempio 4 mostra come aggiungere due riquadri e un bordo a destra utilizzando una singola proprietà box-shadow. Esempio 4: utilizzo di box-shadow
Il risultato di questo esempio è mostrato in Fig. 3. Riso. 3. Frame creati dalla proprietà box-shadow A qualsiasi webmaster, grazie alla sua attività professionale, devi creare alcuni elementi complessi sul sito Bordo colorato della cornice del tavolo. L'attributo "bordo" deve essere uguale a "0". spaziatura cellulare equivale a "2" (di più numero, più ampio sarà il bordo della tabella). Questo tag specifica dove devono trovarsi le informazioni. In questo esempio, dovremo disporre le informazioni partendo dal bordo superiore della tabella. Inseriamo un'altra tabella nella cella della nostra tabella. Specificare il colore di sfondo della tabella. In questo caso, abbiamo bisogno di uno sfondo bianco. È tutto. La nostra tavola è pronta. Ora abbiamo una tabella la cui cornice verrà visualizzata allo stesso modo in tutti i browser. Infine, darò tutto il codice che abbiamo creato.
2004 2005 2006
Rubini 43 51 79
smeraldi 28 34 48
Zaffiri 29 57 36
1. Sintassi del bordo CSS
confine : bordo-larghezza bordo-stile bordo-colore | ereditare;
Nota 2. Esempi con diversi confini CSS
2.1. Esempio. Diversi stili di bordo in stile bordo
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
2.3. Пример. Как сделать прозрачную рамку border
3. Толщина границы: свойство border-width
border-width
: thin | medium | thick | значение
;
4. Как сделать рамку border только с одного края (границы)
/* Описание двух одинаковых стилей:
*/
4.1. Пример. Красивая рамка для выделения цитат
Можно задать отдельную границу для каждой из сторон.5. Как сделать несколько границ border у элемента html
5.1. Первый вариант с несколькими границами
5.2. Наложение теней для создания нескольких границ
6. Скругление углов у границ (border-radius)
7. Вдавленная линия CSS
document.getElementById("elementID").style.border
="VALUE
"
Свойство outline
Разноцветные рамки
Cornice quando si utilizza: passa il mouse
Bordo intorno ai campi modulo
Cornici tramite box-shadow
(Ad esempio: avvolgere grafica con testo, creare colonne con testo, correggere elementi del sito).
Tuttavia, lo standard html ha un numero limitato di elementi di progettazione di pagina standard e non tutti gli elementi sono visualizzati allo stesso modo browser diversi. Ogni azienda cerca di sviluppare il proprio html, andando talvolta lontano dal concetto html di base sviluppato dal consorzio WWW.
Pertanto, il webmaster deve sperimentare elementi comuni a tutti i browser.
Le tabelle sono le più adatte, perché è conveniente inserire le informazioni nelle celle della tabella.
Inoltre, le tabelle in html hanno l'attributo "border="0" - questo attributo con il valore "0" nasconde i bordi della tabella, ovvero il contenuto della cella rimane visibile e il frame stesso non è visibile.
Diamo ora un'occhiata a un esempio di sviluppo del design tabulare.
Noto subito che in html, per impostazione predefinita, è integrato un attributo responsabile del colore della cornice della tabella. (colore del bordo). Tuttavia, non ci si addice, perché dato attributo solo supportato browser Internet esploratore. Questo elemento non funziona in altri browser. Ma abbiamo bisogno che la pagina venga visualizzata allo stesso modo in qualsiasi browser. I tavoli vengono in nostro aiuto. Creiamo prima una tabella normale.
L'attributo "cellspacing" viene utilizzato per indicare la distanza tra due celle. In questo caso indicherà la distanza tra i due tavoli.
Riempi la tabella di nero usando l'attributo "bgcolor" In generale, puoi scegliere qualsiasi altro colore, a seconda di quale sarà il tuo bordo.
Articoli correlati in alto
