add css
This commit is contained in:
parent
3d2c1a5595
commit
fe34079122
GPG key ID:
901B2ADDF27C2263
1 changed files with 411 additions and 1 deletions
|
|
@ -1,6 +1,416 @@
|
|||
---
|
||||
source: https://developer.mozilla.org/en-US/docs/Web/CSS
|
||||
wiki: https://en.wikipedia.org/wiki/CSS
|
||||
obj: concept
|
||||
---
|
||||
|
||||
#wip
|
||||
# Cascading Style Sheets (CSS)
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as [HTML](HTML.md) or [XML](../files/XML.md). CSS is a cornerstone technology of the World Wide Web, alongside [HTML](HTML.md) and JavaScript.
|
||||
|
||||
CSS can be used inline via the [HTML](HTML.md) `style` attribute on individual elements or via the `<style>` tag. Traditionally CSS is applied via the `class` and `id` attributes in combination with a linked CSS file.
|
||||
|
||||
## Syntax
|
||||
Example CSS:
|
||||
```css
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
```
|
||||
|
||||
### 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:
|
||||
```css
|
||||
p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**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;
|
||||
}
|
||||
```
|
||||
|
||||
**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;
|
||||
}
|
||||
```
|
||||
|
||||
**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;
|
||||
}
|
||||
```
|
||||
|
||||
**All Selector**:
|
||||
```css
|
||||
* {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
**Multiple Selector**: In this example we have grouped the selectors:
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**Modified Selectors**: You can modify selectors to apply based on certain conditions:
|
||||
```css
|
||||
a:visited {} /* Apply to visited links */
|
||||
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:focus {} /* Apply to focused element */
|
||||
a:enabled {} /* Apply to enabled elements */
|
||||
a:disabled {} /* Apply to disabled elements */
|
||||
```
|
||||
|
||||
### Comments
|
||||
CSS comments are not displayed in the browser, but they can help document your source code.
|
||||
|
||||
```css
|
||||
/* This is a single-line comment */
|
||||
p {
|
||||
color: red; /* Set text color to red */
|
||||
}
|
||||
/* This is
|
||||
a multi-line
|
||||
comment */
|
||||
```
|
||||
|
||||
### Colors
|
||||
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(255, 99, 71);
|
||||
color: white;
|
||||
}
|
||||
a {
|
||||
color: #ff6347;
|
||||
}
|
||||
```
|
||||
|
||||
### Backgrounds
|
||||
You can set a background color:
|
||||
```css
|
||||
div {
|
||||
background-color: rgba(0, 128, 0, 0.3)
|
||||
}
|
||||
```
|
||||
|
||||
The `background-image` property specifies an image to use as the background of an element:
|
||||
```css
|
||||
body {
|
||||
background-image: url("paper.gif");
|
||||
}
|
||||
```
|
||||
|
||||
Add a graphical effect to the area behind an element:
|
||||
```css
|
||||
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:
|
||||
```css
|
||||
p.dotted {border-style: dotted;}
|
||||
p.dashed {border-style: dashed;}
|
||||
p.solid {border-style: solid;}
|
||||
p.double {border-style: double;}
|
||||
p.groove {border-style: groove;}
|
||||
p.ridge {border-style: ridge;}
|
||||
p.inset {border-style: inset;}
|
||||
p.outset {border-style: outset;}
|
||||
p.none {border-style: none;}
|
||||
p.hidden {border-style: hidden;}
|
||||
p.mix {border-style: dotted dashed solid double;}
|
||||
```
|
||||
|
||||
The `border-width` property specifies the width of the four borders.
|
||||
|
||||
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
|
||||
|
||||
```css
|
||||
p.one {
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
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 */
|
||||
}
|
||||
```
|
||||
|
||||
The `border-color` property is used to set the color of the four borders.
|
||||
```css
|
||||
p.two {
|
||||
border-style: solid;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
p.one {
|
||||
border-style: solid;
|
||||
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
|
||||
}
|
||||
```
|
||||
|
||||
The `border-radius` property is used to add rounded borders to an element:
|
||||
```css
|
||||
p {
|
||||
border: 2px solid red;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
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;}
|
||||
```
|
||||
|
||||
### Margins
|
||||
Margins are used to create space around elements, outside of any defined borders.
|
||||
|
||||
The CSS `margin` properties are used to create space around elements, outside of any defined borders.
|
||||
|
||||
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
|
||||
|
||||
```css
|
||||
p {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
margin-right: 150px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
p { margin: 25px 50px 75px 100px;}
|
||||
```
|
||||
|
||||
### Padding
|
||||
Padding is used to create space around an element's content, inside of any defined borders.
|
||||
|
||||
The CSS `padding` properties are used to generate space around an element's content, inside of any defined borders.
|
||||
|
||||
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
|
||||
|
||||
```css
|
||||
div {
|
||||
padding-top: 50px;
|
||||
padding-right: 30px;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
### Height and Width
|
||||
The CSS `height` and `width` properties are used to set the height and width of an element.
|
||||
|
||||
The CSS `max-width` property is used to set the maximum width of an element.
|
||||
|
||||
The `height` and `width` properties may have the following values:
|
||||
- `auto` - This is default. The browser calculates the height and width
|
||||
- `length` - Defines the height/width in px, cm, etc.
|
||||
- `%` - Defines the height/width in percent of the containing block
|
||||
- `initial` - Sets the height/width to its default value
|
||||
- `inherit` - The height/width will be inherited from its parent value
|
||||
|
||||
```css
|
||||
div {
|
||||
height: 200px;
|
||||
width: 50%;
|
||||
background-color: powderblue;
|
||||
}
|
||||
```
|
||||
|
||||
### Text
|
||||
CSS has a lot of properties for formatting text.
|
||||
|
||||
The `color` property is used to set the color of the text.
|
||||
```css
|
||||
h1 { color: green; }
|
||||
```
|
||||
|
||||
The `text-align` property is used to set the horizontal alignment of a text.
|
||||
|
||||
A text can be left or right aligned, centered, or justified.
|
||||
|
||||
```css
|
||||
h1 { text-align: center; }
|
||||
|
||||
h2 { text-align: left; }
|
||||
|
||||
h3 { text-align: right; }
|
||||
```
|
||||
|
||||
The `text-decoration` property is mostly used to remove underlines from links:
|
||||
```css
|
||||
a:link { text-decoration: none; }
|
||||
a:visited { text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
```
|
||||
|
||||
The `word-spacing` property is used to specify the space between the words in a text.
|
||||
|
||||
```css
|
||||
p.one { word-spacing: 10px; }
|
||||
```
|
||||
|
||||
The `text-shadow` property adds shadow to text.
|
||||
|
||||
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
|
||||
|
||||
```css
|
||||
h1 { text-shadow: 2px 2px; }
|
||||
body {
|
||||
text-shadow: <horizontal> <vertical> <blur> <color>;
|
||||
}
|
||||
```
|
||||
|
||||
### Fonts
|
||||
In CSS, we use the `font-family` property to specify the font of a text.
|
||||
|
||||
```css
|
||||
.p1 { font-family: "Times New Roman", Times, serif; }
|
||||
.p2 { font-family: Arial, Helvetica, sans-serif; }
|
||||
```
|
||||
|
||||
The `font-style` property is mostly used to specify italic text.
|
||||
```css
|
||||
p.normal { font-style: normal; }
|
||||
p.italic { font-style: italic; }
|
||||
p.oblique { font-style: oblique; }
|
||||
```
|
||||
|
||||
The `font-weight` property specifies the weight of a font:
|
||||
```css
|
||||
p.normal { font-weight: normal; }
|
||||
p.thick { font-weight: bold; }
|
||||
```
|
||||
|
||||
The `font-size` property sets the size of the text.
|
||||
```css
|
||||
h1 { font-size: 40px; }
|
||||
h2 { font-size: 30px; }
|
||||
```
|
||||
|
||||
### Display
|
||||
The `display` property is the most important CSS property for controlling layout.
|
||||
|
||||
```css
|
||||
p.ex1 {display: none;}
|
||||
p.ex2 {display: inline;}
|
||||
p.ex3 {display: block;}
|
||||
p.ex4 {display: inline-block;}
|
||||
```
|
||||
|
||||
The `z-index` property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
|
||||
```css
|
||||
img {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
The CSS `overflow` property controls what happens to content that is too big to fit into an area.
|
||||
```css
|
||||
div.ex1 { overflow: scroll;}
|
||||
div.ex2 { overflow: hidden;}
|
||||
div.ex3 { overflow: auto;}
|
||||
div.ex4 { overflow: clip;}
|
||||
div.ex5 { overflow: visible;}
|
||||
```
|
||||
|
||||
The `float` property is used for positioning and formatting content e.g. let an image float left to the text in a container.
|
||||
The `float` property can have one of the following values:
|
||||
- `left` - The element floats to the left of its container
|
||||
- `right` - The element floats to the right of its container
|
||||
- `none` - The element does not float (will be displayed just where it occurs in the text). This is default
|
||||
- `inherit` - The element inherits the float value of its parent
|
||||
|
||||
The `opacity` property specifies the opacity/transparency of an element.
|
||||
```css
|
||||
img {opacity: 0.5;}
|
||||
```
|
||||
|
||||
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;}
|
||||
```
|
||||
|
||||
The `rotate` property allows you to rotate elements.
|
||||
```css
|
||||
div {rotate: 30deg;}
|
||||
```
|
||||
|
||||
The `scale` property allows you to change the size of elements.
|
||||
```css
|
||||
div {scale: 2;}
|
||||
```
|
||||
|
||||
The `translate` property allows you to change the position of elements.
|
||||
```css
|
||||
div {translate: 100px 20px;}
|
||||
```
|
||||
Loading…
Reference in a new issue