CSS（1）

最新推荐文章于 2023-08-16 11:45:30 发布

yx970326

最新推荐文章于 2023-08-16 11:45:30 发布

阅读量137

点赞数

分类专栏： CSS 文章标签：自学总结

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS基本的规则写法（一个基本的样式表由选择器、属性和属性值构成）
标准的CSS写法：
h1{
font-family:黑体;
}
这就是一个基本的CSS样式表，CSS样式表的引用要放在<style>标签中声明
h1表示选择符; font-family是属性，表示定义字体;黑体是属性值，表示定义的字体是黑体字
font-family,即属性和属性值结合在一起，是一条声明语句，声明语句可以有多条，放在{}中，注意声明语句的分号不可遗漏
二、创建选择器
基本选择器：HTML选择器、id选择器、class选择器
通过这几种选择器又可延伸出派生选择器，下面介绍6种选择器
1.HTML选择器(即重新定义HTML表现性标签的样式)
下面展示如何将<h1>标签改变成一个选择器

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
             h1{
                font-family:微软雅黑;       <!--改变字体样式-->
                                            <!--改变字体大小-->
                font-size:2.3em;            
                color:Red;                  <!--改变字体颜色-->
             }
        </style>
    </head>
    <body>
        <h1>我就看你变不变,HTML选择器</h1>
    </body>
</html>

结果表明，<h1>标签下的文本不再是传统的<h1>标签显示的文本。
2.派生选择器（通过依据元素在其位置的上下文关系来定义样式）
h1 h2{
font-family:黑体;
font-size:1em;
color:red;
}
表示样式表将作用于<h1>标签下的<h2>标签中的对象
<h1>我是<h1>标签下的内容</h1>
<h2>我是<h2>标签下的内容</h2>
<h1><h2>我是中间内容</h2></h1>

注意 h1,h2 和 h1 h2 含义不同

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            h1 h2{
                font-family:黑体;
                font-size:1em;
                color:green;     
            }
        </style>
    </head>
    <body>
        <h1>我是h1标签下的内容</h1>
        <h2>我是h2标签下的内容</h2>
        <h1><h2>我是中间内容</h2></h1>                <!--1-->
        <h1>其他内容<h2>我是中间内容</h2>其他内容</h1>    <!--2-->
    </body>
</html>

运行结果：只有标记1、2处的“我是中间内容”被改为样式表中新定义的样式
3.id选择器（通过id选择器将CSS样式表作用到页面的对象上）
样式表定义方法：
#text{
font-family:黑体;
}
将该样式表定义到HTML对象上:
<h1 id=#"text">文本内容</h1>
id选择器练习

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            #myid{
                 font-family:微软雅黑;
                 color:Blue;
                 font-size:2.3em;    
            }
        </style>
    </head>
    <body>
        <h1 id="myid">我在练习css，哈哈很好玩</h1>
    </body>
</html>

id选择器一样可以作为派生选择器 #text p{ color:blue;}

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            #myid p{
              font-family:微软雅黑;
              color:Blue;
              font-size:2.3em;    
        }
        </style>
    </head>
    <body>
        <h1 id="myid">我在练习css，哈哈很好玩        <!--文本为普通<h1>标签的样式-->
            <p>哈哈，猜我是什么样子的</p>            <!--文本为派生选择器定义下的样式-->
        </h1>
    </body>
</html>

4.class选择器
.text{
color:Red;
}
<h1 class="text">文本内容</h1>

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            .text{
                   color:Silver;
                   font-family:黑体;
                   font-size:200%;
            }
        </style>
    </head>
    <body>
        <h1 class="text">我是一个粉刷匠,粉刷本领强</h1>
    </body>
</html>

结果文本内容以黑体银色的样式输出
class也可以作为派生选择器
.text p{
color:Silver;
}
下面定义的CSS样式表只作用于text下的<p>标签内的文本内容

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            .text p{
                 color:Silver;
                 font-family:黑体;
                 font-size:100%;
            }
        </style>
    </head>
    <body>
        <h1 class="text">我是一个粉刷匠,粉刷本领强
           <p>我要把那小房子刷的很漂亮</p>
        </h1>
    </body>
</html>

5.分组选择器（若有多个选择器的内容是一样的，则可以使用分组选择器）
如:
h1{ color:Blue;}
#text{ color:Blue;}
.play{ color:Blue;}
则可以使用分组选择器:
h1,#text,.play{
color:Blue;
}
6.伪类和伪类选择器
伪类选择器不是很多，它们通常用来定义一些特殊的效果，它们的写法由一个冒号和一个带有附加条件的属性组成，
如超链接就是一个典型的伪类选择器，此外还有伪类选择器":lang(语言)" ，它的作用是允许设计者为不同的语言定义特殊的规则
伪类":lang(语言)"的使用

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
              q:lang(smile){
                    quotes:"o(-_-)o""~"    <!---定义了将smile转换的符号->  
              } 
        </style>
    </head>
    <body>
        <p>博君一笑 <q lang="smile">祝你愉快</q></p>
    </body>
</html>

结果：博君一笑o(-_-)o祝你愉快~ （伪类代码的位置被伪类定义的内容所替代）
注意使用伪类定义的页面可以使用火狐浏览器打开，IE7.0以前的版本不能有效支持

三、应用CSS样式表
嵌入样式表
内联样式表
外联样式表
多重样式表
四、用CSS样式表修饰页面文本
1.修饰页面文本字体用font-family属性来定义字体的样式

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
             h1{
                font-family:微软雅黑;    
             }
             p{
                font-family:隶书; 
             }
        </style>
    </head>
    <body>
        <h1>哈哈，尝试修改页面字体，我是微软雅黑</h1>
        <p>哈哈，我是隶书</p>
    </body>
</html>

结果:<h1>标签中的文本字体为微软雅黑，<p>标签中文本字体为隶书
如果不确定浏览器中的字体，或想尝试一些罕见的字体，可以在指定的字体后面添加备用字体，如:
font-family:"全新硬笔书法行书简"，宋体
此时如果浏览器系统中没有"全新硬笔书法行书简"这个字体，那么浏览器默认改变页面文本为宋体（没深刻体会出该功能）
2.文本字号 font-size属性用来改变文本的字体，在规定字体大小时有3种度量方案:
em 任何浏览器的默认字体大小都是1em （还有一种定义字体的方式pt,其中12pt=1em）
px 使用像素直接定义字体的大小
% 以当前文本的百分比定义尺寸

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
             h1{
                 font-size:2em;
             }
             p{
                 font-size:100%;
             }
             h2{
                 font-size:20px;     
             }
        </style>
    </head>
    <body>
        <h1>哈哈，使用CSS改变文本字体大小，我是2em</h1>
        <p>哈哈，我的字体大小是100%</p>
        <h2>吼吼，我的字体大小是20px</h2>
    </body>
</html>

3.文本段落行高使用属性line-height进行行高的设定，同样行高也可以使用em,%,px来设定，1em和100%表示正常的行距

练习:

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
               h1{
                    font-size:200%;
               }
               #big{
                    line-height:200%;
                    color:Red;
                    font-size:1.5em;    
               }
               #small{
                    line-height:0.8em;
                    color:Green;    
                    font-size:1.5em;
               }
               .normal{
                    color:Silver;    
                    font-size:1.5em;
               }
        </style>
    </head>
    <body>
        <h1>2008中国经济发展形势</h1>
        <p id="big">从宏观上说，中国经济发展整体形式良好，2008年国家统计局公布数据为上半年国内生产总值...亿元</p>
        <p id="small">按可比价格计算，同比增长...,比上年同期回落...个百分点，其中，第二产业和第三产业增长均超过...</p>
        <p class="normal">从这个数据我们可以看出，中国经济基础伴随着的是中国综合国力和国际影响力的大幅提升，当今国际事务没有中国是不完美的</p>
    </body>
</html>

上面的代码在设定#big,#small,.normal时均设置了 font-size:1.5em，造成了代码重复，可以使用分组样式定义
p{
font-family:隶书;
font-size:1.5em;
}
p.big{
line-height:1.5em;
}
p.small{
line-height:0.8em;
}
修改后代码

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            h1{
                 font-size:200%;
            }
            p{
                 font-family:隶书;
                 font-size:1.5em;
            }
            p.big{
                 line-height:1.5em;
            }
            p.small{
                 line-height:0.8em;
            }
        </style>
    </head>
    <body>
       <h1>2008中国经济发展形势</h1>
       <p id="big">从宏观上说，中国经济发展整体形式良好，2008年国家统计局公布数据为上半年国内生产总值...亿元</p>
       <p id="small">按可比价格计算，同比增长...,比上年同期回落...个百分点，其中，第二产业和第三产业增长均超过...</p>
       <p class="normal">从这个数据我们可以看出，中国经济基础伴随着的是中国综合国力和国际影响力的大幅提升，当今国际事务没有中国是不完美的</p>
    </body>
</html>

4.禁止文本自动换行通过white-space属性可以禁止文本自动换行

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
            p{
               white-space:nowrap;
            }
        </style>
    </head>
    <body>
      <p>我有一只小毛炉我从来也不骑，有一天我心血来潮骑着它去赶集，我左手拿着小皮鞭我真呀么真得意，啦啦啦啦啦啦，摔了我一身泥</p>
    </body>
</html>

此时浏览器中的页面不会再因为窗口小而自动换行，因而出现下滑栏。此外当定义为white-space:pre时其作用相当于<pre>标签
五、给页面对象添加颜色
设置颜色主要有color和background-color两个属性，其中color改变对象前景色，background-color改变对象的背景色，下例为使用CSS修饰页面的颜色

<html>
    <head>
        <title>CSS练习</title>
        <style type="text/css">
           body{
               background-color:Silver;
               fond-size:100%;
               line-height:1em;   
           }
           p{
               color:Green;
               background-color:Red;
           }
           h3{
               color:orange;
               background:Blue;   
           }
        </style>
    </head>
    <body>
      <p>我有一只小毛炉我从来也不骑，有一天我心血来潮骑着它去赶集，我左手拿着小皮鞭我真呀么真得意，啦啦啦啦啦啦，摔了我一身泥</p>
      <h3>CSS很好玩哦</h3>
    </body>
</html>

修饰页面文本和页面背景的属性
background 作用是将背景属性设置在一个声明中
background-color 设置页面对象的背景颜色
background-image 引用图像设置为背景
background-repeat 设置背景图像重复方式
background-position 设置背景图像的具体位置
backgroung-attachment 设置背景图像是否固定或随着页面的其余部分滚动
color 设置文本颜色
line-height 设置行高
white-space 设置元素中段落排版的方式
word-spacing 设置字间距
font-family 设置文本字体
font-size 设置文本字体
font-style 设置字体风格
font-weight 设置字体的粗细
direction 设置文本方向
letter-spacing 设置字符间距
text-align 对齐页面中的文本
text-decoration 给文本添加下划线
text-transform 控制元素中的字母

练习:制作自己的页面

<html> 
     <head>
          <title>使用CSS制作的第一个页面</title>
          <style type="text/css">
              body{
                  background-image:url("file:///C|/Users/NIIT/Desktop/图片/background1.jpg");
                  background-size:100% 100%;
                  font-size:100%;
              }
              #biaoti{
                  font-family:微软雅黑;
                  font-size:200%;
                  color:Black;
                  font-weight:bold;
                  line-height:1.4em;
              }
              #Date{
                  font-family:隶书;
                  font-size:0.8em;
                  color:Red;
                  font-weight:bold;
                  line-height:1em;
              }
              .content{
                  font-family:Arial,幼圆,宋体;
                  font-size:1em;
                  color:Silver;
                  white-space:pre;
                  line-height:1.6em;                 
              }
              ul{
                  font-family:幼圆,宋体;
                  font-size:0.9em;
                  color:Green;
                  white-space:pre;
                  line-height:1.6em;
              }
              a:link{
                  color:Red;
                  text-decoration:none;
              }
              a:hover{
                  color:Yellow;
                  text-decoration:underline;
              }
              a:visited{
                  color:Silver;
                  text-decoration:none;
              }
          </style>
     </head>
     <body>
          <p id="biaoti" align="center">My own</p>     <!--标题居中-->
          <p align="right">
               <img src="file:///C|/Users/NIIT/Desktop/图片/house.jpg" width="84" height="120" />
          </p>
          <p id="Date" align="center"><a href="Next.html" target=_blank>2018/7/19</a></p>      <!--日期（一个链接，可以跳转到下一个页面）-->
          <p class="content" align="right">                <!--正文-->
                <br>我慢慢地、慢慢地了解到，所谓父女母子一场，只不过意味着，你和他的缘分就是今生今世不断地在目送他的背影渐行渐远。
                    你站在小路的这一端，看着他逐渐消失在小路转弯的地方，而且，他用背影默默告诉你：不必追。
                <br>时间是一只藏在黑暗中的温柔的手，在你一出神一恍惚之间，物走星移。
                <br>有些事，只能一个人做。有些关，只能一个人过。有些路啊，只能一个人走。
                <br>有一种寂寞，身边添一个可谈的人，一条知心的狗，或许就可以消减。有一种寂寞，茫茫天地之间余舟一芥的无边无际无着落，人只能各自孤独面对，素颜修行。
                <br>一个人固然寂寞，两个人孤灯下无言相对却可以更寂寞。
          </p>
          <ul>
               <li>生活就像一面镜子，你若对她笑，她就对你笑</li>
               <li>只有相信自已，才能让别人肯定的相信你</li>
               <li>我们生活的支点是什么？就是我们自己。你自己站直，不要让别人扶你</li>
               <li>一个人没目标，前途尽费；一个人没理想，碌碌终生</li>
               <li>青春的花朵，在经历过风霜雪雨后会熠熠生辉</li>
          <ul>
     </body>
</html>