search

Home  >  Article  >  Web Front-end  >  Page declaration structures in CSS

Page declaration structures in CSS

王林
王林Original
2024-07-19 01:56:11947browse

Estruturas de declaração de pagina em CSS

What is CSS

CSS is a language for styling pages in a waterfall style, used to add layouts, animations, geometric shapes, filters, counters, among other settings.

Ways to declare CSS

Inline CSS: Adds CSS using the style attribute within the HTML tags;
Internal CSS: Added inside the of the HTML page;
External CSS: A file with the extension .css is created with all the rules that will be applied and this file in the HTML with the tag .

<head> 
   <link rel="stylesheet"
    href="estilos.css" />
<head/>

Selectors

  • Tag: searches for elements by a tag
  • ID(#): searches for elements using ID
  • Classes(.): "class" attribute
  • Attribute selector ([attrib]): elements with specific attributes
  • Universal (*): Selects all HTML elements

Combinators

Combiners combine levels of tag selectors to which settings will be applied in common.

  • Descendant: tags that descend from another are applied with a space between them. Example: 
div span{
    regra: CSS;
}
  • Child: All immediate child elements connected with ">". Example 
ul > li{
   regra: CSS;
}
  • Adjacent sibling: The first element that follows directly connected with "+". Example: 
ul + li {
   regra: CSS;
} 
//Nesse caso, havendo mais que um elemento li na lista, somente o primeiro receberá a regra
  • Sibling General: Connects all elements that have the same parent with "~". Example: 
p ~ span{
    regra: css;
}

The above is the detailed content of Page declaration structures in CSS. For more information, please follow other related articles on the PHP Chinese website!

css html class
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Flexbox Cheatsheet : Learn in Easy WayNext article：Flexbox Cheatsheet : Learn in Easy Way

Related articles

See more