کاربر:Zaman/صفحه تمرین/css/8

از ویکی‌کد
پرش به ناوبری پرش به جستجو

کاربر:Zaman/صفحه تمرینcss8

////////////////////////////////////////


CSS unicode-bidi Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Override text:

div {

 direction: rtl;

  unicode-bidi: bidi-override;

}

Try it Yourself »


Definition and Usage

The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.unicodeBidi="bidi-override"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
unicode-bidi 2.0 5.5 1.0 1.3 9.2

CSS Syntax

unicode-bidi: normal|embed|bidi-override|initial|inherit;

Property Values

Value Description Play it
normal The element does not open an additional level of embedding. This is default Play it »
embed For inline elements, this value opens an additional level of embedding Play it »
bidi-override For inline elements, this creates an override. For block elements, this creates an override for inline-level descendants not within another block element Play it »
isolate The element is isolated from its siblings
isolate-override
plaintext
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Text

HTML DOM reference: unicodeBidi property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS user-select Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Prevent text selection of a <div> element:

div {

  -webkit-user-select: none; /* Safari */

  -ms-user-select: none; /* IE 10+ and Edge */

  user-select: none; /* Standard syntax */

}

Try it Yourself »


Definition and Usage

The user-select property specifies whether the text of an element can be selected.

In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.userSelect="none"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
user-select 54.0

6.0 -webkit-

10.0 -ms- 69.0

2.0 -moz-

3.1 -webkit- 41.0

15.0 -webkit-


CSS Syntax

user-select: auto|none|text|all;

Property Values

Value Description Play it
auto Default. Text can be selected if the browser allows it Play it »
none Prevent text selection Play it »
text The text can be selected by the user Play it »
all Text selection is made with one click instead of a double-click Play it »

Related Pages

HTML DOM reference: userSelect property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS vertical-align Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Vertical align an image:

img.a {

 vertical-align: baseline;

}


img.b {

 vertical-align: text-top;

}


img.c {

  vertical-align: text-bottom;

}


img.d {

  vertical-align: sub;

}


img.e {

 vertical-align: super;

}

Try it Yourself »


Definition and Usage

The vertical-align property sets the vertical alignment of an element.

Default value: baseline
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.verticalAlign="top"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
vertical-align 1.0 4.0 1.0 1.0 4.0


CSS Syntax

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Property Values

Value Description Play it
baseline The element is aligned with the baseline of the parent. This is default Play it »
length Raises or lower an element by the specified length. Negative values are allowed. Read about length units Play it »
% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed Play it »
sub The element is aligned with the subscript baseline of the parent Play it »
super The element is aligned with the superscript baseline of the parent Play it »
top The element is aligned with the top of the tallest element on the line Play it »
text-top The element is aligned with the top of the parent element's font Play it »
middle The element is placed in the middle of the parent element Play it »
bottom The element is aligned with the lowest element on the line Play it »
text-bottom The element is aligned with the bottom of the parent element's font Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Text

HHTML DOM reference: verticalAlign property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS visibility Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make <h2> elements visible and hidden:

h2.a {

 visibility: visible;

}


h2.b {

 visibility: hidden;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The visibility property specifies whether or not an element is visible.

Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

Default value: visible
Inherited: yes
Animatable: yes. Read about animatable
Version: CSS2
JavaScript syntax: object.style.visibility="hidden"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
visibility 1.0 4.0 1.0 1.0 4.0


CSS Syntax

visibility: visible|hidden|collapse|initial|inherit;

Property Values

Value Description Play it
visible Default value. The element is visible Play it »
hidden The element is hidden (but still takes up space) Play it »
collapse Only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as "hidden"

Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

This example demonstrates how to make a table element collapse:

tr.collapse {

 visibility: collapse;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Display and visibility

HTML DOM reference: visibility property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS white-space Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Demonstrate different values of the white-space property:

p.a {

 white-space: nowrap;

}


p.b {

 white-space: normal;

}


p.c {

 white-space: pre;

}

Try it Yourself »


Definition and Usage

The white-space property specifies how white-space inside an element is handled.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.whiteSpace="nowrap"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
white-space 1.0 8.0 3.5 3.0 9.5


CSS Syntax

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Property Values

Value Description Play it
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default Play it »
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered Play it »
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML Play it »
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks Play it »
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Text

HTML DOM reference: whiteSpace property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the width of three <div> elements:

div.a {

 width: auto;

  border: 1px solid black;

}


div.b {

  width: 150px;

  border: 1px solid black;

}


div.c {

 width: 50%;

 border: 1px solid black;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The width property sets the width of an element.

The width of an element does not include padding, borders, or margins!

Note: The min-width and max-width properties override the width property.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.width="500px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
width 1.0 4.0 1.0 1.0 3.5


CSS Syntax

width: auto|value|initial|inherit;

Property Values

Value Description Play it
auto Default value. The browser calculates the width Play it »
length Defines the width in px, cm, etc. Read about length units Play it »
% Defines the width in percent of the containing block Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of an <img> element using a percent value:

img {

 width: 50%;

}

Try it Yourself »

Example

Set the width of an <input type="text"> element to 100px. However, when it gets focus, make it 250px wide:

input[type=text] {

  width: 100px;

}


input[type=text]:focus {

  width: 250px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Height and Width

CSS tutorial: CSS Box model

CSS reference: height property

HTML DOM reference: width property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS word-break Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Break words at any character:

p.a {

 word-break: break-all;

}

Try it Yourself »


Definition and Usage

The word-break property specifies how words should break when reaching the end of a line.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.wordBreak="break-all"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
word-break 4.0 5.5 15.0 3.1 15.0

CSS Syntax

word-break: normal|break-all|keep-all|break-word|initial|inherit;

Property Values

Value Description
normal Default value. Uses default line break rules
break-all To prevent overflow, word may be broken at any character
keep-all Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"
break-word To prevent overflow, word may be broken at arbitrary points
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS word-spacing Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify that the space between words in <p> elements should be 30 pixels:

p {

 word-spacing: 30px;

}

Try it Yourself »


Definition and Usage

The word-spacing property increases or decreases the white space between words.

Note: Negative values are allowed.

Default value: normal
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.wordSpacing="20px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
word-spacing 1.0 6.0 1.0 1.0 3.5

CSS Syntax

word-spacing: normal|length|initial|inherit;

Property Values

Value Description Play it
normal Defines normal space between words (0.25em) . This is default Play it »
length Defines an additional space between words (in px, pt, cm, em, etc). Negative values are allowed. Read about length units Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit



Related Pages

CSS tutorial: CSS Text

HTML DOM reference: wordSpacing property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS word-wrap Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Allow long words to be able to break and wrap onto the next line:

div {

 word-wrap: break-word;

}

Try it Yourself »


Definition and Usage

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.wordWrap="break-word"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
word-wrap 4.0 5.5 3.5 3.1 10.5

CSS Syntax

word-wrap: normal|break-word|initial|inherit;

Property Values

Value Description
normal Break words only at allowed break points
break-word Allows unbreakable words to be broken
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Text Effects


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS writing-mode Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify whether lines of text are laid out horizontally or vertically:

p.test1 {

  writing-mode: horizontal-tb;

}


p.test2 {

  writing-mode: vertical-rl;

}


span.test2 {

  writing-mode: vertical-rl;

}

Try it Yourself »


Definition and Usage

The writing-mode property specifies whether lines of text are laid out horizontally or vertically.

Default value: horizontal-tb
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.writingMode="vertical-rl"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
writing-mode 48.0 12.0 41.0 11.0 35.0

CSS Syntax

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

Property Values

Value Description
horizontal-tb Let the content flow horizontally from left to right, vertically from top to bottom
vertical-rl Let the content flow vertically from top to bottom, horizontally from right to left
vertical-lr Let the content flow vertically from top to bottom, horizontally from left to right

Related Pages

CSS tutorial: CCSS Text Effects


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS z-index Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the z-index for an image:

img {

  position: absolute;

  left: 0px;

  top: 0px;

  z-index: -1;

}

Try it Yourself »


Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.zIndex="-1"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
z-index 1.0 4.0 3.0 1.0 4.0

CSS Syntax

z-index: auto|number|initial|inherit;

Property Values

Value Description Play it
auto Sets the stack order equal to its parents. This is default Play it »
number Sets the stack order of the element. Negative numbers are allowed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Positioning

HTML DOM reference: zIndex property


❮ PreviousComplete CSS ReferenceNext ❯