CSS_入门学习——CSS与HTML结合的方式、CSS选择器、CSS盒子模型、CSS布局

最新推荐文章于 2022-03-03 19:47:20 发布

RenSLei

最新推荐文章于 2022-03-03 19:47:20 发布

阅读量296

点赞数 1

分类专栏： javaweb CSS

本文链接：https://blog.csdn.net/renshilei123/article/details/80300850

版权

javaweb 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

CSS Note

简介

是什么：层叠样式表

可以做什么：可以使页面更加美观，可以将代码和样式分离开来，以便后期的维护

怎么做：

1、css结合其他东西才能有用，与html的四种结合方式：

1.1利用被一个标签都有的属性：style

<div style="background-color:gray;color:red;">方式一</div>

1.2利用标签<style></style>写在头文件<head>里

写法：表示div标签里的内容的设置

<style type="text/css">
            <!-- css代码 -->
            div{
                background-color: blue;
                color:red;
            }
        </style>

1.3和第二种一样，写在头文件里，只是是引入一个css的文件(了解)

 <style type="text/css">
        <!-- 引入css文件 -->
        @import url(div.css);
    </style>

注：在有些浏览器下不起作用，需要另外写一个css文件

1.4使用头标签link,也是引入外部的css文件，实现了样式和网页代码的分离功能（开发常用）

-创建一个css文件
-在头文件中使用link引入该文件即可：

 <link rel="stylesheet" type="text/css" href="css文件的路径">

css文件示例：div.css

div{
        background-color: green;
        color: black;
       }

*** 优先级：（一般情况）
由上到下，由外到内。优先级由低到高。
即后加载的优先级高

*** 格式选择器名称{属性名:属性值;属性名:属性值;......}

2、css的选择器的种类：

2.1 标签选择器：使用标签名作为选择器的名称，

如：对标签<div>而言：

 div{
                    background-color: blue;
                    color:red;
                }

2.2 class选择器

所有html标签都有一个属性class

<div class="haha">aaaaaaaa</div>

代码示例：

<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style type="text/css">
                /*div.haha{
                    background-color:gray;
                    color:red;
                }
                p.haha{
                    background-color:gray;
                    color:red;
                }*/
                /* 以上可以简写为： */
                .haha{
                    background-color:gray;
                    color:red;
                }
            </style>
        </head>
        <body>
            <div class="haha">床前明月光，疑是地上霜</div>
            <p class="haha">举头望明月，低头思故乡</p>
        </body>
        </html>

2.3 id选择器：

所有标签都有属性id

<div id="hehe">bbbbb</div>

示例：

 <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style type="text/css">


                /* div#hehe{
                    background-color:gray;
                    color:red;
                }
                p#hehe{
                    background-color:gray;
                    color:red;
                } */
                #hehe{
                    background-color:gray;
                    color:blue;
                }


            </style>
        </head>
        <body>
            <div id="hehe">路漫漫其修远兮</div>
            <p id="hehe">吾将上下而求索</p>
        </body>
        </html>

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

3、css的扩展选择器

3.1 关联选择器

<div>
            <p>wwwww</p>
        </div>

设置p标签(嵌套标签)的样式?

示例：

 <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style type="text/css">
                div p{
                    background-color:gray;
                    color:orange;
                }
            </style>
        </head>
        <body>
            <div>
                <p>css的扩展选择器</p>
            </div>
            <p>wwwwwwwwwwww</p>
            <!-- 只改变嵌套的p标签的样式 -->
        </body>
        </html>

3.2 组合选择器

如将两个或多个标签的样式设置成一样：

用div,p{}

示例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div,p {
                background-color:green;
                color:orange;
            }
        </style>
    </head>
    <body>
        <div>1111</div>
        <p>22222</p>
    </body>
    </html>

3.3 伪元素选择器

css里面直接使用定义好的样式
如，一个超链接，有四种状态
状态：原始鼠标悬停点击点击后
伪选择器 :link :hover :active :visited

示例：(了解)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 原始状态 */
        a:link{
            background-color:white;color:red;
        }
        /* 悬停 */
        a:hover{
            background-color:blue;
        }
        /* 点击 */
        a:active{
            background-color:red;
        }
        /* 点击后 */
        a:visited{
            background-color:black;
        }


    </style>
</head>
<body>
    <a href="www.baidu.com.cn" target="_blank">百度一下哈</a>
</body>
</html>

4、css的盒子模型

页面的布局通常使用div+css来布局
div相当于一块一块的数据，就是一个盒子，而用css可以调整这个盒子的位置、边框、盒子里面内容的位置
在head标签里调整：

4.1 边框border：指div这个盒子的边框

border的属性有：
粗细:多少px
样式：是哪种样式的线
颜色
如：border： 3px solid red

可以统一设置四条边框，也可以分别设置：
border-top
border-bottom
border-left
border-right

示例：

   <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <style type="text/css">
                /*  统一设置边框*/
                    div{
                        width: 200px;
                        height: 100px;
                        border: 2px solid red;
                    }
                /*  设置div2右边边框的样式*/
                #div2{
                    border-right: 2px solid green;
                }
                </style>
            </head>
            <body>
                <div id="div1">我是盒子1</div>
                <div id="div2">我是盒子2</div>
                <div id="div3">我是盒子3</div>
            </body>
            </html>

4.2 内边距：指div里面的内容距离div边框的距离:padding

padding的属性值：
距离
同样可以统一设置内边距，也可以分别设置
padding-top
padding-left
padding-right
padding-bottom
不做示例。

4.3 外边距：指div这个盒子距离页面的距离:margin

margin的属性值：
距离
同样可以统一设置内边距，也可以分别设置
margin-top
margin-left
margin-right
margin-bottom
不做示例。

5、css的布局之漂浮（了解）

float:
属性：
left :　文本流向对象的右边
right :　文本流向对象的左边

示例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 100px;
                border: 2px solid red;
            }
            /*  设置div1漂浮为right*/
            #div1{
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="div1">div01</div>
        <div id="div2">div02</div>
        <div id="div3">div03</div>
    </body>
    </html>

6、css布局之定位

position：
属性值：
1、absolute
-将对象从文档流中拖出去
-可以是top、bottom等属性进行定位
2、relative：
-不会将对象从文档流中拖出去
--可以是top、bottom等属性进行定位
区别就是会不会将对象从文档流中拖出去

示例：

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            /* 设置宽高以及边框 */
            div{
                width: 200px;
                height: 100px;
                border: 2px solid blue;
            }
            /* 将第一个div拖出去 */
            #div01{
                background-color: orange;
                position: absolute;
                /* 并将设置它的位置 */
                top:100px;
                left:280px;


            }
            /* 可以发现将第一个拖出去后，第二个div随之在文本流中上移占据之前div1的位置 */
            /* 将第二个对象不拖出，同时也设置其位置 */
            #div02{
                background-color: red;
                position: relative;
                top:10px;
                left: 20px;
            }
            /* 不拖出后的效果是div3不会占据之前的div2的位置 */
            #div03{
                background-color: green;
            }
        </style>
    </head>
    <body>
            <div id="div01">div01</div>
            <div id="div02">div02</div>
            <div id="div03">div03</div>
    </body>
    </html>

7、案例：图文混排

将文字和图片一起显示在页面上

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 设置整个div的样式 */
        #imgtxt1{
            width: 450px;
            height:300px;
            border: 2px dashed orange;
            margin: 200px;
        }
        /* 设置图片漂浮为右 */
        #img1{
            float: right;
        }
        #txt1{
            color: green;
        }


    </style>
</head>
<body>
    <!-- 再用一个div将整个内容包起来 -->
    <div id="imgtxt1">
        <!-- 将图片和文字的内容分别用div包起来 -->
        <div id="img1"><img src="a.jpg" alt="长春夜景" width="250" height="150"></div>
        <div id="txt1"><font size="4" color="red">夜晚的长春南湖大桥，五颜六色流光溢彩，美妙的音乐喷泉让人流连忘返。</font>夜晚的长春南湖大桥，五颜六色流光溢彩，美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥，五颜六色流光溢彩，美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥，五颜六色流光溢彩，美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥，五颜六色流光溢彩，美妙的音乐喷泉让人流连忘返。夜晚的长春南湖大桥，五颜六色流光溢彩，美妙的音乐喷泉让人流连忘返。</div>
    </div>
</body>
</html>

8、图片的签名

利用文字在图片上显示
看案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            #txt2{
                position: absolute;
                color: red;
                top: 20px;
                left: 30px;
            }
        </style>
    </head>
    <body>
        <div id="img2"><img src="a.jpg" alt="夜景" width="300" height="200"></div>
        <div id="txt2"><font size="4">美妙的音乐喷泉让人流连忘返</font></div>
    </body>
    </html>

RenSLei

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS_入门学习——CSS与HTML结合的方式、CSS选择器、CSS盒子模型、CSS布局

CSS Note简介是什么：层叠样式表可以做什么：可以使页面更加美观，可以将代码和样式分离开来，以便后期的维护怎么做：1、css结合其他东西才能有用，与html的四种结合方式： 1.1利用被一个标签都有的属性：style&lt;div style="background-color:gray;color:red;"&gt;方式一&lt;/div&gt; 1...
复制链接

扫一扫