CSS Flashcards
box-shadow
The box-shadow controls the shadow effect surrounding the box of the HTML element.
text-shadow
The text-shadow property controls the shadow of text.
clip property
allows you to specify what portion of an element is visible. The clip property takes only one parameter, the shape to clip to. Currently, the only shape supported is a rectangle, so the only parameter value that will yield any results is the rect()
position absolute
The element is positioned relative to its first positioned (not static) ancestor element
position static
Default value. Elements render in order, as they appear in the document flow
position relative
The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position
sticky
The element is positioned based on the user’s scroll position
word-wrap: normal
Break words only at allowed break points
word-wrap: break-word
Allows unbreakable words to be broken
word-wrap: break-all
To prevent overflow, word may be broken at any character
word-wrap: keep-all
Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value “normal”
gt(3)
selects every element after the fourth one
eq(4)
selects the fifth element in a hierarchy
visibility hidden
does not show but it allocates space for the element
display none:
does not show and it does not allocate space
@supports (display: grid)
The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features.
[attr]
This selector will select all elements with the attribute attr, whatever its value.
[attr=val]
[attr=val] : This selector will select all elements with the attribute attr, but only if its value is val.
[attr~=val]:
[attr^=val]
[attr^=val] : This selector will select all elements with the attribute attr for which the value starts with val.
[attr$=val]
[attr$=val] : This selector will select all elements with the attribute attr for which the value ends with val.
[attr*=val]
[attr*=val] : This selector will select all elements with the attribute attr for which the value contains the substring val. (A substring is simply part of a string, e.g. “cat” is a substring in the string “caterpillar”.)
[data-quantity^=”optional”]
All elements with the attribute “data-quantity”, for which
the value starts with “optional”
[data-quantity$=”kg”]
All elements with the attribute “data-quantity”, for which
the value ends with “kg”
[data-vegetable*=”not spicy”]
All elements with the attribute “data-vegetable” containing
the substring “not spicy” are turned back to green
data attributes format - javascript
article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> article
const article = document.querySelector(‘#electric-cars’);
article. dataset.columns // “3”
article. dataset.indexNumber // “12314”
article. dataset.parent // “cars”
Pseudo-classes
A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state.
Pseudo-elements
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element. \::after \::before \::first-letter \::first-line \::selection \::backdrop
CSS Selector A, B
Any element matching A and/or B
CSS Selector A B
Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.)
CSS Selector A > B
Any element matching B that is a direct child of an element matching A.
CSS Selector A + B
Select and style every p> element that are placed immediately after /p>div> elements:
div + p {
background-color: yellow;
}
CSS Selector A ~ B
Set a background color for all ul> elements that are preceded by a p> element with the same parent:
p ~ ul {
background: #ff0000;
}
table th + td
All td>s preceded by a th>, within a table>
1em
is the same as the font-size of the current element( 16 pixels)
overflow: auto
If there is too much content, the overflowing content is hidden and scroll bars are shown to let the user scroll to see all the content.
overflow: hidden
If there is too much content, the overflowing content is hidden.
overflow: visible
If there is too much content, the overflowing content is shown outside of the box (this is usually the default behavior.)
font-style:
- normal
- italic,
- oblique ( if no oblique then italic)
font-face format
style type=”text/css” media=”screen, print”>
@font-face {
font-family: “Bitstream Vera Serif Bold”;
src: url(“https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf”);
}
body { font-family: "Bitstream Vera Serif Bold", serif } /style>
font-face local
.className {
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:hypens:
hyphens: none;
hyphens: manual; - suggesting break opportunities
hyphens: auto; - browser is free to break words at hypenantion points
difference opacity vs transparency
Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.
gradient - format
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}translate()
translate() method moves an element from its current position
rotate()
rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
scale()
method increases or decreases the size of an element (according to the parameters given for the width and height). scale(2, 3); two times of its original width, and three times of its original height:
matrix()
method combines all the 2D transform methods into one.
transform: matrix(1, -0.3, 0, 1, 0, 0);
3d transformations
rotateX() - rotate “below”
rotateY() - rotate “to the right”
rotateZ() - rotate around its z axis
flex-order:
flexbox items can also be explicitly specified by using the order property on the flexbox items.
flex-wrap:
- nowrap Default value. Specifies that the flexible items will not wrap
- wrap
- wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order
link element media query - format
link rel=”stylesheet” media=”screen and (min-width: 1200px)” href=”Desktop.css”/>
link rel=”stylesheet” media=”screen and (max-width: 1199px) and (min-width: 401px)”
ref=”tablet.css”/>
link rel=”stylesheet” media=”screen and (max-width: 400px)” href=”phone.css”/
flex-flow
You can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand.
flex-flow: row wrap;
animation - format
repeats every 5 seconds from red to orange
#demo{
width: 100px;
height: 100px;
animation: frames 5s infinite
}
@keyframes frames{
from {
background: red;
}
to {
width: 200px;
backgreound: yellow
}
}
