[Resolvido] Sintaxe Css

[Eliel 0]

Oi pessoal, estou postando aki pq estou aprendendo Css

e fiquei com algumas dúvidas em ralação a sintaxe pricipalmente quando se utiliza pontuações

tipo a , (vírgula) e o . (ponto)

 

Minhas dúvidas são as seguintes:

Quando você usa por exemplo essa sintaxe

 

#menu4 li a:link, #menu4 li a:visited
{
	color: #9E3C02;
	display: block;
	background: url(menu4.gif);
	padding: 8px 0 0 30px;
}

alguem poderia me traduzir pq ele usou a vírgula?

 

eu entendi que significa que ele quer que

dentro de menu4 as listas e os links

bem como links visitados tenham as configuraçoes definidas conforme propriedades dentro das chaves? é isso mesmo ou eu acertei mais ou menos ou errei tudo?

 

também não entendo quando no início você cria uma tag sem o ponto por exemplo

 

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align:left
}

pq ele não usou o . (ponto) antes do u? tipo

 

.u{...
.}

quando ele chamar isso dentro do html como ele chamaria este u?

dentro da propriedade id? ou dentro do propriedade class?

 

também tenho dúvida quando ele usa só o ponto ex

 

.my_panel_inner_wide h2, .home_panel_inner_wide h2 { width: 200px; }

como ele vai chamar isso la no html dentro do id ou do class?

 

 

Grato

[uelio 0]

Olá Eliel...

Olha só

 

A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

 

seletor { propriedade: valor; }

 

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);

 

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

 

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

 

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

 

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

 

Ver os exemplos abaixo:

p {
font-size: 12px; /* ponto-e-vírgula é facultativo */
}

body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}

No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é o fundo do documento e o valor é a cor branca.

body {
background: #FFFFFF;
}

Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ':

h3 { 
font-family: "Comic Sans MS" 
}

Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, como mostrado abaixo:

p {
text-align: right; 
color: #FF0000;
}

Isto não é obrigatório! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes estão corretas:

p {text-align: right;color: #FF0000;}

NOTA: A razão do uso de ponto e vírgula na última declaração ou mesmo quando só há uma declaração é que durante a fase de projeto da Folha CSS quase sempre estaremos acresentando novas declarações e a última declaração quase nunca é a última na fase de projeto. Assim, esta prática certamente nos poupará revisões por ter esquecido um ponto e vírgula.!!!!

 

Agrupamento de Seletores

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

h1, h2, h3, h4, h5, h6 {
color: #00FF00;
}

O seletor classe

Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo!

 

Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles.

 

A sintaxe para o seletor classe é mostrada abaixo. Elemento HTML mais um nome qualquer que você "inventa" precedido de . (ponto):

elemento HTML.minhaclasse { 
propriedade: valor;
}

Nota: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: Use só letras!

 

Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento: um parágrafo com letras na cor preta e um parágrafo com letras na cor azul.

 

p.corum { 
color:#000000;
} 
	
p.cordois { 
color:#0000FF;
}

No seu documento HTML as regras seriam aplicadas conforme abaixo:

<p class ="corum"> este parágrafo terá cor preta.</p>
	
<p class ="cordois">
este parágrafo terá cor azul.
</p>

Nota: Em CSS 1 não é válido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo está errado:

<p class ="corum" class ="cordois"> 
Aqui há um erro.
</p>

Nota: CSS 2 mudou este conceito, permitindo declarar mais de uma classe, desde que o nome das classes sejam separados por um espaço.

<p class ="corum cordois"> 
Aqui não há erro.
</p>

Ao criar uma classe você talvez queira que ela seja aplicável a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual você deseja atribuir cor azul:

.cortres {
	color: #0000FF;
	}

No exemplo a seguir tanto o cabeçalho <h2> como o parágrafo <p> terão cor azul:

<h2 class="cortres">
Este cabeçalho é azul.
</h2>
	
<p class="cortres">
Este parágrafo é azul.
</p >

 

O seletor ID

O seletor ID difere do seletor de classe, por ser ÚNICO. Um seletor ID só pode ser aplicado a UM e somente UM elemento HTML dentro do documento.

 

 

 

Você pode "inventar" um nome e com ele criar uma ID a qual definirá as regras CSS. Uma ID só pode ser aplicada a UM elemento HTML.

A sintaxe para o seletor ID é mostrada abaixo. Um nome qualquer que você "inventa" precedido de # ("tralha", "jogo-da-velha" :-)):

#minhaID {
propriedade: valor;
	}

Nota: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: Use só letras!

 

Conteudo retirado do site:

http://www.maujor.com

 

ESPERO TER LHE AJUDADO!!!

ABRACOS!!!!

[Eliel 0]

Olá Uélio firmeza?

 

Obrigado pela resposta, só que o que eu queria mesmo era mais alguns detalhes do uso dos pontos e das vírgulas tanto da escrita do css, como a explicação de como chamá-los la no html, por exemplo eu sei que se utilizo o # estou indicando que é a o id o . indica a classe mais eu tenho algumas dúvidas quanto a aplicação disso no html. Era isso especificamente que eu queria saber!

 

De qualquer forma agradeço pela contribuição eu até salvei o conteúdo no meu pc!

vlw!

[inforsis 1]

Eliel, Boa Noite!

 

#menu4 li a:link, #menu4 li a:visited
{
	color: #9E3C02;
	display: block;
	background: url(menu4.gif);
	padding: 8px 0 0 30px;
}

Esse bloco de códigos indica que: os seletores #menu4 li:link e o seletor menu4li a:visited terão as mesmas regras de estilo.

A , (virgula) no caso serve para separar os seletores no agrupamento. (Pesquise aqui no fórum sobre agurpamento de seletores (tem um conteudo legal).

 

ul {
list-style: none;
margin: 0;
padding: 0;
text-align:left
}

Já este bloco, indica que as regras valem para toda tag ul, por isso não se defini uma id ou classe para a mesma. (por este motivo que não foi usado o .(ponto definie a declaração de uma classe).

 

.my_panel_inner_wide h2, .home_panel_inner_wide h2 { width: 200px; }

Este bloco vale a mesma explicação para o primeiro bloco, no entanto aqui é separado seletores de classe.

 

quando ele chamar isso dentro do html como ele chamaria este u?

dentro da propriedade id? ou dentro do propriedade class?

Essa tag é ul, é chamada no html normalmente, lendo a explicação logo acima entenderá. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Qualquer nova dúvida post, lembre-se sempre de usasr a Busca do Fórum iMasters, existe muito ]conteúdo que pode te ajudar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Eliel 0]

Puxa cara valeu agora entendi, juntei seu conteúdo com o da resposta anterior muito obrigado!

[inforsis 1]

Ok, Qualquer nova dúvida é so postar.

Lembrando de usar a busca sempre claro.

 

Busca do Fórum iMasters