css学习笔记

1.css的加载

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Result</title>
 5         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 6     </head>
 7     <body>
 8         <p>I want to be SIZE 44 font!</p>
 9     </body>
10 </html>

2.css的注释：/*comment*/

3.css的十六进制：数字前面加#

　　如color:#cc6666

4.css的相对字体大小em

1em在任何显示器上表示的大小都是相同的

    <p style="font-size: 1em">One em!</p>

5.css的字体

serif：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同，如中文中宋体，英文中Times New Roman；

sans-serif：没有这些额外的装饰，而且笔画的粗细差不多，如英文中Arial，Tahoma，中文中黑体、幼圆、雅黑。

cursive:花体

以上字体适用于任何机器

6.css的备用值功能

如：

p {
    font-family: Tahoma, Verdana, sans-serif;
}

css会依次尝试选择Tahoma, Verdana, sans-serif，直到遇到一个用户机器中有的字体

7.css的边界：border

1 td{
2     height:50px;
3     border:1px dashed blue /*1px表示边界宽度，dashed表示虚线*/
4 }
5 
6 table{
7     border:1px solid black /*solid表示实线*/
8 }

8.链接符a的修饰:text-decoration

a{
    color:#cc0000;
    text-decoration:none;  /*表示无修饰*/
}

9.css 的嵌套选择

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 5         <title>Result</title>
 6     </head>
 7     <body>
 8         <h3>I'm plain old font!</h3>
 9         <div>
10             <h3>Me, too!</h3>
11             <div>
12                 <h3>Me three!</h3>
13                 <div>
14                     <h3>Forget you guys. I'm about to be red!</h3>
15                 </div>
16             </div>
17         </div>
18     </body>
19 </html>

1 div div div h3{
2     color:red; //将上面html中“Forget you guys. I'm about to be red!”设置成红色

3 }

10.css的*选择器

1 *{
2     border:1px dashed blue;
3 }//作用效果为将html所有元素都设置一个边框

11.css的字体属性：font-size，font-weight，font-family

12.css的直接儿子选择器

1 div>p{
2     color:#7ac5cd;//设置为div元素直接儿子的p元素为红色
3 }

13.css的类选择器class

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 5         <title>Result</title>
 6     </head>
 7     <body>
 8         <!--Add your HTML elements with the class "fancy" below!-->
 9         <p class = "fancy">This is a class</p>//给p元素定义类fancy
10         
11     </body>
12 </html>

1 /*设置类属性，可看到类选择器以.开头*/
2 .fancy{
3     font-family:cursive;
4     color:#0000cd;
5 }

14.css的ID选择器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 5         <title>Result</title>
 6     </head>
 7     <body>
 8         <!--Add your HTML elements with the ID "serious" below!-->
 9     <p id="serious">This is a ID</p>//给p元素设置id属性
10         
11     </body>
12 </html>

1 /*css 设置id的属性，可看到id选择器以#开头*/
2 #serious{
3     font-family:Courier;
4     color:#cc0000;
5 }

15.css的伪类选择器

在html中，我们常常需要实现这样的功能，即鼠标放在一个链接上或点击一个链接时，链接的状态发生改变。css的伪类选择器可以完成这种功能。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 5         <title>Result</title>
 6     </head>
 7     <body>
 8     <ul>
 9         <li><a href="http://www.codecademy.com/">Codecademy Home</a></li>
10         <li><a href="http://www.codecademy.com/learn">Learn</a></li>
11         <li><a href="http://www.codecademy.com/create/creator">Teach</a></li>
12         <li><a href="http://www.codecademy.com/edit_account/basic_info">Settings</a></li>
13     </ul>
14     </body>
15 </html>

1 a:hover {
2     color: #cc0000;
3     font-weight: bold;
4     text-decoration: none;//这段css代码完成在鼠标移动到链接文字上，链接状态发生变化。可见伪选择器实现方式为：选择器名：伪选择器名
5 }

a:hover 鼠标停留的链接 a:link 没有访问的链接 a:visited :访问过的链接

16.css的first-child和nth-child选择器

1 p:first-child{//设置p元素的第一个儿子的属性
2     color:red;
3     font-family:cursive;
4 }

p:nth-child(2){
    font-family:Tahoma
}//设置p元素的第二个儿子属性,这里的第n个儿子指的是p是其父亲的第n个儿子，而不是p的第n个儿子

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <h3 class="fancy">This is a h3 header</h3>
        <p class="fancy">This is a paragraph</p>
        <p id="serious">This is another paragraph</p>
        <p>This is the third paragraph</p>
    </body>
</html>

如上要改变<p>This is the third paragraph</p>的属性，css的代码如下：

p:nth-child(4){
    font-size:26px;
}

17.复习

<!DOCTYPE html><!--下面为div设置了类和id属性，并在css中设置响应属性-->
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend" id="best_friend"></div>
        <div class="family"></div>
        <div class="enemy" id="archnemesis"></div>
        
    </body>
</html>

 1 /*Add your CSS below!*/
 2 
 3 div {
 4     display: inline-block;
 5     margin-left: 5px;
 6     border-radius:100%;
 7     border:2px solid black;//solid还可以设置为dashed，dotted
 8     height:100px;
 9     width:100px;
10     
11 }
12 .friend{
13     border:2px dashed #008000;
14 }
15 .family{
16     border:2px dashed #0000ff;
17 }
18 .enemy{
19     border:2px dashed #ff0000;
20 }
21 #best_friend{//id选择器可以覆盖掉类选择器
22     border:4px solid #00c957;
23 }
24 #archnemesis{
25     border:4px solid #cc0000;
26 }

18.css的定位

html中的每个元素都被放置在一个css盒子中，盒子的属性如下图

19.css的定位符display

display：none //使元素消失不见

display：block//使元素表现为一个盒子并占满页面的正行，默认属性

display：inline-block//使元素表现为一个盒子并能排列在一行

display: inline//使元素不再表现为一个盒子，能排列在一行，并尽量小的占有宽度

posted @ 2013-05-09 15:25 m_handle 阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

css学习笔记

公告