css笔记

最新推荐文章于 2024-09-29 11:01:57 发布

FenQing1213

最新推荐文章于 2024-09-29 11:01:57 发布

阅读量271

点赞数

分类专栏： javaweb 文章标签： css 网页网站 javaweb

本文链接：https://blog.csdn.net/fenqing1213/article/details/79189356

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css

1、css的简介
        * css:  层叠样式表
            ** 层叠：一层一层的
            ** 样式表：很多的属性和属性值
        * 是页面显示效果更加好
        * css将网页内容和显示样式进行分离，提高了显示功能

2、css与html的结合方式（4种结合方式）
        1）在每个html标签上都有一个属性  style
            <div style="background-color:red;color:green;"> </div>
        2） 使用html的一个标签实现 <style> </style>
                <head>
                    <style type="text/css">
                        div{
                        background-color:red;
                        color:blue;
                        }
                    </style>
                <head>
            在body中,
                <div>文字文字文字</div>
        3）
            1.新建一个.css文件,命名为 div.css
                div{
                background-color:red;
                }
            2.在html文件的头文件中
                <head>
                    <style type="text/css">
                        @import url(div.css)
                    </style>
                </head>
            3.在body中,
                <div>文字文字文字</div>
        4）使用头标签 link,引入外部的css文件
            1.创建.css文件
                <head>
                    <link rel="stylesheet" type="text/css" href="css文件的路径"/>
                </head>
            2.在body中,
                <div>文字文字文字</div>

        *** 第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

        *** 优先级：（一般情况）
                从上到下，从外到内，优先级由低到高

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

3.css的基本选择器（3种）
        1）标签选择器
            *使用标签名作为选择器的名称
                div{
                    background-color:red;
                    }
        2）class选择器
            *每个html标签都有一个属性 class
                div.haha{       //有多个标签用一个选择器的时候，可以写成.haha
                background-color:yellow;
                }
                <div class="haha">文字</div>
        3）id选择器
            * 每个html标签上面有一个属性 id
                div#hehe{       //同理，写成 #hehe
                background-color:red;
                }
                <div id="hehe">文字</div>

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

4、css的扩展选择器
        1）关联选择器
                * 设置div标签里面p标签的样式，嵌套标签里面的样式
                * <div><p>wwwww</p></div>
                div p{
                background-color：red；
                }
        2）组合选择器
                * 把div和p标签设置成一样的样式，设置不同标签为相同样式
                * <div>123</div>
                   <p>wwwww</p>
                * div,p{
                background-color:red;
                }
        3）伪元素选择器
                * css里面提供了一些定义好的样式，可以拿过来用
                * 比如超链接
                        ** 超链接的状态
                            原始状态 鼠标悬浮状态 点击状态 反点击之后的状态
                              :link     :hover      :active     :visited
                        a:link{
                            color:red;
                            }
                        a:hover{
                            color:blue;
                            }
                        a:active{
                            color:yellow;
                            }
                        a:visited{
                            color:gray;
                            }
5、css的盒子模型
        ** 在进行布局前需要把数据封装到一块一块的区域内(div)
        1）边框 
                border：统一设置
                上 border-top
                下 border-bottom
                左 border-left
                右 border-right

                实线 solid
                虚线 dashed

                <style type="text/css">
                    div{
                        width:200px;
                        height:100px;

                        border:2px solid blue;  //实线
                    }

                    #div2{
                        border-right:2px dashed yellow; //虚线
                    }
                </style>
                在body中，
                <div id="div1">aaaaa</div>
                <div id="div2">bbbbb</div>
        2）内边距
                padding：也可以统一设置
                上下左右同上，padding-top...
                    div{
                        padding-top:20px;
                    }
        3）外边距
                margin: 也可以统一设置
                div{
                    margin:20px;
                }
                #div3{
                    margin-top:20ox;
                }

6、css的布局悬浮
        属性值  left 和 right
        #div4{
            float：left;
        }
7、css的布局的定位
        position：
            属性值  - absolute
                            *** 将对象从文本流中拖出
                            *** 可以使用top、bottom等属性进行定位
                    - relative
                            *** 对象不可层叠，也就是说不会将对象拖出
                            *** 可以使用top、bottom等属性进行定位
8、练习1：图文混排
9、练习2：图像签名
            *** 在图片上边显示文字

练习1：

<html>
 <head>
  <title>Document</title>
  <style>
    div{
        border-color:red;
    }
    #imgandtext{
        width:350px;
        height:400px;

        border:2px dashed red;
    }
    #img1{
        float:left;
        margin:5px;
    }
    #text1{
        color:green;

    }
  </style>
 </head>
 <body>
  <div id="imgandtext">
      <div id="img1"><img src="a.jpg" width="200" height="100"/></div>
      <div id="text1"><b>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</b></div>
  </div>
 </body>
</html>

练习2：

<html>
 <head>
  <title>Document</title>
  <style>
    #text2{
        position:absolute;

        top:100px;
        left:30px;
        color:blue;
    }
  </style>
 </head>
 <body>
  <div id="img2"><img src="a.jpg" width="400" height="250"></div>
  <div id="text2"><b>这是一枝花</b></div>
 </body>
</html>