Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Exam 70-480 > CSS > Flashcards

CSS Flashcards

1
Q

box-shadow

A

The box-shadow controls the shadow effect surrounding the box of the HTML element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

text-shadow

A

The text-shadow property controls the shadow of text.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

clip property

A

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()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

position absolute

A

The element is positioned relative to its first positioned (not static) ancestor element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

position static

A

Default value. Elements render in order, as they appear in the document flow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

position relative

A

The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

sticky

A

The element is positioned based on the user’s scroll position

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

word-wrap: normal

A

Break words only at allowed break points

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

word-wrap: break-word

A

Allows unbreakable words to be broken

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

word-wrap: break-all

A

To prevent overflow, word may be broken at any character

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

word-wrap: keep-all

A

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value “normal”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

gt(3)

A

selects every element after the fourth one

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

eq(4)

A

selects the fifth element in a hierarchy

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

visibility hidden

A

does not show but it allocates space for the element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

display none:

A

does not show and it does not allocate space

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

@supports (display: grid)

A

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

[attr]

A

This selector will select all elements with the attribute attr, whatever its value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

[attr=val]

A

[attr=val] : This selector will select all elements with the attribute attr, but only if its value is val.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

[attr~=val]:

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

[attr^=val]

A

[attr^=val] : This selector will select all elements with the attribute attr for which the value starts with val.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

[attr$=val]

A

[attr$=val] : This selector will select all elements with the attribute attr for which the value ends with val.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

[attr*=val]

A

[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”.)

23
Q

[data-quantity^=”optional”]

A

All elements with the attribute “data-quantity”, for which

the value starts with “optional”

24
Q

[data-quantity$=”kg”]

A

All elements with the attribute “data-quantity”, for which

the value ends with “kg”

25
Q

[data-vegetable*=”not spicy”]

A

All elements with the attribute “data-vegetable” containing

the substring “not spicy” are turned back to green

26
Q

data attributes format - javascript

A 
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”

27
Q

Pseudo-classes

A

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.

28
Q

Pseudo-elements

A 
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
29
Q

CSS Selector A, B

A

Any element matching A and/or B

30
Q

CSS Selector A B

A

Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.)

31
Q

CSS Selector A > B

A

Any element matching B that is a direct child of an element matching A.

32
Q

CSS Selector A + B

A

Select and style every p> element that are placed immediately after /p>div> elements:

div + p {
background-color: yellow;
}

33
Q

CSS Selector A ~ B

A

Set a background color for all ul> elements that are preceded by a p> element with the same parent:

p ~ ul {
background: #ff0000;
}

34
Q

table th + td

A

All td>s preceded by a th>, within a table>

35
Q

1em

A

is the same as the font-size of the current element( 16 pixels)

36
Q

overflow: auto

A

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.

37
Q

overflow: hidden

A

If there is too much content, the overflowing content is hidden.

38
Q

overflow: visible

A

If there is too much content, the overflowing content is shown outside of the box (this is usually the default behavior.)

39
Q

font-style:

A
  1. normal
  2. italic,
  3. oblique ( if no oblique then italic)
40
Q

font-face format

A

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>
41
Q

font-face local

A 
.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:
42
Q

hypens:

A

hyphens: none;
hyphens: manual; - suggesting break opportunities
hyphens: auto; - browser is free to break words at hypenantion points

43
Q

difference opacity vs transparency

A

Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.

44
Q

gradient - format

A 
#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}
45
Q

translate()

A

translate() method moves an element from its current position

46
Q

rotate()

A

rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

47
Q

scale()

A

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:

48
Q

matrix()

A

method combines all the 2D transform methods into one.

transform: matrix(1, -0.3, 0, 1, 0, 0);

49
Q

3d transformations

A

rotateX() - rotate “below”
rotateY() - rotate “to the right”
rotateZ() - rotate around its z axis

50
Q

flex-order:

A

flexbox items can also be explicitly specified by using the order property on the flexbox items.

51
Q

flex-wrap:

A
  1. nowrap Default value. Specifies that the flexible items will not wrap
  2. wrap
  3. wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order
52
Q

link element media query - format

A

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”/

53
Q

flex-flow

A

You can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand.

flex-flow: row wrap;

54
Q

animation - format

repeats every 5 seconds from red to orange

A 
#demo{
width: 100px;
height: 100px;
animation: frames 5s infinite
}
@keyframes frames{
    from {
   background: red;
}
   to {
    width: 200px;
    backgreound: yellow
}
}

Exam 70-480 (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions