Nieuw materiaal over CSS. Inclusief CSS in HTML-code

Veel plezier allemaal. Hoe maak je een vizierpunt in KSS?- een vraag die velen interesseert, maar we hebben er op internet geen antwoord op gevonden deze vraag en besloot het zelf te beantwoorden. In feite zijn er veel manieren om van het draadkruis een punt te maken in CSS, zowel op CSS v34 als daarop nieuwe CSS v90 en hoger. We zullen u hieronder in volgorde over alle methoden vertellen. Dus laten we beginnen.

Hoe maak je een dradenkruispunt in CSS v34

Methode één. Uitzoomen

De eerste manier om in KSS versie 34 een punt te maken is door het zo te verkleinen dat het op een punt lijkt. Ons vizierpunt ziet er uit zoals in de onderstaande afbeelding. Om zo'n puntvizier te maken, volgt u de onderstaande instructies:

Hierna kunt u genieten van het nieuwe puntvizier, waardoor uw schietnauwkeurigheid toeneemt, omdat het voor velen veel handiger is om met een puntvizier te richten dan met een gewoon richtkijker. Vooral op lange afstanden.

Methode twee. Laser zicht downloaden

De tweede methode is erg interessant. U kunt een laservizier voor de KSS downloaden, waarmee u in plaats van een nachtzichtapparaat een laservizierpunt in het midden van het scherm krijgt. Zeer comfortabel en originele manier een zichtpunt maken.

Downloaden .
Map materialen vanuit het archief plaatsen we het in een map cstaking Jouw CSS.
Ga vervolgens naar de server, koop een nachtzichtapparaat en druk op de knop N. Klaar!

Methode één. Via instellingen

Zeer goed en effectieve manier maak van het draadkruis een punt in CSS via instellingen. Gelukkig nieuw CSS-versies hebben zeer flexibele instellingen zicht en je kunt het configureren zoals je wilt. Er zijn twee opties: een vizierpunt maken via de console of via de spelinstellingen.

Als u besluit een vizierpunt te maken via de instellingen, ga dan naar instellingen > netwerkmodus en stel het vizier op zoals weergegeven in de afbeelding hierboven.

Als u instellingen via de console wilt uitvoeren, opent u de console zelf met de E (~)-toets en voert u daar één voor één de volgende opdrachten in:

Cl_kruishaargrootte 0 cl_kruishaardot 1 cl_kruishaardikte 3

Methode twee. Laser zicht

Je kunt ook een vizierpunt maken via een laservizier, zoals we hierboven deden voor CSS v34. Om dit te doen, downloadt u , installeer het, ga naar het spel, koop een nachtkijker en druk op de knop N. Hierna hebben we een laservizierpunt in het midden van het scherm, waarmee we zonder problemen kunnen spelen en iedereen in het hoofd kunnen doden.

CSS (Trapsgewijze stijlbladen) zijn trapsgewijze stijlbladen. Of om het nader uit te leggen in duidelijke taal, CSS is een technologie voor het beschrijven van het uiterlijk van pagina's waarin is geschreven HTML.

De hoofdtaak van stylesheets is het scheiden van de paginacode en de bijbehorende verschijning. Je vraagt je misschien af: " Waarom moet je dit doen?". Het antwoord ligt voor de hand: " Voor meer mobiliteit". Laten we inderdaad zeggen dat je een website hebt met 100 pagina's (dit is nogal wat). Laten we zeggen dat het lettertype van de gewone tekst op je website 15pt is. En stel je voor dat je het niet 15pt, maar 17pt wilt maken, wat zal je doet?

Als je niet gebruikt CSS, dan moet je elk van de 100 pagina's corrigeren, op elke plaats waar tekst wordt ingevoegd, van 15pt tot 17pt. Uiteraard zal dit enkele uren duren.

Als u gebruikt CSS, dan hoeft u alleen maar te openen speciaal bestand met stijlen, zoek de lettergrootte in dit bestand en wijzig deze slechts één keer van 15pt in 17pt. En uw site zal volledig en onmiddellijk worden getransformeerd. Ik zwijg al over de massa aan mogelijkheden voor het creëren van ongebruikelijke ontwerpoplossingen met behulp van CSS, wat niet alleen met hulp kan worden gerealiseerd HTML.

Ik weet zeker dat je het voordeel al hebt gerealiseerd CSS vóór de gebruikelijke "mix" van structuur en stijl.

En nu staat hij op belangrijkste vraag: hoe je kennis kunt maken met deze prachtige technologie en waar je hier ongetwijfeld meer over kunt leren belangrijk deel het maken van uw website zodat u nog meer informatie heeft over: " ".

Eigenlijk heb je al gevonden wat je zocht: in deze sectie site bevat informatie over waar u alles te weten kunt komen selecteurs en CSS-attributen , die u zeker nodig zult hebben bij het maken van een website-ontwerp.

Cursus voltooien HTML, CSS en website-indeling:

CSS staat voor “cascading style sheets” (uit het Engels. Cascading Style Sheets). CSS is een reeks parameters die worden gebruikt om een bepaald element op een webpagina weer te geven. Deze parameters kunnen in een afzonderlijk bestand worden opgegeven of rechtstreeks in de HTML-code van de pagina worden geschreven. Op onze webpagina kunnen bijvoorbeeld de volgende elementen voorkomen: titel van het artikel, paragrafen, citaten, voetnoten, afbeeldingen, video's, links. U kunt een specifieke weergavestijl instellen: grootte, kleur, framedikte, enz.

Wanneer u met een website werkt, is het raadzaam een apart bestand met stijlen te gebruiken, in plaats van code met stijlinstellingen erin in te sluiten individuele pagina's. Dit zal de tijd aanzienlijk verkorten: als u de locatie van het stijlblad kent, kunt u altijd snel een specifieke stijl vinden en deze bewerken. Het stijlbestand heeft de extensie .css, de naam is meestal stijl.css.

Het CSS-bestand verbinden

Er zijn verschillende manieren om een CSS-bestand op te nemen. We zullen het hebben over twee methoden die het meest worden gebruikt bij het maken van websites:

1. Koppelen. Deze methode wordt gebruikt wanneer u stijlen voor alle pagina's van een site in één bestand wilt instellen. Deze methode wordt vaak gebruikt bij het maken van een website. Gebruik de opdracht om het stijlblad te verbinden , die in de hoofdtekst van de tag moet worden geplaatst .

De eerste twee eigenschappen geven aan de browser aan dat de site CSS gebruikt, vervolgens wordt het adres van het stylesheetbestand aangegeven.

2. Inbedden in documenttags. Bij deze methode wordt de stijl voor een specifiek pagina-element rechtstreeks in de HTML-code ingesteld. Bijvoorbeeld:

Hier hebben we dienovereenkomstig stijlen voor de containers gespecificeerd

En . Deze stijlen worden exclusief op hen toegepast.

Laten we een voorbeeld geven van een stijlblad: maak een bestand stijl.css en schrijf de stijlen:

body ( lettertypefamilie: Arial, Verdana, Sans-serif; /* Lettertypefamilie */ lettergrootte: 12pt; /* Hoofdlettergrootte in punten */ achtergrondkleur: #f0f0f0; /* Achtergrondkleur webpagina * / kleur: #000000; /* Kleur hoofdtekst */ ) h1 (kleur: #a52a2a; /* Kleur kop */ lettergrootte: 24pt; /* Lettergrootte in punten */ lettertypefamilie: Georgia, Times, serif ; /* Lettertypefamilie */ lettertypegewicht: normaal; /* Normale tekststijl */ )

Hier hebben we stijlen voor de paginatekst ingesteld en voor de titel

. U kunt ook specifieke stijlen instellen voor andere pagina-elementen op uw website.

Laten we nu ons stijlblad verbinden met de site:

CSS aan de site koppelen
Hallo Wereld!

Dit is mijn eerste pagina met CSS-stijlen

Dus we zijn erachter gekomen wat is CSS, Waarvoor deze technologie gebruikt, geleerd hoe je stijlen aan de site kunt koppelen. Deze les is een soort introductie tot trapsgewijze stijlbladen. In andere lessen zullen we meer in detail over CSS-technologie praten.

Dit gedeelte van de site is volledig gewijd aan twee talen voor het maken van een site, namelijk HTML en CSS. Hier kun je stap voor stap talen leren, alles leren, van de basis tot de moeilijkste momenten.

Dit gedeelte is gebaseerd op het principe van stapsgewijze studie van het materiaal. Daarom staat er vóór elke titel van een les over HTML en CSS een overeenkomstig nummer serienummer les. Dit is normaal als je alles vanaf de basis wilt leren en geen rommel in je hoofd wilt maken. Als je al iets weet over de HTML- en CSS-talen, dan kun je hier ook de kennis vinden die je mist, of je verdiepen in wat je al geleerd hebt.

Deze sectie bevat lessen over respectievelijk HTML5- en CSS3-taalstandaarden. Als er nieuwere versies van deze talen zijn, zullen deze ook worden weerspiegeld in de nieuwe lessen in deze sectie, en je zult er zeker achter komen.

Waarschijnlijk heeft iedereen die minstens één keer in zijn leven te maken heeft gehad met het maken van een website zeker gehoord van een dergelijke combinatie als html en css, ik kan met zekerheid zeggen dat als je zelf websites wilt maken, je niet zonder kennis hiervan kunt twee dingen.

Nadat u deze heeft ontvangen algemene concepten Er zit duidelijk een dubbelzinnig beeld in je hoofd over wat HTML is, en ik denk dat dit niet verrassend is. Het is tijd om direct te gaan oefenen en uw eerste HTML-document te maken.

Als in html-taal, en CSS heeft zijn eigen kenmerken, regels en structuur. In deze les vertel ik je over de basisconcepten CSS-taal, over de structuur en het apparaat, en we zullen de eerste met u doen CSS-tabel stijlen en leer hoe u een stijlblad aan een HTML-document koppelt.

Selectors in CSS vormen de basis van de taal zelf en het leren en begrijpen ervan is erg belangrijk, dus in deze les zal ik je over nog meer soorten selectors vertellen en hun mogelijkheden beschrijven.

Erg belangrijk punt bij het maken van een website moet je met tekst werken, en zoals je begrijpt, moet je ook met tekst in html kunnen werken, en weten welke tags er zijn en hoe ze kunnen worden gebruikt.

Nadat je alles hebt ontdekt html-tags om met tekst te werken, is het nu tijd om direct over te stappen op CSS om met tekst te werken, wat uw kennis en mogelijkheden aanzienlijk zal uitbreiden.

In CSS grote hoeveelheid allerlei handige en kwalitatief veranderende eigenschappen en we blijven studeren CSS-werk met tekst en in deze les zullen we ons verdiepen in het onderwerp werken met tekst en kijken naar nieuwe eigenschappen van tekst.

Werken met afbeeldingen bij het maken vanaf een website, een van belangrijkste punten, zowel bij het maken van een ontwerp, als bij het eenvoudigweg opmaken of schrijven van materiaal voor uw site.

CSS breidt de mogelijkheden van het werken met alle HTML-objecten aanzienlijk uit. In deze les wil ik je in detail vertellen over de parameters die op afbeeldingen kunnen worden toegepast.

Hallo, beste lezers van het Anatomy of Business-project. Webmaster Alexander is bij je! In het laatste artikel hebben we gekeken naar wat CSS-stijlen zijn en hoe belangrijk ze zijn bij WEB-programmering.

Het is overduidelijk dat als CSS-stijlen een aanzienlijke impact hebben op de weergave van een HTML-bestand, ze op de een of andere manier met elkaar verbonden moeten zijn. Vandaag zullen we vier belangrijke manieren bekijken om CSS-stijl aan HTML te koppelen.

Laten we de zaak niet uitstellen lange doos en laten we beginnen!

Inclusief een apart CSS-bestand!

Een van de handigste en eenvoudige manieren stijlen verbinden is het verbinden van een apart bestand met stijlen. Om dit te doen, moet je gebruiken teksteditor notepad++ (of een ander) maak een bestand met de extensie .css en plaats het in dezelfde map als het bestand waarin we het willen plaatsen.

Vervolgens in het HTML-bestand tussen de tags plaats de volgende code:

Laten we nu eens kijken naar wat dit allemaal betekent:

Link # vertaald uit het Engels betekent “link”. Zo laten we de browser zien wat we vervolgens gaan doen we zullen praten over de koppeling. rel= # met dit attribuut laten we zien hoe het CSS-bestand zich verhoudt tot het HTML-bestand. "stylesheet" # namelijk dat het CSS-bestand een trapsgewijs opmaakmodel is. type="text/css" # alles is hier eenvoudig: dit is een indicatie dat het bestand is geschreven tekst formaat en heeft de extensie .css href="style.css" # dit is een link naar een bestand met CSS-stijlen.

Naar mijn mening is dit de meest geprefereerde manier om CSS-stijlen op te nemen.

We schrijven stijlen rechtstreeks in het HTML-bestand (eerste methode)

De volgende manier om CSS-stijlen te specificeren is door ze rechtstreeks in het HTML-document te schrijven. Het ziet er zo uit:

De beste blog

Als we kijken hoe dit HTML-document in de browser wordt weergegeven, zien we dat de tekst tussen de tags staat werd rood. En met behulp van het stijlattribuut zeggen we dat we vervolgens weergavestijlparameters hebben. Kleur is een selector die verantwoordelijk is voor kleur. Rood is de waarde van deze selector. Zo kunnen wij onder de aandacht brengen een bepaald soort enkele afzonderlijke delen van de tekst weergeven.

Trapsgewijze stijlbladen in HTML plaatsen (tweede methode)

Een andere manier om CSS-stijlen op te nemen is door te plaatsen trapsgewijze tafels binnen zichzelf HTML-bestand. Naar mijn mening, deze methode is niet het handigste, omdat het analyseren van de sitecode niet erg handig wordt. Om CSS-stijlen te schrijven, hoeft u alleen maar tags in het HTML-bestand in te voegen . In de praktijk ziet het er als volgt uit:

De beste blog

Hier is een voorbeeld: CSS-stijlen weergeven in een HTML-document

Houd er rekening mee dat we in de tag ook code schrijven volgens CSS-regels gebruik makend van beugel. In volgende artikelen zal ik meer in detail praten over de syntaxisregels in CSS.

Meerdere CSS-bestanden verbinden met één HTML-document.

Met HTML-regels kunnen meerdere CSS-bestanden tegelijk worden opgenomen. Veel webmasters maken hier gebruik van: ze maken aparte CSS-bestanden voor tekst en afbeeldingen. Of aparte bestanden voor de koptekst, voettekst en hoofdtekst van de pagina. Laten we uitzoeken hoe we dit kunnen implementeren.

We maken verschillende CSS-stijlbestanden. Laat hun namen style-1.css en style-2.css zijn. We plaatsen het, net als bij methode nummer één, in dezelfde map als het HTML-bestand.

De beste blog

Hier is een voorbeeld: CSS-stijlen weergeven in een HTML-document

Alles is vergelijkbaar met de eerste methode, alleen in in dit geval we bieden links naar twee bestanden tegelijk.

Link naar het CSS-bestand binnenin naar een bestand van hetzelfde type.

Behalve iedereen hierboven de genoemde methoden, is er een manier waarmee je binnen één CSS-bestand naar vele anderen kunt linken!

Dit wordt als volgt geïmplementeerd:
Eerst moeten we minstens één CSS-bestand op dezelfde manier aan uw code koppelen.

Ten tweede voert u de volgende code in het reeds verbonden bestand in:

@import-URL("stijl-2.css");

Deze regel sluit aan op ons bestand extra bestand CSS. Als u er problemen mee heeft CSS verbinden, je kunt ze vragen in de reacties.
Zoals we uit de vorige twee lessen hebben geleerd, CSS-technologie is het krachtigste instrument, die elke webmaster zou moeten beheersen! Om de assimilatie van het materiaal te verbeteren, heb ik besloten om aan het einde van elke les een trainingsvideo + test toe te voegen om de ontvangen informatie te consolideren.

Materiaalfixatietest:

We moeten het CSS-bestand opnemen door er een link naar te plaatsen in het HTML-bestand. Welke van de volgende methoden is correct?

Optie 1:

Optie 2:

Optie 3:

Keuze 4:

Kunnen we CSS-cascades rechtstreeks in het HTML-bestand plaatsen?