CSS Тест Upwork часть 2

How do you add shadow to elements in CSS3?
       box-shadow: 10px 10px 5px grey;
       shadow-right: 10px shadow-bottom: 10px; shadow-color: grey;
       alpha-effect[shadow]: 10px 10px 5px grey;
       None
Is it possible to combine a background image and CSS3 gradients?
       It is possible only when two separate styles are used, "background-image" and "gradient", on an HTML tag.
       It is possible only when "background-image" is used.
       It is possible only when layered HTML tags are used, "background-image" and "gradient".
       It is not possible to combine a background image and CSS3 gradients.
What will be the outcome of given code?
div[class^="stronger"] { } {...}
       It applies the rule only on divs who belong to a class that begins with "stronger".
       It applies the rule only on divs of class "stronger".
       It applies the rule only on divs who belong to a class which end with "stronger".
       It applies the rule only on divs who belong to a class which does not contain "stronger" in its name.
Which of these values are not valid for display property?
       inline-list-item
       inline-block
       inline-flex
       inline-table
To apply style on every input element except text, which of the following selectors should be used?
       input:([!type='text'])
       input:not([type="text"])
       input:not([type!="text"])
       input:([type!='text'])
Read the following:
@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}
What will this code do?
       It will put all tables on a right-hand side landscape page.
       It will rotate the page if the table is positioned at the right side.
       It will keep the table in the landscape position and rotate the page.
       None of the above
What is right way to set opacity of color to 50%?
       color: rgb(0, 191, 255) 0.5;
       color: rgb(0, 191, 255) 50;
       color: rgba(0, 191, 255, 0.5);
       color: rgba(0, 191, 255, 50);
What is the initial value of the opacity property?
       1
       normal
       none
State whether the following statement is true or false.
If a parent element display property is set to none, its children too will not be rendered.
       True
       False
Which of the following CSS works for
“the gradient to start at the bottom left corner and go to the top right corner”
       gradient {
  background-image:
    linear-gradient(
      to bottom right,
      red, #f06d06
    );}
       gradient {
  background-image:
    linear-gradient(
      to top left,
      red, #f06d06
    );}
       gradient {
  background-image:
    linear-gradient(
      to right,
      red, #f06d06
    );}
       gradient {
  background-image:
    linear-gradient(
      to top right,
      red, #f06d06
    );}
What will happen if the pause property is used as follows?
h2 { pause: 40s 60s }
       pause-before will be set to 40 seconds and pause-after will be set to 60 seconds.
       pause-after will be set to 40 seconds and pause-before will be set to 60 seconds.
       pause-after and pause-before will be set to 40 seconds.
       pause-after and pause-before will be set to 60 seconds.
Which of the following are valid media features supported in media query? Check all that apply.
Note: There may be more than one right answer.
       Max-width
       Aspect-ratio
       Background-color
       Orientation
       Color
Which of the following properties allow percentages in their value fields?
Note: There may be more than one right answer.
       font-size
       font-variant
       font-weight
       line-height
Which of the following is not a valid value for the font-stretch property?
       condensed
       normal
       semi-narrower
       expanded
       semi-expanded
Which of the following is the best implementation of a continuously rotating animated image in CSS3?
       @-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#rotating img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
       @-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#rotating img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
       @-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#rotating img
{
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
}
What is the initial value of the marquee-speed property?
       slow
       normal
       fast
       none
Which of the following will apply a gradient transition to #DemoGradient using CSS3?
       @-webkit-keyframes pulse #DemoGradient { 0% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 50% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 100% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } }
       #DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }
       It is not possible to apply a gradient transition using only CSS3.
Which of the following is the best way to center a div element?
       Apply ‘float:none’ to the element you want to center.
       Apply ‘margin:0 auto’ to the element you want to center.
       Apply ‘text-align:center’ to the element you want to center.
       None of these.
Using height on transitions is not possible with:
       height:auto
       height:100%
       height:0
       max-height:100%
There are various types of input fields in a HTML page. Choose the appropriate CSS3 code which will have an effect on all inputs, except checkbox and  radio.
       form input:not([type="radio"], [type="checkbox"]) { }
       input:not([type="radio"]):not([type="checkbox"]) { }
       input:not([type="radio & checkbox"]) { }
       input:!([type="radio"]) , input:!([type="checkbox"]) { }
Which of the following statements is true about z-index in CSS3?
       Z-index only affects text elements.
       Z-index only used for pseudo-class elements.
       Z-index only affects positioned elements.
       Z-index only affects absolute positioned elements.
Is it possible to use transition animations with a gradient background?
       Yes
       No
What is the difference between float:left; vs display:inline-block; ?
       There is no difference, both of them have the same results.
       display:inline-block; adds whitespace between the elements.
       float:left; collapses the parent element on itself.
       None of these.
What is the range of values (in decimal notation) that can be specified in the RGB color model?
       0 to 256
       0 to 255
       -250 to 250
       -255 to 255
What will the following code produce?
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}
       Font style is set to italic, oblique.
       Font-weight is set to bold;
       Font-family is set to DejaVu Sans
       Multiple @font-face rules added.
Which of the following are not valid values for the target-new property?
       window
       tab
       none
       parent
       current
What will be the output of the following rule?
em { color: rgba(0,0,255,1) }
       Opacity 1 with solid red color
       Opacity 0 with solid blue color
       Opacity 0 with solid red color
       Opacity 1 with solid blue color
       None of these
While rendering the following code, what is the role of "src" propery?
@font-face {
    font-family: "calibriforh1";
    src: local("calibri"), url(calibri.woff);
}
h1 { font-family: "calibriforh1", arial, sans-serif; }

       It's for searching the user's system for a "calibri" font, and if it does not exist, it will load the font from the server instead.
       It's for searching the user's system for a "calibri" font, and if it does not exist, it will load user's system's default font instead.
       It's for loading the user's system's default font.
       None of these.
Which of the following will add a border to a div element, without adding to its size in pixels?
       div{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100px;
height:100px;
border:20px solid red;
background:green;
margin:10px;
}
div + div{
border:10px solid red;
}
       div{
width:100px;
height:100px;
border:20px solid red;
background:green;
margin:-10px;
}
div + div{
border:10px solid red;
}
       div{
width:100px;
height:100px;
border:20px solid red;
background:green;
padding:-10px;
}
div + div{
border:10px solid red;
}
       None of these.
Which of the following statements is true with regard to CSS3 transitions?
       Using CSS transitions will slow down page upload and produce lag.
       The completion of a CSS transition generates a corresponding DOM event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.
       CSS transitions allow DOM events in CSS values to occur smoothly over a specified duration.
       None of these.
Which of the given options is/are equivalent to the following rule? DIV { line-height: 1.2; font-size: 10pt }
       DIV { line-height: 1.2em; font-size: 10pt }
       DIV { line-height: 12em; font-size: 10pt }
       DIV { line-height: 120%; font-size: 10pt }
       DIV { line-height: 20%; font-size: 10pt }
       DIV { line-height: 80%; font-size: 10pt }
Which of the following is correct about the difference between «rem» and «px» for font sizes?
Note: There may be more than one right answer.
       «rem» is equal to «px».
       «rem» depends on the body’s font size.
       «rem» is independent from the body’s font size.
       «px» is the size of a pixel on a 96 DPI display, while «rem» is the size of a pixel at 72 DPI.
What will happen if the following style declaration is applied to an element?
p { margin: 3em 2em }
       The top and the bottom margins will be 3em and the left and the right margins will be 2em.
       The top and the bottom margins will be 2em and the left and the right margins will be 3em.
       The top and the left margins will be 3em and the bottom and the right margins will be 2em.
       The top and the right margins will be 2em and the bottom and the left margins will be 3em.
Suppose there are 16 <div> elements and a style needs to applied only on every 4th element. Which of the following is correct?
Note: There may be more than one right answer.
       div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16) { }
       div:nth-child(4n) { }
       div:nth-child(4n+4)  { }
       div:nth-child(3n+4)
To make childdiv vertically center of given code, what should the "display" property of parentdiv and childdiv be?
#parentdiv
{
  width: 200px;
  height: 400px;
  vertical-align: middle;
}
#childdiv
{
  width: 100px;
  height: 50px;
}
<div id="parentdiv">
<div id="childdiv">Vertical Center</div>
</div>
       display:table-cell; for parentdiv and display:inline-block; for childdiv
       display:block; for parentdiv and display:inline-block; for childdiv
       display:inline-block; for parentdiv and display:table-cell; for childdiv
       display:inline-block; for parentdiv and display:inline-block; for childdiv
CSS3's border-radius property and border-collapse:collapse do not mix. How can border-radius be used to create a collapsed table with rounded corners?
Note: There may be more than one right answer.
       By using border-collapse: collapse
       By using border-collapse: separate
       By removing border-collapse:
       None of above
Problem to solve:
Need to use attribute selector in css to change link on different color and image.
The following code is not working correctly:
...
<style>
a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }
</style>
.....
<a href="/manual.pdf">A PDF File</a>
Which of the following code snippets will correct issue?
       a[href$='.pdf'] { /*css*/ }
       a[href#='.pdf'] { /*css*/ }
       a[href@='.pdf'] { /*css*/ }
       a{href$='.pdf'} [/*css*/ ]
What is true about Not Equal(!=) selector in CSS3 ?
       It’s cross-browser.
       It’s not cross-browser.
       It will work only for class selector.
       It’s not possible in css3.
Is it possible to format numbers with CSS?
       No, CSS cannot be used for that purpose.
       Yes, it can be done using the number-format property.
       Yes, it can be done using the decimal property.
       None of these.
What is the default value of the transitions property?
       all 0 ease 0
       all 0
       none
       0
The sans-serif generic font-family is characterized by:
       Finish strokes, flared or tapering ends, or actual serifed endings.
       Stroke endings that are plain without any flaring, cross stroke, or other ornamentation.
       Either join strokes or other cursive characteristics beyond those of italic typefaces.
       Primarily decorate the characters while still containing their representations.
What is true about the background-clip property?
       The background-clip property specifies the painting area of the background.
       The background-clip property is not supported in Internet Explorer 8 and earlier versions.
       The background-clip property is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
       All are correct.
Why is it not possible to unite  webkit-border-radius and -moz-border-radius?
       -webkit- and -moz- are vendor-specific prefixes and are not standard CSS3 properties.
       -webkit- and -moz- are standard CSS3 properties and are vendor-specific.
       -webkit- and -moz- are not standard CSS3 properties and not vendor-specific.
       None of these.
What effect does the following rule have?
div { grid-rows: 4em (0.25em 1em); }
       It creates rows with 4em height.
       It creates a header row with 4em height and alternative rows with 0.25em width and 1em heights.
       It creates a header row with 4em height and alternative rows with 0.25em and 1em heights.
       It creates a header row with 4em width and alternative rows with 0.25em width and 1em heights.
Which of the following code is appropriate to flip any background image?
       div{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}
       div{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}
       div:before {
    content:" ";
    float:left;
    background:url(../../image.png) no-repeat 0 0;
    display:block;
}
       div {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    width: 32px;
    height: 32px;
    background: url(http://www.gravatar.com/avatar/5cce99e9bf6154703d8ecdf474a750bd?s=32&d=identicon&r=PG) no-repeat;
}
Consider the following HTML/CSS3 code:
HTML:
<div id="nav"><a href="#">Test</a></div>
CSS:
#nav a {
     background-color: #FF0;
}
#nav a:hover {
     background-color: #AD310B;
     -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
}
What will happen when the link is hovered?
       The link background will fade out.
       The link color will change to #AD310B.
       The link background will fade in and change his color to #AD310B.
       None of the above.
What should be the output of following code?
input[type=»radio»]:checked + label
{
background-color:#000;
}
       Black background color apply on Radio button and label only if it is checked
       Black background color apply on Radio button and label
       Black background color apply on label only
       Black background color apply on checked label only
Which of the following requirements must be met in order to add noise to the background using CSS3?
       A background image is needed.
       A background color is needed.
       Both a background image and a background color are needed.
       It not possible to add noise to a background using CSS3.

CSS Test Answers часть 1CSS Test Answers часть 3

CSS Тест Upwork 2019