O significado dos grupos no CSS
Você já se perguntou como a magia acontece nos bastidores do seu site?
Como as cores, fontes e estilos são definidos para criar uma experiência visual envolvente para seus visitantes?
Neste artigo vamos fazer um passeio pelo mundo do design de sites, vamos explorar o que está por trás das princais linguagens, analisando o código CSS que dá vida à estética do seu site.
Você vai entender o significado de cada grupo de estilos.
Bora lá!
Na caixa abaixo estará todo código após ele vou explicar o que cada grupo representa no código CSS:
"/* Variable definitions
====================
<Group description="Cor de fundo do menu" selector=".menu-outer ">
<Variable name="menu.background.color" description="Background Color" type="color" default="#141414" value="#5e1098"/>
<Variable name="menu.selected.background.color" description="Cor do fundo do menu hover" type="color" default="#444444" value="#320952"/>
<Variable name="submenu.background.color" description="Cor de fundo do submenu" type="color" default="#444444" value="#f0eded"/>
<Variable name="submenu.selected.background.color" description="Cor do fundo do submenu hover" type="color" default="#444444" value="#5e1098"/>
</Group>
<Group description="Fontes do menu" selector=".menu-inner .widget li a">
<Variable name="menu.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Calibri"/>
<Variable name="menu.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
<Variable name="menu.selected.text.color" description="Selected Color" type="color" default="$(menu.text.color)" value="#ffffff"/>
<Variable name="submenu.text.color" description="Submenu Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
<Variable name="submenu.text.color.hover" description="Submenu Text Color Hover" type="color" default="$(body.text.color)" value="#ffffff"/>
</Group>
<Variable name="keycolor" description="Main Color" type="color" default="#ffffff" value="#ffffff"/>
<Group description="Page" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.background.color" description="Background Color" type="color" default="#000000" value="#ffffff"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#ffffff" value="#632766"/>
</Group>
<Group description="Links" selector=".main-inner">
<Variable name="link.color" description="Link Color" type="color" default="#888888" value="#41b375"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#444444" value="#0F9D58"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#cccccc" value="#5e1098"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Title Font" type="font"
default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 35px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)" value="#5e1098"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="description.text.color" description="Text Color" type="color"
default="$(body.text.color)" value="#632766"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(tabs.text.color)" value="#5e1098"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#141414" value="transparent"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#444444" value="transparent"/>
<Variable name="tabs.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
</Group>
<Group description="Date Header" selector=".main-inner .widget h2.date-header, .main-inner .widget h2.date-header span">
<Variable name="date.font" description="Font" type="font"
default="normal normal 3px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 3px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="date.text.color" description="Text Color" type="color" default="#666666" value="#888888"/>
<Variable name="date.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
</Group>
<Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
<Variable name="post.title.font" description="Font" type="font"
default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
</Group>
<Group description="Post Background" selector=".post">
<Variable name="post.background.color" description="Background Color" type="color" default="$(widget.background.color)" value="#ffffff"/>
<Variable name="post.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
<Variable name="post.border.bevel.color" description="Bevel Color" type="color" default="$(widget.border.color)" value="transparent"/>
</Group>
<Group description="Gadget Title" selector="h2">
<Variable name="widget.title.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
</Group>
<Group description="Gadget Text" selector=".sidebar .widget">
<Variable name="widget.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#666666" value="#5e1098"/>
</Group>
<Group description="Gadget Links" selector=".sidebar .widget">
<Variable name="widget.link.color" description="Link Color" type="color" default="$(link.color)" value="#444444"/>
<Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#888888"/>
<Variable name="widget.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#5e1098"/>
</Group>
<Group description="Gadget Background" selector=".sidebar .widget">
<Variable name="widget.background.color" description="Background Color" type="color" default="#141414" value="#ffffff"/>
<Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="transparent"/>
<Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="#EEEEEE"/>
</Group>
<Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">
<Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
<Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Feed" selector=".blog-feeds">
<Variable name="feed.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#532766"/>
</Group>
<Group description="Feed Links" selector=".blog-feeds">
<Variable name="feed.link.color" description="Link Color" type="color" default="$(link.color)" value="#888888"/>
<Variable name="feed.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#282828"/>
<Variable name="feed.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#5e1098"/>
</Group>
<Group description="Pager" selector=".blog-pager">
<Variable name="pager.background.color" description="Background Color" type="color" default="$(post.background.color)" value="transparent"/>
</Group>
<Group description="Footer" selector=".footer-outer">
<Variable name="footer.background.color" description="Background Color" type="color" default="$(widget.background.color)" value="#282828"/>
<Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
</Group>
<Variable name="title.shadow.spread" description="Title Shadow" type="length" default="-1px" min="-1px" max="100px" value="-1px"/>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)"
default="$(color) none repeat scroll top left" value="#000000 url(none) repeat scroll top left"/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="none" value="none"/>
<Variable name="body.background.size" description="Body Background Size" type="string" default="auto" value="auto"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="none" value="none"/>
<Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none" value="none"/>
<Variable name="header.padding.top" description="Header Top Padding" type="length" default="22px" min="0" max="100px" value="22px"/>
<Variable name="header.margin.top" description="Header Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="header.margin.bottom" description="Header Bottom Margin" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="8px" min="0" max="20px" value="8px"/>
<Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px" min="0" max="100px" value="15px"/>
<Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="widget.outer.background.gradient" description="Gradient" type="url" default="none" value="none"/>
<Variable name="widget.border.radius" description="Gadget Border Radius" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="outer.shadow.spread" description="Outer Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="date.header.border.radius.top" description="Date Header Border Radius Top" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="date.header.position" description="Date Header Position" type="length" default="15px" min="0" max="100px" value="15px"/>
<Variable name="date.space" description="Date Space" type="length" default="30px" min="0" max="100px" value="30px"/>
<Variable name="date.position" description="Date Float" type="string" default="static" value="static"/>
<Variable name="date.padding.bottom" description="Date Padding Bottom" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="date.border.size" description="Date Border Size" type="length" default="0" min="0" max="10px" value="0"/>
<Variable name="date.background" description="Date Background" type="background" color="transparent"
default="$(color) none no-repeat scroll top left" value="$(color) none no-repeat scroll top left"/>
<Variable name="date.first.border.radius.top" description="Date First top radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
<Variable name="date.last.space.bottom" description="Date Last Space Bottom" type="length"
default="20px" min="0" max="100px" value="20px"/>
<Variable name="date.last.border.radius.bottom" description="Date Last bottom radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
<Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="image.shadow.spread" description="Image Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="image.border.radius" description="Image Border Radius" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="separator.outdent" description="Separator Outdent" type="length" default="15px" min="0" max="100px" value="15px"/>
<Variable name="title.separator.border.size" description="Widget Title Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
<Variable name="list.separator.border.size" description="List Separator Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
<Variable name="shadow.spread" description="Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
<Variable name="date.side" description="Side where date header is placed" type="string" default="$(endSide)" value="right"/>
<Variable name="pager.border.radius.top" description="Pager Border Top Radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
<Variable name="pager.space.top" description="Pager Top Space" type="length" default="1em" min="0" max="20em" value="1em"/>
<Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none" value="none"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string"
default="$(body.background.size)" value="auto"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>
*/
"
- GRUPO 1 - (Group description="Cor de fundo do menu")
Cor de fundo do menu . Neste grupo, são definidas as cores de fundo para o menu do site. Isso inclui a cor de fundo padrão e a cor de fundo quando o mouse paira sobre o menu.
- GRUPO 2 - (Group description="Fontes do menu")
Fontes do menu. Neste grupo, são definidas as fontes e cores de texto para os itens do menu, incluindo a cor do texto padrão e a cor do texto quando um item do menu está selecionado.
- GRUPO 3 - (Group description="Links")
Links. Este grupo lida com as cores dos links no site, incluindo a cor padrão dos links, a cor quando um link é visitado e a cor quando o mouse paira sobre um link.
- GRUPO 4 - (Group description="Blog Title")
Blog Title. Aqui, são definidas as propriedades de estilo para o título do blog, incluindo a fonte, a cor do texto e a cor de fundo.
- GRUPO 5 - (Group description="Blog Description")
Blog Description. Neste grupo, são definidas as propriedades de estilo para a descrição do blog, como a fonte e a cor do texto.
- GRUPO 6 - (Group description="Tabs Text")
Tabs Text. Este grupo trata do estilo dos textos nas abas do site, incluindo a fonte, a cor do texto padrão e a cor do texto quando uma aba está selecionada.
- GRUPO 7 - (Group description="Tabs Background")
Tabs Background. Aqui são definidas as cores de fundo para as abas do site, incluindo a cor de fundo padrão e a cor de fundo quando uma aba está selecionada.
- GRUPO 8 - (Group description="Date Header")
Date Header. Este grupo lida com a estilização dos cabeçalhos de datas, incluindo a fonte, a cor do texto e as bordas.
- GRUPO 9 - (Group description="Post Title")
Post Title. Neste grupo, são definidas as propriedades de estilo para os títulos das postagens, como a fonte e a cor do texto.
- GRUPO 10 - (Group description="Post Background")
Post Background. Aqui são definidas as cores de fundo das postagens, bem como as bordas.
- GRUPO 11 - (Group description="Gadget Title")
Gadget Title. Este grupo lida com o estilo dos títulos dos gadgets, incluindo a fonte e a cor do texto.
- GRUPO 12 - (Group description="Gadget Text")
Gadget Text. Aqui, são definidas as propriedades de estilo para o texto nos gadgets, como a fonte e a cor do texto.
- GRUPO 13 - (Group description="Gadget Links")
Gadget Links. Este grupo trata das cores dos links nos gadgets, incluindo a cor padrão dos links, a cor quando um link é visitado e a cor quando o mouse paira sobre um link.
- GRUPO 14 - (Group description="Gadget Background")
Gadget Background. Neste grupo, são definidas as cores de fundo e as bordas dos gadgets.
- GRUPO 15 - (Group description="Sidebar Background")
Sidebar Background. Aqui são definidas as cores de fundo para a barra lateral do site.
- GRUPO 16 - (Group description="Images")
Images. Este grupo lida com as cores de fundo e as bordas de imagens no site.
- GRUPO 17 - (Group description="Feed")
Feed. Aqui, são definidas as cores de texto para os feeds do site.
- GRUPO 18 - (Group description="Feed Links")
Feed Links. Este grupo trata das cores dos links nos feeds, incluindo a cor padrão dos links, a cor quando um link é visitado e a cor quando o mouse paira sobre um link.
- GRUPO 19 - (Group description="Pager")
Pager. Neste grupo, são definidas as cores de fundo para o paginador do site.
- GRUPO 20 - (Group description="Footer")
Footer. Aqui são definidas as cores de fundo e as cores de texto para o rodapé do site.
Cada grupo representa uma seção específica do estilo do site e define várias propriedades de estilo, como cores, fontes e tamanhos. Isso permite personalizar a aparência e o design do site de acordo com as preferências do designer.
Agora que você mais sobre os códigos do seu site, quer se aprofundar ainda mais?
E confira também nosso canal
Quer adicionar mais funcionalidades ao seu site, blog sem se preocupar com código e programação?
Conheça a plataforma SpanWigget
Experimente agora mesmo e potencialize sua presença digital!
Clique no banner e acesse:
Nenhum comentário:
Postar um comentário