css: basics and text

最新推荐文章于 2025-12-15 18:15:00 发布

原创最新推荐文章于 2025-12-15 18:15:00 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #attributes #html #properties #types #rest

html & CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了三种CSS选择器：直接应用于HTML元素的选择器、唯一选择器及普通选择器，并探讨了块级元素与行内元素的区别。此外，还详细解释了相对定位的方法及其属性设置技巧，包括'left'和'top'属性的应用。最后，文章列举了一些常见的文本属性，如颜色、字体系列、字号等。

three types of selector

1. directly apply to html element.

p{ text-align: center; color: red; font-family: times new roman; font-size: 25pt; font-style: bold; }

2. unique selector that occurs at most once in a html file.

#headerStyle{ font: italic bold 12px/20px arial,sans-serif; }

3. normal selector that can occurs any times in one html file.

.blockStyle{ position: relative; top: 20pt; left: 25pt; }

block element and line element.

Most of html elements are block elements, that means the content contained by a block element is viewed as a block, not a line. The rest are line elements such as '<em></em>'

position

The favorite position method is relative position.

Tips: 'left' and 'top' properties are available if the 'position' property is 'relavtive' or 'absolute'.

details:

For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element.

For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

For example:

.divStyle{ position: relative; top : 25; left: 20; }

text attributes

common attributes: color, font-family, font-size.

line spacing: line-height. The unit of value can be 'pt', 'em' and 'percentage', and 'em' and 'percentage' are recommended.

word spacing: word-spacing. The unit of value is same to line-height.

synthesis attribute: font, which is a synthesis of a bundle of attributes about real font.

The format of 'font' is 'font-style font-variant font-weight font-size/line-height font-family'.

For example: font: italic bold 12px/20px arial,sans-serif;

text decoration: text-decoration: underline | overline | linethrough | blink.