remove non ascii whitespaces
This commit is contained in:
parent
598a10bc28
commit
5a6d6c4d13
GPG key ID:
901B2ADDF27C2263
117 changed files with 1928 additions and 1928 deletions
|
|
@ -20,51 +20,51 @@ body {
|
|||
### Selector
|
||||
A CSS selector selects the [HTML](HTML.md) element(s) you want to style.
|
||||
|
||||
**Tag Selector**: Here, all `<p>` elements on the page will be center-aligned, with a red text color:
|
||||
**Tag Selector**: Here, all `<p>` elements on the page will be center-aligned, with a red text color:
|
||||
```css
|
||||
p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**ID Selector**: The CSS rule below will be applied to the [HTML](HTML.md) element with id="para1":
|
||||
**ID Selector**: The CSS rule below will be applied to the [HTML](HTML.md) element with id="para1":
|
||||
```css
|
||||
#para1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
#para1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**Class Selector**: In this example all [HTML](HTML.md) elements with class="center" will be red and center-aligned:
|
||||
**Class Selector**: In this example all [HTML](HTML.md) elements with class="center" will be red and center-aligned:
|
||||
```css
|
||||
.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**Tag+Class Selector**: In this example only `<p>` elements with class="center" will be red and center-aligned:
|
||||
**Tag+Class Selector**: In this example only `<p>` elements with class="center" will be red and center-aligned:
|
||||
```css
|
||||
p.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
p.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**All Selector**:
|
||||
```css
|
||||
* {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
* {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
**Multiple Selector**: In this example we have grouped the selectors:
|
||||
**Multiple Selector**: In this example we have grouped the selectors:
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ a:valid {} /* Apply to valid elements */
|
|||
a:invalid {} /* Apply to invalid elements */
|
||||
a:required {} /* Apply to required elements */
|
||||
a:optional {} /* Apply to optional elements */
|
||||
a:hover {} /* Apply to links on hover */
|
||||
a:hover {} /* Apply to links on hover */
|
||||
a:focus {} /* Apply to focused element */
|
||||
a:enabled {} /* Apply to enabled elements */
|
||||
a:disabled {} /* Apply to disabled elements */
|
||||
|
|
@ -86,8 +86,8 @@ CSS comments are not displayed in the browser, but they can help document your s
|
|||
|
||||
```css
|
||||
/* This is a single-line comment */
|
||||
p {
|
||||
color: red; /* Set text color to red */
|
||||
p {
|
||||
color: red; /* Set text color to red */
|
||||
}
|
||||
/* This is
|
||||
a multi-line
|
||||
|
|
@ -110,12 +110,12 @@ a {
|
|||
### Backgrounds
|
||||
You can set a background color:
|
||||
```css
|
||||
div {
|
||||
background-color: rgba(0, 128, 0, 0.3)
|
||||
div {
|
||||
background-color: rgba(0, 128, 0, 0.3)
|
||||
}
|
||||
```
|
||||
|
||||
The `background-image` property specifies an image to use as the background of an element:
|
||||
The `background-image` property specifies an image to use as the background of an element:
|
||||
```css
|
||||
body {
|
||||
background-image: url("paper.gif");
|
||||
|
|
@ -124,16 +124,16 @@ body {
|
|||
|
||||
Add a graphical effect to the area behind an element:
|
||||
```css
|
||||
body {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
body {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
```
|
||||
|
||||
### Borders
|
||||
The CSS border properties allow you to specify the style, width, and color of an element's border.
|
||||
|
||||
The `border-style` property specifies what kind of border to display:
|
||||
The `border-style` property specifies what kind of border to display:
|
||||
```css
|
||||
p.dotted {border-style: dotted;}
|
||||
p.dashed {border-style: dashed;}
|
||||
|
|
@ -162,7 +162,7 @@ p.two {
|
|||
border-style: solid;
|
||||
border-width: medium;
|
||||
}
|
||||
|
||||
|
||||
p.three {
|
||||
border-style: solid;
|
||||
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
|
||||
|
|
@ -190,9 +190,9 @@ p {
|
|||
}
|
||||
```
|
||||
|
||||
The `box-shadow` property attaches one or more shadows to an element (Syntax: `box-shadow: none|_h-offset v-offset blur spread color_ |inset|initial|inherit;`).
|
||||
The `box-shadow` property attaches one or more shadows to an element (Syntax: `box-shadow: none|_h-offset v-offset blur spread color_ |inset|initial|inherit;`).
|
||||
```css
|
||||
#example2 {box-shadow: 5px 10px #888888;}
|
||||
#example2 {box-shadow: 5px 10px #888888;}
|
||||
```
|
||||
|
||||
### Margins
|
||||
|
|
@ -209,7 +209,7 @@ p {
|
|||
margin-right: 150px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
p { margin: 25px 50px 75px 100px;}
|
||||
p { margin: 25px 50px 75px 100px;}
|
||||
```
|
||||
|
||||
### Padding
|
||||
|
|
@ -360,57 +360,57 @@ The `opacity` property specifies the opacity/transparency of an element.
|
|||
img {opacity: 0.5;}
|
||||
```
|
||||
|
||||
The `cursor` property specifies the mouse cursor to be displayed when pointing over an element.
|
||||
The `cursor` property specifies the mouse cursor to be displayed when pointing over an element.
|
||||
```css
|
||||
.alias {cursor: alias;}
|
||||
.all-scroll {cursor: all-scroll;}
|
||||
.auto {cursor: auto;}
|
||||
.cell {cursor: cell;}
|
||||
.col-resize {cursor: col-resize;}
|
||||
.context-menu {cursor: context-menu;}
|
||||
.copy {cursor: copy;}
|
||||
.crosshair {cursor: crosshair;}
|
||||
.default {cursor: default;}
|
||||
.e-resize {cursor: e-resize;}
|
||||
.ew-resize {cursor: ew-resize;}
|
||||
.grab {cursor: grab;}
|
||||
.grabbing {cursor: grabbing;}
|
||||
.help {cursor: help;}
|
||||
.move {cursor: move;}
|
||||
.n-resize {cursor: n-resize;}
|
||||
.ne-resize {cursor: ne-resize;}
|
||||
.nesw-resize {cursor: nesw-resize;}
|
||||
.ns-resize {cursor: ns-resize;}
|
||||
.nw-resize {cursor: nw-resize;}
|
||||
.nwse-resize {cursor: nwse-resize;}
|
||||
.no-drop {cursor: no-drop;}
|
||||
.none {cursor: none;}
|
||||
.not-allowed {cursor: not-allowed;}
|
||||
.pointer {cursor: pointer;}
|
||||
.progress {cursor: progress;}
|
||||
.row-resize {cursor: row-resize;}
|
||||
.s-resize {cursor: s-resize;}
|
||||
.se-resize {cursor: se-resize;}
|
||||
.sw-resize {cursor: sw-resize;}
|
||||
.text {cursor: text;}
|
||||
.url {cursor: url(myBall.cur),auto;}
|
||||
.w-resize {cursor: w-resize;}
|
||||
.wait {cursor: wait;}
|
||||
.zoom-in {cursor: zoom-in;}
|
||||
.zoom-out {cursor: zoom-out;}
|
||||
.alias {cursor: alias;}
|
||||
.all-scroll {cursor: all-scroll;}
|
||||
.auto {cursor: auto;}
|
||||
.cell {cursor: cell;}
|
||||
.col-resize {cursor: col-resize;}
|
||||
.context-menu {cursor: context-menu;}
|
||||
.copy {cursor: copy;}
|
||||
.crosshair {cursor: crosshair;}
|
||||
.default {cursor: default;}
|
||||
.e-resize {cursor: e-resize;}
|
||||
.ew-resize {cursor: ew-resize;}
|
||||
.grab {cursor: grab;}
|
||||
.grabbing {cursor: grabbing;}
|
||||
.help {cursor: help;}
|
||||
.move {cursor: move;}
|
||||
.n-resize {cursor: n-resize;}
|
||||
.ne-resize {cursor: ne-resize;}
|
||||
.nesw-resize {cursor: nesw-resize;}
|
||||
.ns-resize {cursor: ns-resize;}
|
||||
.nw-resize {cursor: nw-resize;}
|
||||
.nwse-resize {cursor: nwse-resize;}
|
||||
.no-drop {cursor: no-drop;}
|
||||
.none {cursor: none;}
|
||||
.not-allowed {cursor: not-allowed;}
|
||||
.pointer {cursor: pointer;}
|
||||
.progress {cursor: progress;}
|
||||
.row-resize {cursor: row-resize;}
|
||||
.s-resize {cursor: s-resize;}
|
||||
.se-resize {cursor: se-resize;}
|
||||
.sw-resize {cursor: sw-resize;}
|
||||
.text {cursor: text;}
|
||||
.url {cursor: url(myBall.cur),auto;}
|
||||
.w-resize {cursor: w-resize;}
|
||||
.wait {cursor: wait;}
|
||||
.zoom-in {cursor: zoom-in;}
|
||||
.zoom-out {cursor: zoom-out;}
|
||||
```
|
||||
|
||||
The `rotate` property allows you to rotate elements.
|
||||
The `rotate` property allows you to rotate elements.
|
||||
```css
|
||||
div {rotate: 30deg;}
|
||||
div {rotate: 30deg;}
|
||||
```
|
||||
|
||||
The `scale` property allows you to change the size of elements.
|
||||
The `scale` property allows you to change the size of elements.
|
||||
```css
|
||||
div {scale: 2;}
|
||||
div {scale: 2;}
|
||||
```
|
||||
|
||||
The `translate` property allows you to change the position of elements.
|
||||
The `translate` property allows you to change the position of elements.
|
||||
```css
|
||||
div {translate: 100px 20px;}
|
||||
div {translate: 100px 20px;}
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue