CSS notes

最新推荐文章于 2024-09-14 17:59:56 发布

Coder_Writer

最新推荐文章于 2024-09-14 17:59:56 发布

阅读量461

点赞数

分类专栏： Notes 文章标签： css

Notes 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS is used to control the style and layout of multiple Web pages

CSS will define the attribute of element(property+value)

CSS Syntax

A CSS rule set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

id & class

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

To select an element with a specific id, write a hash character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example

 
   #para1 { 
   
   text-align: 
    center; 
   
   color: 
    red; 
   
 }

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period character, followed by the name of the class:

In the example below, all HTML elements with class="center" will be center-aligned:

Example

 
   .center { 
   
   text-align: 
    center; 
   
   color: 
    red; 
   
 }

Multiple Styles Will Cascade into One

Styles can be specified:

in an external CSS file
inside the <head> section of an HTML page
inside an HTML element

Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:

Browser default
External and internal style sheets (in the head section)
Inline style (inside an HTML element)

Try it yourself »

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

	Note: If the link to the external style sheet is placed below the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

List

In HTML, there are two types of lists:

unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as the list item marker.

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:

Explanation of the different parts:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

set the bottom margin in percent, relative to the width of the containing element.

shorthand, top->right->bottom->left