HTML&CSS學習筆記

標籤：

<table>

　　<thead>

　　　　<tr>            // table row

　　　　　　<th></th>　　　　// table head

　　　　</tr>

　　</thead>

 

　　<tbody>

　　　　<tr>

　　　　　　<td></td>　　　　// table data

　　　　</tr>

　　</tbody>

</table>

 

 

<span></span>

 

 

1. A type attribute that should always be equal to "text/css"
2. A rel attribute that should always be equal to "stylesheet"
3. A href attribute that should point to the web address of your CSS file

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>


Many HTML elements support theborder property. This can be especially useful with tables.

There‘s also a very special selector you can use to apply CSS styling to every element on the page: the * selector. 

class           .
id              #
Classes are useful when you have a bunch of elements that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab.

div > p { /* Some CSS */ }
This only grabs <p>s that are nesteddirectly inside of <div>s; it won‘t grab any paragraphs that are, say, nested inside lists that are in turn nested inside<div>s.
This allows you to take elements of different types and give them the same styling.

IDs, on the other hand, are great for when you have exactly one element that should receive a certain kind of styling.
This allows you to apply style to a single instance of a selector, rather than allinstances.

pseudo-class selectors for links

a:hover {
color: #cc0000;
font-weight: bold;
text-decoration: none;
}

a:link{}

a:visited{}

p:first-child {    color: red;}/*It‘s used to apply styling toonly the elements that are the first children of their parents.*/

p:nth-child(2) {    color: red;}/*第二個孩子顏色為紅色*/

body :first-child{
font-size: 50px;
}

body :nth-child(4){
font-size: 26px;
color:blue;
}

Make sure to leave a space betweenbody :nth-child. If you don‘t have a space it means "find the body tag that is an nth-child". If you have a space it means "find the nth-child of the bodytag".

HTML&CSS學習筆記