css总结

最新推荐文章于 2025-08-12 16:33:58 发布

原创最新推荐文章于 2025-08-12 16:33:58 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #结构

html 专栏收录该内容

1 篇文章

订阅专栏

1.优势：使表现层和结构层分离

2.样式：

    行内样式：
        <h2 style="color:#0F0">Hello World</h2>
    内部样式：
        <style type="text/css">
            a{
                color: red;
            }
        </style>
    外部样式：
        在head放置<link href=“a.css”  type=“text/css” rel=“stylesheet”/> 
    优先级：
        行内样式  > 内部样式 > 外部样式   就近原则

3.选择器

    格式：选择器{属性：属性值;}
    举例：h2{color : #0F0; }

常用选择器：
这里写图片描述

4.盒模型：

这里写图片描述

5.定位：
相对定位、绝对定位
写个demo看看就知道了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /*float: left;*/
        }

        .box2{
            /*position: absolute;*/
            position: relative;
            top: 20px;
            left: 20px;
            background-color: blue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>