Syntax selector{ property : value ; property2
Download 302.68 Kb. Pdf ko'rish
|
CSS-Cheat-Sheet
|
HTML Cheat Sheet.com / CSS Basics
Syntax selector{
:
;
property2 :
; }
<link rel= "stylesheet" type= "text/css" href= "/style
Internal styles <style type= "text/css" > div { color :
;}
"property: value" >
Clearfix . clearfix : after
{
:
;
content :
"
" ;
display :
block ;
font-size :
0 ;
height :
0 ;
visibility :
hidden ; } . clearfix {
:
inline-block ;
} *
.
{
:
% ;
} . clearfix {
:
;
} Box model margin
border padding
content Selectors * div div,p div p div > p div + p div ~ p .classname #idname div.classname div#idname #idname * a:link a:active a:hover a:visited p::after{content:"yo";} p::before input:checked input:disabled input:enabled input:focus input:in-range input:out-of-range input:valid input:invalid input:optional input:required input:read-only input:read-write div:empty p::first-letter p::first-line p:first-of-type p:last-of-type p:lang(en) :not(span) p:first-child p:last-child p:nth-child(2) p:nth-child(3n+1) p:nth-last-child(2) p:nth-of-type(2) p:nth-last-of-type(2) p:only-of-type p:only-child :root ::selection :target a[target] a[target="_blank"] [title~="chair"] [class^="chair"] [class|="chair"] [class*="chair"] all elements all div tags all divs and paragraphs paragraphs inside divs all p tags, one level deep in div p tags immediately after div p tags preceded by div all elements with class element with ID divs with certain classname div with certain ID all elements inside #idname Pseudo classes link in normal state link in clicked state link with mouse over it visited link add content after p add content before p checked inputs disabled inputs enabled inputs input has focus value in range input value out of range input with valid value input with invalid value no required attribute input with requred attribute with readonly attribute no readonly attrib. element with no children first letter in p first line in p first of some type last of some type p with en language attribute element that's not a span first child of its parent last child of its parent second child of its parent nth-child (an + b) formula second child from behind second p of its parent ...from behind unique of its parent only child of its parent documents root element portion selected by user highlight active anchor Attribute selectors links with a target attribute links which open in new tab title element containing a word class starts with chair class starts with the chair word class contains chair Properties align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility behavior of the flex-wrap property alignment for items inside the container alignment for the selected item changes all properties binds an animation to an element delays animation start reverse animation or in alternate cycles animation duration in seconds or ms style when the animation is not playin number of an animation replay name for the @keyframes animation the animation is running or paused speed curve of an animation [class$="chair"] input[type="button"] class ends with chair specified input type background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span is element visible when not facing the screen all background properties in one declaration is the background image fixed or scrolls blending mode of each background layer painting area of the background background color background image where the background image is positioned starting position of the background image the way the background image is repeated background image size sets all border properties in one line bottom border properties in one line color of the bottom border border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color sets an image as border border image area extends beyond the border box border image repeated, rounded or stretched how to slice the border image path to the border image border image width left border properties in one line border left color border left style border left width border radius of the four rounded corners right border properties in one line border right color border right style border right width border spacing border style top border properties in one line border top color border top left radius border top right radius border top style border top width border width bottom offset for relative and absolute elements shadow to element box sizing properties placement of a table caption deny floating of an element clip an absolutely positioned element text color divide the content in columns balanced fill or not gap between the columns separator between columns, like border column rule color column rule style column rule width column span Color Picker
1C6EA4
color: #1C6EA4; Text color background-color:#1C6EA4; Background border: 3px solid #1C6EA4; Box border Text shadow Text shadow Box shadow text-shadow: 1px 2px 2px #1C6 box-shadow: 2px 2px 7px 1px # Background Image URL: none Position:
X:
Y: Repeat:
no
repeat repeat-x
repeat-y
Attachment: scroll
fixed
local
One line Color:
D0E4F5
https://htmlcheatsheet.com/images/logo-cs background: #D0E4F5 url("https://htmlcheatsheet.com/images/logo-css.png") no-repeat scroll 0 0; Preview Preview Gradient
1C6EA4 2388CB
144E75 1 0 0 1 column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right column width set column-width and column-count insert content :before and :after elements count sections reset counter cursor type when element is hovered writing direction, Arabic is using rtl box display type hide borders and background on empty table cells image effects: grayscale, blur, invert etc. item length, relative to others inside the container initial length of a flexible item direction of the flexible items shorthand for flex-direction and flex-wrap how much the item will grow relative other items how to shrink the item relative to other items wrap flexible items float elements left or right all font properties in one line declare non-web-safe fonts font of the element font size control font size if the first declared option is not available widen or narrow text font style: normal, italic, oblique set small-caps use bold or thin characters can a punctuation mark be placed outside the line box? height of the element justifies flexible container's items horizontally if necessary specifies the animation code left offset for relative and absolute elements space between characters line height of text or inline-block elements all list properties in one line replace the list item marker with an image list item markers inside or outside the content flow set the type of the list item marker set the top, right, bottom and left margins in one line bottom margin left margin right margin margin top maximum height of element maximum width of element see media queries minimum height minimum width where to navigate when the the arrow-down button is pressed sets sequential navigation order where to navigate when the the arrow-left button is presse Middle
transition
HEX Codes
background: #1C6EA4; background: -moz-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); b k d li
di t(t i ht #1C6EA4 0% Box Shadow Right:
Down: Spread:
Blur: Opacity:
Inset Color:
000000 Light backg.
-webkit-box-shadow: 5px 5px 15px 5px #000000; box-shadow: 5px 5px 15px 5px #000000; Preview
Button Generator Color:
FFFFFF Size:
Padding: Radius:
Change gradient, shadow, font and border in other panels. CSS Button
.myButton { color: rgb(255, 255, 255); font-size: 16px; line-height: 16px; padding: 6px; border-radius: 10px; font-family: Georgia, serif; font-weight: normal; text-decoration: f t t l
l f t i t
l t t Text Shadow 50 5 5 5 5 1 16 6 10 nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing where to navigate when the the arrow-right button is pressed where to navigate when the the arrow-up button is presse transparency level of an element reorder elements in a container drow an outer border around elemen outline color gap between the element and the outline outline style outline width hide, display or scroll if the content overflows its container horizontal overflow vertical overflow padding between the element border and content padding bottom padding left padding right padding top adds page break after an element adds page break before an element allow page break inside an element how many pixels the 3D element is placed from the view where is the 3D element based in the x- and y-axis positioning type: absolute, fixed, relative, static set quotation marks to wrap an element declare resizable elements right offset for relative and absolute elements tab character space length table layout algorithm horizontal alignment of text horizontal alignment of last line of tex overline, underline or line-through the text indentation of the first line of the text the way how overflowed content is marked (ellipsis) text shadow capitalization of text top offset for relative and absolute elements 2D 3D transformation. See widget. changes the position of transformed elements render nested elements in 3D transition properties in one line delay before transition effect start transition effect duration which CSS property is the transition affecting speed curve of the transition should the text be overridden to support more languages disable user content selection vertical alignment visibility:hidden elements leave a gap how are white-spaces handled width of an element text breaking rules when text reaches the end of the container size of white space between words Right:
Down: Blur:
Opacity: Color:
1C6EA4 Light background PREVIEW PREVIEW Neon Neon Neon Neon Neon Neon Neon Neon Neon
Flaming Flaming Flaming Flaming
L u x L u x L u x L u x L u x L u x L u x L u x L u x
Ghost Ghost Ghost Ghost Ghost Ghost Ghost Ghost Ghost Ghost
Candy
Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep Deep more...
text-shadow: 2px 2px 2px #1C6EA4; Font Generator Light background Font: Georgia
Size: Letter spc: Word spc: Color:
000000 Weight:
Normal Bold Decoration: None Under Over Through Style:
Normal Unset Italic Oblique Variant:
Normal S Case:
none UPPER lower Capital G r u m p y w i z a r d s m a k e t o x i c b r e w f o r t h e e v i l Q u e e n a n d J a c k .
font-family: Georgia, serif; font-size: 16px; letter-spacing: 2px; word-spacing: 2px; color: #000000; font-weight: normal; text-decoration: none; f t t l l
Transform Scale:
1.3 x Rotate: 41 deg
X: 8 px Y: 8 px Skew X: 12 deg Skew Y: 20 deg -moz-transform: scale(1.3) rotate(41deg) translate(8px, 8px) skew(12deg, 20deg); -webkit-transform: scale(1.3) rotate(41deg) translate(8px, 8px) skew(12deg, 20deg); t f l (1 3) t t (41d ) Border / Outline
HTML Cheat Sheet is using cookies. | PDF
| Terms and Conditions, Privacy Policy © HTMLCheatSheet.com
Border / Outline Position: One line Border
Width: Style:
solid
dotted dashed
double
groove
ridge inset
outset
hidden
none Color: 1C6EA4
All
Top
Right
Bottom
Left
border: 2px solid #1C6EA4; Preview Border Radius 0 All
0
0 0 Media Queries width height orientation aspect-ratio color color-index monochrome resolution scan grid Syntax @media not|only mediatype
(
) {
CSS Code } Link external file: <link rel= "stylesheet" media=
Viewport is 480 pixels or smaller @media
(
:
) { }
Viewport width smaller OR height smaller @ media screen and (max-width: 600px), (max-height: Print style @media print { ... } Night / dark mode @media (prefers-color-scheme: dark) { ... } Media types all, print, screen, speech Media features viewport width viewport height orientation of the viewport ratio between width & height number of bits per color number of displayable colors color on greyscale device resolution of the device scanning process of the device device is a grid or bitmap Reset CSS html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5 article,aside,details,figcaption,figure,footer,header, body { line-height :
;}
:
;}
:
;}
:
;
:
;} px - em
Parent: 0 px desired px: 0 px desired em: 0
2 1 Download 302.68 Kb. Do'stlaringiz bilan baham: 
|