owned this note
owned this note
Published
Linked with GitHub
# CSS for Intermediate
---
tags: HTML CSS relate
---
###### tags: `HTML, CSS`
參考學習資源連結:https://www.htmldog.com/guides/css/intermediate/
**Class and ID Selectors**
In the CSS,
a **class selector is a name preceded by a full stop (“.”)**.
an **ID selector is a name preceded by a hash character (“#”)**.
**The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.**
------
# Grouping and Nesting
**Grouping**
You can give the same properties to a number of selectors without having to repeat them.
For example, if you have something like:
```
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
```
You can simply separate selectors with commas in one line and apply the same properties to them all so, making the above:
```
h2, .thisOtherClass, .yetAnotherClass {
color: red;
}
```
------
**Nesting**
If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
For example:
```
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
```
This removes the need for classes or IDs on the p and h1 tags if it is applied to HTML that looks something like this:
```
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
```
This is because, by separating selectors with spaces, we are saying “h1 inside ID top is colour #ff0” and “p inside ID top is red and bold”.
巢狀簡單用下圖說明的話就是肉粽字樣有在內部的就都可以使用class的效果沒有的話則否
------------
# Pseudo Classes(偽類)
偽類 (pseudo class) 就是在選已經存在的東西，比方說 a:hover 就是選了已經存在的 <a> 的某一個狀態
Links
link, targeting unvisited links, and visited, targeting, you guessed it, visited links, are the most basic pseudo classes.
The following will apply colors to all links in a page depending on whether the user has visited that page before or not:
```
a:link {
color: blue;
}
a:visited {
color: purple;
}
```
**Dynamic Pseudo Classes**
**active** is for when something activated by the user, such as when a link is clicked on.
**hover** is for a when something is passed over by an input from the user, such as when a cursor moves over a link.
**focus** is for when something gains focus, that is when it is selected by, or is ready for, keyboard input.
舉例來說一個超連結會有很多狀態像是滑鼠移到上面的 :hover，點下去的 :active ,
出框框讓鍵盤可以打字的:focus,這些都是表示連結的狀態。
----
**First Children**
Finally (for this article, at least), there is the first-child pseudo class. This will target something only if it is the very first descendant of an element. So, in the following HTML…
```
<body>
<p>I’m the body’s first paragraph child. I rule. Obey me.</p>
<p>I resent you.</p>
```
...
…if you only want to style the first paragraph, you could use the following CSS:
```
p:first-child {
font-weight: bold;
font-size: 40px;
}
```
**nth-child**
這個部分可以針對特定的內容作變化
```
p:nth-child(輸入數字){
font-weight: bold;
font-size: 40px;
}
```
# Shorthand Properties(一些速記、縮寫)
**Margins and Padding**
可以縮寫成這樣一排 順序是上、右、下、左
```
p {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
Can be summed up as:
p {
margin: 1px 5px 10px 20px;
}
```
**Borders**
可以縮寫成順序width, color, style
```
p {
border-width: 1px;
border-color: red;
border-style: solid;
}
Can be simplified to be:
p {
border: 1px red solid;
}
```
**Fonts**
Font-related properties can also be gathered together with the font property:
```
p {
font: italic bold 12px/2 courier;
}
```
This combines font-style, font-weight, font-size, line-height, and font-family.
# Background Images
> CSS background images are a powerful way to add detailed presentation to a page.
它一般程式碼如下圖:
```
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
```
This amalgamates these properties:
* **background-color**, which is the color of the image.
* **background-image**, which is the location of the image itself.
* **background-repeat**, which is how the image repeats itself. Its value can be:
* **repeat**, the equivalent of a “tile” effect across the whole background,
* **repeat-y**, repeating on the y-axis, above and below,
* **repeat-x** (repeating on the x-axis, side-by-side), or
* **no-repeat** (which shows just one instance of the image).
* **background-position**, which can be **top, center, bottom, left, right**, a length, or a percentage, or any sensible combination, such as **top right**.
優質的免費圖檔來源: https://unsplash.com/
# Specificity
> More Specific = Greater Precedence(優先順序)
# Display
> The most fundamental types of display are inline, block and none and they can be manipulated with the display property and the shockingly surprising values inline, block and none.
**Inline**
The following code, for example, **will cause all list items in a list to appear next to each other in one continuous line** rather than each one having its own line:
`li { display: inline }`
**Block**
> block makes a box standalone, fitting the entire width of its containing box, with an effective line break before and after it. Unlike inline boxes, block boxes allow greater manipulation of height, margins, and padding. Heading and paragraph elements are examples of elements that are displayed this way by default in browsers.
```
#navigation a {
display: block;
padding: 20px 10px;
}
```
**None**
> none, well, doesn’t display a box at all, which may sound pretty useless but can be used to good effect with **dynamic effects**, such as switching extended information on and off at the click of a link, or in alternative stylesheets.
The following code, for example, could be used in a print stylesheet to basically “turn off” the display of elements such as navigation that would be useless in that situation:
`#navigation, #related_links { display: none }`
Sign in with Wallet
