javaweb 1.2css的学习

最新推荐文章于 2025-11-24 17:18:55 发布

原创最新推荐文章于 2025-11-24 17:18:55 发布 · 813 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细介绍了CSS的基础知识，包括选择符、属性和值的语法，以及在网页中添加CSS的三种方式：内嵌、内部和外部样式。重点讲解了选择符的分类，如普通选择符、类选择符和ID选择符，还探讨了伪类和伪对象的使用，如超链接伪类和常用伪对象。最后，通过一个实例展示了div加css布局，涉及margin、border和padding等属性的运用，帮助理解CSS在网页布局中的作用。

一：css的语法由3个部分构成，即选择符（selector）、属性（property）和属性值（value）。语法格式


选择符{
  属性：值
}

任何一个HTML标签都可以是css样式例如：

 <style>
        body{
            color: blue;
        }
        p{
            text-align:center;
            color:red;
        }
        h2,h2,h3,h1,h4{
            color: blue;
        }
    </style>

二：在网页中添加css的方法

1）内嵌样式

<body>
<font size="4" color="red">很高兴认识你</font>
</body>

2）内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>

    <style>

        h2,h2,h3,h1,h4{
            color: blue;
        }
    </style>
</head>
<body>

</body>
</html>

3）外部样式（推荐使用）

1：新建一个.css后缀的文件

效果图

三：选择符的分类

1）普通选择符（任意的html标记都可以作为选择符这样的选择符称为普通选择符）

<style>
    p{
        color: red;
    }
</style>

2）类选择符

<style>
    p.right{
        color: red;
    }
    p.center{
        color: blue;
    }
</style>

结果图

3）id选择符（语法格式）

<style>
    #right{
        color: red;
    }
</style>
</head>
<body>
<p id="right">我太幸福了</p>

</body>

结果图

四：伪类和伪对象

1）超链接伪类（共有4个 a:link 、a:visited、a:hover、a:active）顺序为先写link 、visited、hover、active

<style>
   a:link{
       color: red;/*未被激活的链接状态*/
   }
   a:visited{
       color: #000;/*已被访问过的链接状态*/
   }
   a:hover{
       color: chocolate;/*鼠标悬浮上面鼠标的状态*/
   }
   a:active{
       color: blue;/*鼠标点中激活的状态*/
   }
</style>

2）常用伪对象

<style>
p:first-letter{
    color: blue;
    font-size: 6px;/* 设置段落标记的第一行字符的样式*/
}
body:first-line{
    color: red;/*设置body对象里第一行样式代码*/
}
</style>

五：div 加css布局（写一写记不住的属性）

margin:外边距；

border：外边框

padding：内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用外部标签</title>
    <style>
        #out{
            width: 800px;
            height: 600px;
        }
     #head{
         margin-top: 20px;
         background: red;
         width: auto;
         text-align: center;
     }

     #left{
         width:400px ;
         float: left;
         height: 200px;
         background: green;
         text-align: center;
     }
     #right{
         width:400px ;
         float: left;
         height: 200px;
         background: blue;
         text-align: center;
     }
     #down{
         width: 800px;
         background: aqua;
         height: auto;
         text-align: center;
     }
    </style>
</head>
<body>
<div id="out">
    <div id="head">头部</div>
    <div>
        <div id="left">中间左</div>
        <div id="right">中间右</div>
    </div>
    <div id="down">底部</div>
</div>

</body>
</html>