Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > Page declaration structures in CSS

Page declaration structures in CSS

王林
Release： 2024-07-19 01:56:11
Original
960 people have browsed it

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/>
Copy after login

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;
}
Copy after login
  • Child: All immediate child elements connected with ">". Example 
ul > li{
   regra: CSS;
}
Copy after login
  • 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
Copy after login
  • Sibling General: Connects all elements that have the same parent with "~". Example: 
p ~ span{
    regra: css;
}
Copy after login

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!

source：dev.to
Previous article：Flexbox Cheatsheet : Learn in Easy Way Next article：Mastering CSS Specificity: Simplified Guide
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2037
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2197
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1851
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1744
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1763
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template