JAVA WEB从入门到精通day02 DIV+CSS的学习

最新推荐文章于 2024-07-02 14:08:07 发布

春水上行

最新推荐文章于 2024-07-02 14:08:07 发布

阅读量668

点赞数 2

分类专栏： java web基础文章标签： java web css

本文链接：https://blog.csdn.net/c99463904/article/details/53614419

版权

java web基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本节思维导图

这里写图片描述

css简介

    css：层叠样式表
    是一种用来表现HTML或XML等文件样式的计算机语言。
    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
    CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css和html结合的方式

    （1）每个html的标签都有一个style属性，可以把css和html结合在一起
        <div style="background-color:yellow;color:blue">  style里面写属性和值，属性和值用：分开 


    （2）在head头标签里实现style标签,来写css代码
        <html>
            <head>
                <style type="text/css">
                    div{                        //来指定在什么标签里使用
                        background-color:red;
                        color:green;
                    }
                </style>
            </head>
            <body>
                <div>床前明月光，疑是地上霜</div>
            <body>
        </html>  


    （3）在head头标签里山实现style标签，在style里面写入
        @import url（CSS文件的路径）
        第一步：创建css文件
        div{
            background-color:red;
            color:yellow;
            }
        第二步使用css文件
        <head>
        <style type="text/css">
            @import url(div.css);
        </style>
        </head>

        这种方式并不推荐使用，因为在某些浏览器不起作用。


    （4）在head头标签里面使用link标签进行连接css文件（大部分都用这种方式）
        第一步首先要创建css文件
        第二步在页面中使用
        <head>
            <link rel="stylesheet" type="text/css" href="css文件路径"/>
        </head>

    css选择器：通过选择器可以指定对哪些元素进行控制。
    基本格式：选择器名称{属性：属性值；属性：属性值；.....}

css的基本选择器

    （1）标签选择器:选用标签的名称作为选择器名
        <html>
            <head>
                <style>
                    div{
                    background-color:red;
                    color:yellow;
                        }
                    p{
                        background-color:gray;
                        color:green;
                    }
                </style>
            </head>

            <body>
                <div>床前明月光，疑是地上霜</div>
                <p>举头望明月，低头思故乡</p>
            <body>
        </html>  


    （2）class选择器：每个html标签都有class属性
    可以通过  标签名.class名  使用选择器，如果多个标签class名相同，则可以用.class名对所有相同的进行设置
                <html>
                    <head>
                        <style>
                            div.a{
                            background-color:red;
                            color:green;
                                }
                            p.b{
                                background-color:gray;
                                color:green;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="a">床前明月光，疑是地上霜</div>
                        <p class="b">举头望明月，低头思故乡</p>
                    <body>
                </html>   


    （3）id选择器:每个html标签都有id属性
    可以通过  标签名#id名  使用选择器，如果多个标签id相同，可以通过 #id名对所有id相同的进行设置
        <html>
            <head>
                <style type="text/css">
                    div#a{
                    background-color:red;
                    color:green;
                        }
                    p#b{
                        background-color:gray;
                        color:yellow;
                    }
                </style>
            </head>
            <body>
                <div id="a">床前明月光，疑是地上霜</div>
                <p id="b">举头望明月，低头思故乡</p>
            <body>
        </html>

        基本选择器的优先级：id选择器>class选择器>标签选择器

css扩展选择器

        （1）关联选择器：当要设置嵌套标签里面的样式时，可以通过两个标签之间加空格。
                <html>
                    <head>
                        <style type="text/css">
                            div p{
                                background-color:gray;
                            }
                        </style>
                    </head>
                    <body>
                        <div><p>床前明月光，疑是地上霜</p></div>
                        <p>举头望明月，低头思故乡</p>
                    <body>
                </html>  

        （2）组合选择器：当想把不同的标签设置成相同的样式时，可以通过标签之间加逗号来实现
                <html>
                    <head>
                        <style type="text/css">
                            div,p{
                                background-color:gray;
                            }
                        </style>
                    </head>
                    <body>
                        <div>床前明月光，疑是地上霜</div>
                        <p>举头望明月，低头思故乡</p>
                    <body>
                </html>  


        （3）伪元素选择器：css里面提供了一些定义好的样式。比如可以设置超链接的点击前后的状态。可以自己查阅。

css盒子模型

        网页设计中用到的思维模型，把内容封装在盒子中进行布局。
        盒子具有弹性，当放入的内容大于盒子时，不会撑坏，而是撑大。
        属性：内容（content），边框（border），内边距（padding），外边距（margin）
        边框的属性：边框的粗细，样式，颜色。
        四个属性都可以通过 -top，-bottom，-left，-right进行特定方向的设置。
        <html>
            <head>
                <style type="text/css">
                    div{
                        border:2px solid red;
                        padding:30px;
                        margin:20px;
                        border-right:2px solid blue;
                    }
                </style>
            </head>
            <body>
                <div>床前明月光，疑是地上霜</div>
                <div>举头望明月，低头思故乡</div>
            <body>
        </html>

css的定位

        position：absolute或者relative
        都可以使用top，bottom，right，left对div进行定位。

            <style type="text/css">
                div{
                    width:200;
                    height:300;
                    border:2px solid red;
                    position:relative;
                    top:50px;
                    left:300px;
                }
            </style>

css+div只需要读懂理解即可。具体实现可以百度或者翻阅文档。

春水上行

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVA WEB从入门到精通day02 DIV+CSS的学习

本节思维导图css简介 css：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。css和html结合的方式（1）每个html的标签都有一个s
复制链接

扫一扫