css Web Developer Bootcamp的随机CSS课程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Web Developer Bootcamp的随机CSS课程相关的知识,希望对你有一定的参考价值。

/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!

/* Give the <body> element a background of #bdc3c7*/

body {
  background: #bdc3c7;
}


/* Make the <h1> element #9b59b6*/

h1 {
  color: #9b59b6;
}

/* Make all <h2> elements orange */

h2 {
  color: orange;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/

li {
  color: #459BE6;
}

/*Change the background on every paragraph to be yellow*/

p {
  background: yellow;
}

/*Make all inputs have a 3px red border*/

input {
  border: 3px solid red;
}

/* Give everything with the class 'hello' a white background*/

.hello {
  background: white;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/

#special {
  border: 2px solid #459BE6;
}

/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/

div p {
  font-size: 25px;
}

/*Make only inputs with type 'text' have a gray background*/

input[type="text"] {
  background: gray;
}

/* Give both <p>'s inside the 3rd <div> a pink background*/

 div:nth-of-type(3) p {
  background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/

div:nth-of-type(3) p:nth-of-type(2) {
  border: 5px solid white;
}

/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/

div:nth-of-type(3) em {
  color: white;
  font-size: 20px;
}


/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/

/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/

input:checked {
  margin-left: 50px;
}

/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/

label {
  text-transform: uppercase;
}

/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/

#special::first-letter {
  color: green;
  font-size: 100px;
}
/*Make the <h1> element's color change to blue when hovered over */

h1:hover {
  color: blue;
}
/*Make the <a> element's that have been visited gray */

a:visited {
  color: gray;
}

以上是关于css Web Developer Bootcamp的随机CSS课程的主要内容,如果未能解决你的问题,请参考以下文章

Chrome Web Developer 工具,无法进行实时 CSS 编辑,重置为默认值

Web Developer 工具栏是不是真的有一个保存按钮来保存在 Firebug 中修改的 CSS?

Visual Web Developer (Express):为开发环境设置文档根目录

My Web Developer Roadmap

CSS变量使用教程

CSS之 background-size