CSS Sözde Sınıflar, Öğeler ve Kurallar Dizini – 12'den Fazla Kolay Kod Örneği ile
CSS Sözde Sınıflar, Öğeler ve Kurallar Dizini – Kod Örnekleriyle Bir Kullanım Kılavuzu
CSS Sözde Sınıflar, Öğeler ve Kurallar Dizini mi arıyorsunuz? Okumaya devam etmek…
Notlar: Seçicinin sonunda hem sözde öğeler hem de sözde sınıflar belirtilir ve ardından herhangi bir diğer öğeye göre CSS kuralları ve stil bildirimleri küme parantezleri {} içinde gelir.
Bunun yerine CSS'nin ne olduğuna dair bir genel bakış mı arıyorsunuz? Veya bir CSS Özellikleri Dizini ?
Bu CSS Sözde Sınıflar, Öğeler ve Kurallar Dizini'ni yararlı bulacağınızı umuyoruz ve şu anda yeni bir web sitesi, blog veya e-ticaret mağazası oluşturuyorsanız – ilgileniyorsanız, Blogumuzda da göz atmayı unutmayın. görevlerinizden herhangi birini çevrimiçi olarak dış kaynak kullanımı.
:link
By default browsers will display un-visited links underlined and in blue, and links which have been visited in a different colour. The :link pseudo-class lets you set the styling for links which have not yet been visited.
EXAMPLE CSS:
a:link { color: red; text-decoration: underline;}
Notes: As with other elements, any CSS styling can be applied to a link element using the :link pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.
:visited
By default browsers will display un-visited links underlined and in blue, and links which have been visited in a different colour. The :visited pseudo-class lets you set the styling for links which have already been visited by the user.
EXAMPLE CSS:
a:visited { color: green; text-decoration: strikethrough;}
Notes: As with other elements, any CSS styling can be applied to a link element using the :visited pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.
:hover
The three pseudo-classes of :hover, :active, and :focus allow you to style elements according to how a user interacts with them. The :hover pseudo-class is used to alter the styling of an element when the user hovers over it with their mouse cursor or other pointing device.
EXAMPLE CSS:
a:link { color: red; text-decoration: underline;}
a:hover { color: orange; text-decoration: none;}
Notes: As with other elements, any CSS styling can be applied to an element using the :hover pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.
:focus
The three pseudo-classes of :hover, :active, and :focus allow you to style elements according to how a user interacts with them. The :focus pseudo-class is used to alter the styling of an element when that element is deemed to be in focus. A browser will determine that an element is in focus when it detects that you are ready to interact with that element. An example of this is a form text input form; when your cursor moves into that text box; the browser detects that you are about to start writing something, so that element is said to be in focus.
EXAMPLE CSS:
input { padding: 5px; border 2px solid grey; color:#FFFFFF;}
input.textbox { color: azure;}
input.textbox:focus { color: cadetblue}
Notes: As with other elements, any CSS styling can be applied to an element using the :focus pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.
:active
The three pseudo-classes of :hover, :active, and :focus allow you to style elements according to how a user interacts with them. The :active pseudo-class is used to alter the styling of an element when the user is clicking a link or pressing a button for example. The effect, or alteration to the styling, is instantaneous with the action being performed.
EXAMPLE CSS:
a:link { color: red; text-decoration: underline;}
a:active { color: yellow; text-decoration: blink;}
Notes: As with other elements, any CSS styling can be applied to an element using the :active pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.
Currently reading: Index of CSS Pseudo-Classes, Elements and Rules.
Related: What is CSS?
Related: The Structure of CSS
:first-letter
The :first-letter pseudo-element is used to style the first letter of an element, differently to the rest of that element.
EXAMPLE CSS:
p.article-intro:first-letter { font-size: 150%; color: blue;}
Notes: Pseudo-elements act like an additional element in the code. In this case, it is as if an extra element encloses the first letter of the paragraph and has its own styling, different to that of the remainder of the paragraph.
:first-line
The :first-line pseudo-element is used to style the first letter of an element, differently to the rest of that element.
EXAMPLE CSS:
p.article-intro:first-line { font-weight: bold; text-decoration: none; color: blue;}
Notes: Pseudo-elements act like an additional element in the code. In this case, it is as if an extra element encloses the entire first line of the paragraph and has its own styling, different to that of the remainder of the paragraph.
:first-child
The :first-child selector is used to select the specified selector (that element/class/id which sits infront of the :first-child rule) only if it is the first child of its parent element.
EXAMPLE CSS:
p:first-child { color: yellow;}
img:first-child { border: 5pt solid blue;}
Notes: The two rules above will only be applied to <p> and <img> elements respectively, if those elements are the first child of each of their respective parent/containing elements.
:before
The :before pseudo-element is used to insert some desired content, before the main content of a given element. This might typically be a small image file to group a number of similar elements together and signify their relationship.
EXAMPLE CSS:
h1.sports-headline:before {content:url(images/sports.png);}
Notes: Though it can be left empty and given a value content: “”, the content property must always be included in the :before declaration for the this pseudo-element to work. Quotation marks (“” or ‘’) are also omitted for any url declaration made inside a :before pseudo-element.
:after
The :after pseudo-element is used to insert some desired content, after the main content of a given element. This might typically be a small image file to group a number of similar elements together and signify their relationship.
EXAMPLE CSS:
h1.sports-headline:after {content:url(images/sports.png);}
Notes: Though it can be left empty and given a value content: “”, the content property must always be included in the :after declaration for the this pseudo-element to work. Quotation marks (“” or ‘’) are also omitted for any url declaration made inside a :after pseudo-element.
Currently reading: Index of CSS Pseudo-Classes, Elements and Rules.
Related: What is CSS?
Related: The Structure of CSS
@font-face
@font-face is used to specify and include a font which might not be installed on a user’s computer. Typically, a declaration will be made for the font-family name of the font to be used, along with an src file path to tell the users browser where to find the font. The users browser will then download and use a local copy of the specified font. Once the @font-face property has been used to load a specific font, follow on CSS rules can refer to the same font, using just the font-family property.
EXAMPLE CSS:
@font-face { font-family: ‘TWPScustom’; src: url(‘fonts/TWPScustom.eot’);}
p.custom-font { font-family: TWPScustom, Georgia, serif;}
Possible attributes: font-family; specifies the name of the font to be used, src; specifies the file path to locate the font file (often multiple file paths and font files need to be specified to gain consistent results across the different browsers), format; specifies the format that a font is provided in (eot, woff, ttf/otf, svg etc.).
@import rule
The @import rule is included in CSS stylesheets where additional stylesheets are to be imported and accessed. The @import rule is typically placed at the top of the CSS stylesheet.
EXAMPLE CSS:
@import url{“css/twps-tables.css”)
@import url{“css/twps-typography.css”)
body { width: 960px; color: white; background-image: url(“images/twps-icon.png”); background-attachment: fixed;}
h2 { background-color: #efefef;}
h4 { background-color: blue;}
Notes: Multiple stylesheets can be imported in the same way, using the @import rule. An alternative would be to add additional <link> elements to the <head> section of your HTML document, each linking to a different stylesheet.
!important
!important can be placed immediately after any CSS property value, to indicate that that value is more important than any value arising from another rule which might apply to the same element.
EXAMPLE CSS:
p { color: red !important;}
p.green { color: green;}
Notes: Even though the latter rule has greater specificity and would normally be the one applied to the <p> element, the !important rule overrides this to ensure that any <p> element which is given a class of “green”, is coloured green.
Index of CSS Pseudo-Classes, Elements and Rules – Learn More about CSS
Currently reading: Index of CSS Pseudo-Classes, Elements and Rules.
