CSS+DIV基础

最新推荐文章于 2022-07-10 18:32:26 发布

「已注销」

最新推荐文章于 2022-07-10 18:32:26 发布

阅读量119

点赞数

分类专栏： CSS DIV web前端开发

本文链接：https://blog.csdn.net/qq_43711677/article/details/102468185

版权

web前端开发同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

DIV

4 篇文章 0 订阅

订阅专栏

1.CSS介绍

CSS的基本概念

层叠样式表，也称为级联样式表，用来进行网页风格设计。

CSS的优点

1.表现和内容分离。
2.增强网页的表现力。
3.使整个网站风格趋于统一。

*CSS的编辑方法

1.写在HTML里的CSS规则。1.1写在head中，1.2写在style属性值中。
2.写在单独的CSS文件中。

CSS选择器的类型

1.标记选择器（元素选择器）：直接以标记名作为选择器。

<!-- 标记选择器 -->
table{
    width: 600px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
    background-color: #000000;
    font-size: 9pt;

}

2.类选择器：class属性。

/*类选择器*/
.mar{
    font-size: 26px;
    font-family: 隶书;
    font-weight: bolder;
    height: 50px;
    text-shadow: 0.1em 2px 6px blue;
}

标记选择器和类选择器一同使用：（比较常用）

/*类选择器和标记选择器一同使用*/
p.hui2{
    text-align: center;
    color:red;
    font-family: 宋体;
    font-size: 15pt;
    font-weight: bolder;
    <!--文字阴影效果的展示   text-shadow属性 四个参数 -->
    text-shadow: 10em 2px 6px blue;
}

3.id选择器：！注意id选择器的正确使用方法 3.1写在head标记中3.2只能页面上的标记才能使用，只能指定一个标记

  <!-- id选择器的正确使用方法 1.写在head标记中2.只能页面上的标记才能使用，只能指定一个标记-->
    <style type="text/css">
        #beautiful{
            color: red;
            font-size: 36px;
            font-family: 隶书,黑体;
            font-weight: bold;
        }
    </style>
</head>
<body>
     <marquee class="mar" bgcolor="#330099" direction="right">文字滚动效果</marquee>
     <p id="beautiful">中心思想:</p>

4.伪类选择器：

<!-- 伪类选择器-->
    <style type="text/css">
        a:link{color:black;text-decoration:none;}
        a:visited{color:blue;text-decoration:none;}
        a:hover{color:red;text-decoration:underline;}
        a:active{color:yellow;text-decoration:underline;}
        p:first-letter{font-weight:bold;font-family:"黑体";}
        p:first-line{font-size:32px;}
    </style>
</head>
<body>
<p>在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。<br>注意：a:hover 必须被置于a:link 和a:visited 之后，才是有效的。a:active必须被置于a:hover之后，才是有效的。</p>
<a href="http://www.baidu.com">搜索一下：百度</a>

CSS的定义与引用

1.内联样式表
写在标记后，用style标记。用的较少。

<p style="font-weight: bold;font-family: 黑体; font-size: 20px;color: yellow">在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：</p>

2.内部样式表
写在head标记中，用于标记id。

    <style type="text/css">
        p{
            text-align: center;
        }
        #beautiful{
            color: red;
            font-size: 36px;
            font-family: 隶书,黑体;
            font-weight: bold;
        }
    </style>
</head>
<body>
     <marquee class="mar" bgcolor="#330099" direction="right">文字滚动效果</marquee>
     <p id="beautiful">中心思想:</p>

3.外部样式表
还分为链接外部样式表和导入外部样式表。
链接：href是css文件的名称，rel和type是固定值。

 <link href="CSS文件/Table.css" rel="stylesheet" type="text/css">

导入：@import+css的文件路径。（url）

<style type="text/css">
        @import "first.css";
    </style>

2.DIV介绍

div（Division/Section）是分区或分节的意思，图层div标记是一个块级标记，其前后具有换行符，可定义文档中的分区或节。

div还是HTMl中的一个标记。

属性：id/class/position/border/background-color/left/top/width/height……。

DIV 层叠

利用positon和z-index属性就可以实现DIV图层的层叠。

    <style type="text/css">
        body{
            margin: 0;/*margin表示边距*/
        }
        div{
            position: absolute;
            width: 320px;
            height: 320px;
            text-align: center;
            /*如何让文字在div正中央显示*/
            /*先设置一个div的宽高，使用text-align水平居中；再使用line-height上下居中即可（line-height设置的高度需跟div的高度一致）*/
            line-height: 280px;
        }
        #d1{
            /*background-color: #cad9ea;*/
            background-image: url("CSS文件/Pictures/书签2.jpg");
            z-index: 0;
        }
        #d2{
            background-image: url("CSS文件/Pictures/书签2.jpg");
            top: 180px;
            left: 180px;
            z-index: 1;
        }
        #d3{
            background-image: url("CSS文件/Pictures/书签2.jpg");
            top: 360px;
            left: 360px;
            z-index: 2;
        }
            </style>

3.span介绍

span是行内标记，也是行内元素，同样包含HTML的各种元素，只能在一行显示，在它的前后不会自动换行。但可以通过display属性转换。

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+DIV基础

1.CSS介绍CSS的基本概念层叠样式表，也称为级联样式表，用来进行网页风格设计。CSS的优点1.表现和内容分离。2.增强网页的表现力。3.使整个网站风格趋于统一。*CSS的编辑方法1.写在HTML里的CSS规则。1.1写在head中，1.2写在style属性值中。2.写在单独的CSS文件中。CSS选择器的类型1.标记选择器（元素选择器）：直接以标记名作为选择器。<!...
复制链接

扫一扫

专栏目录