week4 - Sakura01210/wp109b GitHub Wiki

第四周筆記

CSS Combinator

Descendant Selector

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

Child Selector (>)//定位孩子

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

Adjacent Sibling Selector (+)//定位兄弟，立即兄弟，在後面的算，前面的不算

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

General Sibling Selector (~)

div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

CSS Overflow

visible

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
會超出框外
div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

hidden

With the hidden value, the overflow is clipped, and the rest of the content is hidden:
會遮住框外的地方
div {
  overflow: hidden;
}

scroll

Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
做出拉條，可上下移動，就算不需要
div {
  overflow: scroll;
}

auto

The auto value is similar to scroll, but it adds scrollbars only when necessary:
類似scroll但只有需要才用
div {
  overflow: auto;
}

overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.
指定X或Y
div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

● left - The element floats to the left of its container
● right - The element floats to the right of its container
● none - The element does not float (will be displayed just where it occurs in the text). This is default
● inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.

float: right;

img {
  float: right;
}

float: left;

img {
  float: left;
}

No float

In the following example the image will be displayed just where it occurs in the text (float: none;):
  float: none;
}

Float Next To Each Other

Normally div elements will be displayed on top of each other. However, if we use float: left we can let elements float next to each other
div {
  float: left;
  padding: 15px;
}//由左向右堆--------> | red | yellow | green |

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

The clear Property

The clear property specifies what elements can float beside the cleared element and on which side.

The clear property can have one of the following values:

none - Allows floating elements on both sides. This is default
left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
inherit - The element inherits the clear value of its parent
The most common way to use the clear property is after you have used a float property on an element.

When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

The clearfix Hack

If an element is taller than the element containing it, and it is floated, it will "overflow" outside of its container:
.clearfix {
  overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

CSS Layout - display: inline-block

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}//左右突顯

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}//左右大格突顯

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}//上下大格突顯

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. 
.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

When you hover over the link in the example, it will change color:
a.highlight:hover {
  color: #ff0000;
}

Hover on

An example of using the :hover pseudo-class on a <div> element:
div:hover {
  background-color: blue;
}

Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip):

Hover over me to show the <p> element.
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent

CSS Navigation Bar

Navigation Bar = List of Links

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
● Home
● News
● Contact
● About
Note: We use href="#" for test links. In a real web site this would be URLs.

Vertical Navigation Bar Examples

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}

CSS [attribute="value"] Selector

<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

CSS border-radius-指定每個角

四個值-border-radius：15px 50px 30px 5px; （第一個值適用於左上角，第二個值適用於右上角，第三個值適用於右下角，第四個值適用於左下角）：
 
三個值-border-radius：15px 50px 30px; （第一個值適用於左上角，第二個值適用於右上角和左下角，第三個值適用於右下角）：
兩個值-border-radius：15px 50px; （第一個值適用於左上角和右下角，第二個值適用於右上角和左下角）：
一個值-border-radius：15px; （該值適用於所有四個角，均四捨五入：

home

⚠️ **GitHub.com Fallback** ⚠️