Home > Webmaster > HTML-CSS tag attributi interessanti

HTML-CSS tag attributi interessanti

#html_ID   individua un elemento singolo quello con avente ID specificato
.html_class  individua un gruppo di elementi quelli caratterizzati dalla classe specificata

inserire stili in una pagina html

<style type=”text/css”>

.box  {width:200px; padding:7px 6px; }
.ajax__tab_xp .ajax__tab_header {white-space:normal!important;}
.ajax__tab_xpie7 .ajax__tab_header {white-space:normal!important}

</style>

 

Per evitare il wrap del testo in un paragrafo

p white-space:nowrap }

p { white-space:normal }  default

Effettuare il wrappng  in uno <span>

_span { word-wrap:break-word; }

&nbsp  : è il non-breaking space

<table cellspacing=”0″ cellpadding=”0″>
sostituibile con

style=”border-spacing:0; border-collapse:collapse

<pre>
Il tag <pre> è applicato per avere del testo preformattato.
Il testo in <pre> è visualizzato utilizzando un font a larghezza fissa  (fixed-width: Courier) preserva sia gli spazi che gli avanzamenti riga.

pre {  overflow:auto  }
La propprietà overflow specifica il comportametno da tenere se i contenuti  superano le dimensioni (overflows)   del box di un elemento. (valori: visible, hidden, scroll, auto, inherit)
auto: se si ha l’overflow viene aggiunta una scroll-bar per consentire la visualizzaione di tutto il contenuto.

z-index

La propertà z-index specifica lo stack order (livello)  di un elemento
Un elemento con z-index > sarà sempre davanti a quello con stack order minore.
z-index opera solo su elementi posizionati  (position:absolute, position:relative, or position:fixed).

redirect e refresh da pagina Html

Il metatag è lo stesso utilizzato per il refresh di pagina.

<meta http-equiv="refresh" content="5; url=http://www.new-site.com/new-page ">

5 è i numero di secondi di attesa
segue separato da; l’url della destinazione

Cambiare il modo in cui un elemento viene visualizzato

span {display:inline}  defualt

span {display:block}

Nascondere un elemento

msg.hidden {display:none}

msg.hidden {visibility:hidden}

opacity-trasparency

img  {
opacity:0.6;
filter:alpha(opacity=60); /* per IE8 e versioni precedenti*/ }

Per la trasparenza Chrome, Firefox, Opera, Safari e IE9  usano la proprietà  opacity ( valori: 0.0 -1.0 )
Le versioni precedenti la IE9  utilizzano filter:alpha(opacity=x) ( valori: 0 – 100 )

Floating

pic  { float:right }  or  { float:left }

Per evitare il floating

{ clear: both }

top Vs  margin-top

Pur cambiando comportamento  a seconda del tipo di posizione (  absolute, relative, fixed  o static ( default ) ) top viene usato per posizionare un elemento indipendentemente dall’elemento precedente. Mentre margin-top viene utilizzato per posizionare l’elemento facendo riferimento al precedente elemento presente nel flusso del documento e di fatto misura la distanza con questo.

Pseudo classes  e selectors 

CSS Selector Reference   Try Css Selectors

selector:pseudo-class

selector.class:pseudo-class

selector  = id  per indicare un elemento singolo e unico

selector  = class  per indicare un gruppo di elementi

div, h3     -> elemento div ed elemento h3

div h3       ->   h3 in  div

div > h3  ->    h3 che hanno come parent un div

div  + h3   ->  h3 immediatamente dopo un div

[title]         ->  gli elementi con un attributo title

 

Non iniziare il nome di una classe con un numero modalità supportata solo da explorer

raggruppamemnto di selettori 

nesting selectors

CSS Properties

CSS Properties Reference

animation
appearance
backface-visibility
background
border
bottom
box
caption-side
clear
clip
color
column
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
grid-columns
grid-rows
hanging-punctuation
height
icon
@keyframes
left
letter-spacing
line-height
list-style
margin
max-height
max-width
min-height
min-width
nav
opacity
outline
overflow
overflow-x
overflow-y
padding
page-break
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
rotation-point
table-layout
target
text
top
transform
transition
vertical-align
visibility
width
white-space
word-spacing
word-break
word-wrap
z-index

  1. Non c'è ancora nessun commento.
  1. No trackbacks yet.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: