Inleiding tot CSS-opdrachten

CSS staat voor Cascading Style Sheets. Het wordt gebruikt om de presentatie van het document te beschrijven die is geschreven in een opmaaktaal zoals HTML. Het doet het werk van de scheiding van presentatie en inhoud die verschillende lay-out, kleuren en lettertypen omvat. De scheiding biedt flexibiliteit en controle over de verschillende kenmerken waardoor meerdere webpagina's opmaak kunnen delen door relevante CSS te specificeren. De CSS-specificaties worden onderhouden door World Web Consortium. Daarnaast biedt het ook specifieke regels die helpen bij alternatieve opmaak als de inhoud wordt benaderd vanaf een mobiel apparaat.

Basic CSS-opdrachten

1. CSS-syntaxis: er zijn een aantal regels die moeten worden gevolgd in CSS Command. De CSS-regelset bestaat uit een selector en een aangifteblok. De selector wordt gebruikt om te verwijzen naar het HTML-element dat de gebruiker wil stijlen. Het aangifteblok kan een of meer aangiften bevatten die kunnen worden gescheiden door puntkomma's. Elke verklaring moet een eigenschapsnaam met de waarde ervan bevatten, gescheiden door dubbele punten.

2. ID selector : de id selector kan de id van een kenmerk van HTML-element gebruiken en helpen bij het selecteren van een bepaald element. Het wordt gebruikt om één uniek element te selecteren en dit element moet uniek zijn voor die pagina. Om een ​​element met een bepaald ID te selecteren, wordt '#' gebruikt en dit wordt gevolgd door het ID van dat element.

3. Klasselector: Om een ​​bepaald klassenkenmerk te selecteren, wordt de klassenkiezer gebruikt om de elementen uit die klasse te selecteren. Om elementen in een specifieke klasse te gebruiken, wordt een punt (.) Gebruikt. Het wordt gevolgd door de naam van de klas. Hiermee kan, als de gebruiker wil dat alleen specifieke elementen worden gebruikt, alleen die worden gespecificeerd door een klasse.

4. Groeperingsselectoren: er zijn momenten dat elementen dezelfde stijldefinities hebben. Een betere optie is om ze samen te groeperen en de code te minimaliseren. Voor de groep kan de gebruiker van de selector gebruik maken van een komma en elke selector scheiden

5. Opmerkingen: deze CSS-opdrachten zijn aan te raden bij het schrijven van code. Ze geven duidelijkheid over wat de code doet en helpen u of iemand anders die nieuw is aan de code om eraan te werken. Reacties worden genegeerd door browsers. Een CSS-opmerking begint en eindigt met / * * /.

6. Display: Block - Veel HTML-elementen zijn ingesteld op deze weergavemodus. Standaard nemen de blokniveau-elementen evenveel ruimte in en kunnen ze niet op dezelfde regel worden geplaatst met een andere weergavemodus. Het is mogelijk om de mogelijkheid te krijgen om de hoogte en breedte van het element naar wens te wijzigen.

7. Kleuren in CSS: in deze CSS-opdrachten kunnen kleuren worden opgegeven in de RGB-formule. Elke parameter definieert de intensiteit van deze kleuren en definieert een nieuwe kleur. Als u bijvoorbeeld zwart wilt weergeven, moeten alle kleurparameters zijn ingesteld op RGB (0, 0, 0).

8. Achtergrondkleur: de eigenschap achtergrondkleur definieert de kleur die moet worden ingesteld voor de achtergrond van een element. Kleur kan eenvoudig worden gedefinieerd door een kleurnaam te geven, een Hex-waarde toe te voegen of de RGB-waarde in te stellen

9. Achtergrondafbeelding: de achtergrondafbeelding kan worden ingesteld op een bepaalde afbeelding naar keuze. Zodra de afbeelding is ingesteld, wordt deze herhaald en bedekt deze het hele element.

10. CSS-marges: CSS Command heeft verschillende marge-eigenschappen die kunnen helpen bij het creëren van ruimte rond verschillende elementen en definieert ook deze buitengrenzen. CSS kan eigenschappen hebben zoals margin-top, margin-right, margin-bottom en margin-left.

Gemiddelde CSS-opdrachten

1. Klasse- en ID-selectors: naast de HTML-tag kan een gebruiker eigen selectors definiëren in de vorm van klasse of ID. Het belangrijkste gebruik hiervan is dat u hetzelfde HTML-element kunt hebben en het anders kunt presenteren op basis van de ID of de klasse die nodig is.

2. Pseudoklasse: deze klassen worden gebruikt om een ​​bepaalde status of relatie met een bepaalde selector op te geven. Deze klassen kunnen ook de vorm hebben van een selector: pseudo_class (property: value; ). Deze klasse wordt gedefinieerd door eenvoudig een dubbele punt te geven tussen de selector en de pseudoklasse.

3. Tekstopmaak: de toegevoegde teksten kunnen worden aangepast en opgemaakt door gebruik te maken van de opmaakeigenschappen. De kleur kan worden gewijzigd met het trefwoord 'kleur'. Hetzelfde geldt voor het uitlijnen van tekst. Door gebruik te maken van tekstdecoratie kunnen decoraties worden ingesteld en verwijderd. Transformaties kunnen worden uitgevoerd met betrekking tot cases.

4. CSS-lettertypen: lettertypen in CSS hebben verschillende families zoals generieke familie en lettertypefamilie. De lettertypefamilie is een familie van teksten. De generieke met een groep gezinnen met een vergelijkbaar uiterlijk en een lettertype met een specifiek lettertype.

5. Pictogrammen: door gebruik te maken van de pictogrammenbibliotheek en de naam van de opgegeven pictogramklasse toe te voegen, kunnen pictogrammen eenvoudig in CSS worden gebruikt.

6. Tabellen: CSS kan ook tabellen weergeven en helpen bij het aanpassen met randen, hun breedte en hoogte. Door trefwoorden als 'border', 'width' en height te gebruiken, kan de gebruiker eenvoudig tabellen op een webpagina plaatsen.

7. Positionering: deze eigenschap geeft het type positioneringsmethode aan dat voor elk element kan worden gebruikt. Deze positie kan statisch, relatief, vast, absoluut of plakkerig zijn.

8. Overloop: deze eigenschap helpt bij het regelen van de inhoud die te groot is om in een gebied te passen.

9. Float: de eigenschap float laat het element weten hoe het moet zweven. Het geeft aan welke elementen naast de gewiste elementen kunnen zweven.

10. Dekking: deze eigenschap definieert de dekking of transparantie van elk element.

Geavanceerde CSS-opdrachten

1. CSS afgeronde hoeken: door gebruik te maken van de eigenschap 'border-radius' kan een element afgeronde hoeken krijgen. U kunt ook een bepaalde hoek uit de vier hoeken opgeven en de wijzigingen aanbrengen volgens uw keuze.

2. Randafbeeldingen : u kunt een afbeelding instellen als de rand rond elk element. Dit is mogelijk door gebruik te maken van een eigenschap border-image. Het neemt de afbeelding en snijdt het in negen secties en plaatst vervolgens de hoeken op hoeken en middelste secties worden herhaald of uitgerekt.

Tips en trucs om CSS-opdrachten te gebruiken:

  • Maak gebruik van reset.css en reset alle fundamentele stijlen.
  • Gebruik Shorthand CSS om op een kortere manier Command CSS-codes te schrijven.
  • Gebruik CSS-foutopsporingshulpmiddelen om de CSS-opdrachtstijlen aan te passen, te begrijpen en te debuggen.

Conclusie

CSS Command helpt u om de informatie-inhoud van een document gescheiden te houden en helpt bij het weergeven ervan. Het helpt duplicatie te voorkomen, de code eenvoudig te onderhouden en dezelfde inhoud met verschillende stijlen te gebruiken.

Aanbevolen artikelen

Dit is een gids voor CSS-opdrachten geweest. Hier hebben we basis-, intermediaire en geavanceerde CSS-opdrachten besproken. U kunt ook het volgende artikel bekijken voor meer informatie -

  1. Top MySQL-opdrachten
  2. PL / SQL-opdrachten
  3. Hoe SQL-opdrachten te gebruiken
  4. Hoekige opdrachten

Categorie:

Software ontwikkeling