Help:CSS

From binaryoption
Jump to navigation Jump to search
Баннер1
  1. Help:CSS

Introduction to CSS in MediaWiki

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML. In the context of MediaWiki, CSS allows you to customize the look and feel of your wiki—from the colors and fonts to the layout and positioning of elements. While MediaWiki provides a default appearance, CSS empowers you to tailor the wiki's visual presentation to match your specific needs and preferences, creating a unique and branded experience. This guide will provide a comprehensive introduction to CSS within the MediaWiki environment, geared towards beginners.

Why Use CSS in MediaWiki?

There are several compelling reasons to learn and utilize CSS in your MediaWiki installation:

  • **Customization:** CSS allows for extensive customization beyond the available wiki settings. You can change almost any visual aspect of the wiki.
  • **Consistency:** By defining styles in CSS, you ensure a consistent look and feel across all pages, improving user experience.
  • **Branding:** CSS enables you to incorporate your organization's branding elements, such as logos, colors, and fonts.
  • **Accessibility:** Well-written CSS can improve the accessibility of your wiki for users with disabilities. Consider using semantic HTML and appropriate color contrast ratios.
  • **Maintainability:** Centralized style definitions in CSS make it easier to maintain and update the wiki's appearance. Changes to the CSS cascade throughout the entire wiki, rather than needing to be applied to each page individually.
  • **Responsiveness:** CSS can be used to create responsive designs that adapt to different screen sizes and devices. This is crucial for modern web browsing habits. (See Help:Mobile access for more context).

Where to Add CSS in MediaWiki

MediaWiki provides several locations where you can add CSS rules. The most common and recommended methods are:

  • **`MediaWiki:Common.css`:** This is the *global* stylesheet. Changes made here affect *all* users and all skins on the wiki. This is generally the best place for core customizations that should apply to everyone. Requires administrator privileges.
  • **`MediaWiki:SkinName.css`:** This stylesheet applies only to a specific skin (e.g., `MediaWiki:Vector.css` for the Vector skin). This allows you to customize the appearance of individual skins without affecting others. Requires administrator privileges. Using skin-specific CSS is useful for tailoring the look and feel for different user preferences.
  • **`User:YourUsername/vector.css` (or equivalent for other skins):** This is a *user-specific* stylesheet. Changes made here affect only *your* view of the wiki. This is ideal for personal preferences or customizations that don't need to be shared with others. You can create this page yourself without administrator privileges. The filename will change depending on the skin you are using; for example, `User:YourUsername/monobook.css` for the Monobook skin.
  • **Page-Specific CSS (using `<style>` tag):** You can embed CSS directly within a wiki page using the `<style>` tag. This is generally discouraged for global styles, as it can make maintenance difficult. However, it can be useful for applying styles to specific content on a single page. Be mindful of the performance implications of inline styles.

Basic CSS Syntax

CSS rules are composed of two main parts: a *selector* and a *declaration block*.

```css selector {

 property: value;
 property: value;

} ```

  • **Selector:** The selector identifies the HTML element(s) to which the style will be applied. Selectors can be based on element type (e.g., `p` for paragraphs), class name (e.g., `.my-class`), ID (e.g., `#my-id`), or a combination of these.
  • **Declaration Block:** The declaration block contains one or more declarations, separated by semicolons. Each declaration consists of a *property* and a *value*. The property specifies the aspect of the element to be styled (e.g., `color`, `font-size`, `background-color`), and the value specifies the desired setting for that property (e.g., `red`, `16px`, `#ffffff`).

Common CSS Selectors

Understanding CSS selectors is crucial for targeting the elements you want to style. Here are some common selectors:

  • **Element Selector:** Selects all elements of a specific type.
   *   Example: `p { color: blue; }` (Selects all paragraphs and sets their color to blue.)
  • **Class Selector:** Selects all elements with a specific class attribute. Class names are prefixed with a dot (`.`).
   *   Example: `.important { font-weight: bold; }` (Selects all elements with the class "important" and sets their font weight to bold.)
  • **ID Selector:** Selects a single element with a specific ID attribute. ID names are prefixed with a hash (`#`). IDs should be unique within a page.
   *   Example: `#header { background-color: #f0f0f0; }` (Selects the element with the ID "header" and sets its background color.)
  • **Attribute Selector:** Selects elements based on their attributes.
   *   Example: `a[href^="https://"] { color: green; }` (Selects all `<a>` elements with an `href` attribute that starts with "https://" and sets their color to green.)
  • **Descendant Selector:** Selects elements that are descendants of another element.

* Example: `div p { color: red; }` (Selects all paragraphs that are inside a `

` element and sets their color to red.)
  • **Child Selector:** Selects elements that are direct children of another element.
* Example: `ul > li { list-style-type: square; }` (Selects all `
  • ` elements that are direct children of a `
  • Баннер