Introduction to Cascading Style Sheets (CSS): Part 1مقدمة في أوراق الأنماط المتتالية (CSS): الجزء الأول
مقدمة الفصل
ماذا ستتعلم في هذا الفصل
- Control a website's appearance with style sheets.
- Use a style sheet to give all the pages of a website the same look and feel.
- Use the class attribute to apply styles.
- Specify the precise font, size, color and other properties of displayed text.
- Specify element backgrounds and colors.
- Understand the box model and how to control margins, borders and padding.
- Use style sheets to separate presentation from content.
أقسام الفصل
- 1CSS3 and inline stylesCSS3 والأنماط المضمنة
- 2Embedded style sheets, selectors and style classesأوراق الأنماط المدمجة والمحددات والأصناف
- 3Conflicting styles: cascade, inheritance and specificityتعارض الأنماط
- 4Length measurementsوحدات القياس
- 5Linking external style sheetsربط أوراق الأنماط الخارجية
- 6Backgrounds and text formattingالخلفيات وتنسيق النص
- 7Element dimensions and overflowأبعاد العناصر والفائض
- 8Box model, borders and floatingنموذج الصندوق والحدود والطفو
- 9Media types, media queries and drop-down menusأنواع الوسائط والاستعلامات والقوائم المنسدلة
- 10(Optional) User style sheetsأوراق أنماط المستخدم (اختياري)
تلميح: استخدم أسهم لوحة المفاتيح للتنقل بين الشرائح.
CSS3 and inline stylesCSS3 والأنماط المضمنة
Used to specify the presentation of elements separately from the structure of the document.
Declares an individual element's format using the HTML5 attribute style.
- Each CSS property is followed by a colon and the value.
- Multiple property declarations are separated by a semicolon.
Embedded style sheetsالأنماط المدمجة
Embeds a CSS3 document in an HTML5 document's head section, inside a style element. Its selectors apply styles throughout the entire document.
- The style element's type attribute gives the MIME type; style sheets use text/css.
- Each rule body is enclosed in curly braces ({ and }).
| MIME typeنوع MIME | Descriptionالوصف |
|---|---|
| text/css | CSS documents |
| image/png | PNG images |
| text/javascript | JavaScript markup |
| text/plain | Plain text |
| image/jpeg | JPEG image |
| text/html | HTML markup |
Font properties and style classesخصائص الخط والأصناف
Embedded style sheets, selectors and style classes
The "boldness" of text: bold, normal (default), bolder, lighter, or 100–900 (normal = 400, bold = 700).
Preceded by a period (.); can be applied to any element, e.g. .special { color: purple; }. id selectors have the form #elementId.
The name of the font. Generic font families specify a type of font in case a browser does not support a specific font.
A point size or an absolute value (xx-small … xx-large). Relative values (smaller, larger) are preferred because the author does not know each client's display.
سؤال سريع
Embedded style sheets, selectors and style classes
Conflicting stylesتعارض الأنماط
Styles may be defined by a user, an author or a user agent. Styles cascade (flow together) — hence "Cascading Style Sheets".
Precedence (slide 20)الأولوية
- Highest
Author styles — take precedence over user styles.
- Then
User styles — take precedence over user-agent styles.
- Lowest
User-agent styles.
- Most styles defined for parent elements are inherited by child (nested) elements.
- Properties defined for child and descendant elements have higher specificity; conflicts are resolved in favor of higher specificity, so the child's styles take precedence.
سؤال سريع
Conflicting styles: cascade, inheritance and specificity
text-decoration and hovertext-decoration و hover
Conflicting styles: cascade, inheritance and specificity
text-decoration values
- underline
- overline
- line-through
- blink
Give you access to content that's not declared in the document. The hover pseudoclass is activated when the user moves the mouse cursor over an element.
Length measurementsوحدات القياس
| Relative (slide 26)نسبية | Absolute (slide 26)مطلقة |
|---|---|
| px — pixels; size varies with screen resolution | in — inches |
| em — usually the height of a font's uppercase M | cm — centimeters |
| ex — usually the height of a font's lowercase x | mm — millimeters |
| % — percentage of the font's default size | pt — points (1 pt = 1/72 in) |
| pc — picas (1 pc = 12 pt) |
Linking external style sheetsالأنماط الخارجية
A separate document that contains only CSS rules. Separate pages can all use the same styles; modifying a single file changes styles across the website — sometimes known as skinning.
The relationship between the two documents (the linked document is a stylesheet).
The MIME type of the related document.
The URL of the document containing the style sheet.
- CSS comments start with /* and end with */ and can be used in any type of CSS code.
سؤال سريع
Linking external style sheets
Backgroundsالخلفيات
The URL of the image: url(fileLocation).
top, bottom, center, left, right individually or combined, or lengths.
no-repeat (one copy), repeat (default: vertical and horizontal), repeat-x (horizontal), repeat-y (vertical).
Fixes the image in the position set by background-position; scrolling will not move it. The default, scroll, moves the image as the user scrolls.
Indents the first line of text by the specified amount.
سؤال سريع
Backgrounds and text formatting
Element dimensionsأبعاد العناصر
- width and height set an element's dimensions; values can be relative or absolute.
- text-align: center, left or right.
- If content exceeds the set boundaries, overflow: scroll adds scroll bars.
The box modelنموذج الصندوق
Box model, borders and floating
From the inside outمن الداخل إلى الخارج
- Content
The element's content.
- Padding
Distance between the content and the inside of the border.
- Border
Controlled by border-width, border-color and border-style.
- Margin
Space between the outside of the border and all other content.
- Each side can be set separately: padding-top / -right / -left / -bottom and margin-top / -right / -left / -bottom.
- border-style options: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
- Floating moves an element to one side of the screen; other content flows around it.
سؤال سريع
Box model, borders and floating
Media types and media queriesالوسائط والاستعلامات
Media types, media queries and drop-down menus
Decide what a page should look like depending on the kind of media used to display it. The most common is screen.
- @media all { … } — styles for all media types.
- @media print { … } — styles for a single media type such as print.
Media features (media queries)
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
Drop-down menusالقوائم المنسدلة
Applies styles to an element when the mouse cursor is over it.
Displays an element as block, inline, or not at all (none).
سؤال سريع
Media types, media queries and drop-down menus
(Optional) User style sheetsأوراق أنماط المستخدم
- Users can define their own user style sheets based on their preferences; they are not linked to a document but set in the browser's options.
- Absolute font sizes override user style sheets; relative font sizes yield to a user-defined style.
الخلاصة
أنهيت الدرس
الخطوة التالية: ثبّت المعلومات بالبطاقات، ثم اختبر نفسك بالأسئلة.
ما راجعته في هذا الدرس
- CSS3 and inline stylesCSS3 والأنماط المضمنة
- Embedded style sheets, selectors and style classesأوراق الأنماط المدمجة والمحددات والأصناف
- Conflicting styles: cascade, inheritance and specificityتعارض الأنماط
- Length measurementsوحدات القياس
- Linking external style sheetsربط أوراق الأنماط الخارجية
- Backgrounds and text formattingالخلفيات وتنسيق النص
- Element dimensions and overflowأبعاد العناصر والفائض
- Box model, borders and floatingنموذج الصندوق والحدود والطفو
- Media types, media queries and drop-down menusأنواع الوسائط والاستعلامات والقوائم المنسدلة
- (Optional) User style sheetsأوراق أنماط المستخدم (اختياري)