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. type attribute that should always be equal to "text/css"
  2. rel attribute that should always be equal to "stylesheet"
  3. 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".
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。