zoukankan      html  css  js  c++  java
  • CSS

    1.CSS层叠样式表,简单的说就是来美化页面的 、修饰网页的一门技术

      通过CSS可以实现将设置样式的CSS代码和展示数据的HTML代码进行分离。增强网页的展示能力。

    2.css总共有三种标签,非别是div、span、p

    这三个元素的区别:

    div和p是块级元素,独占一行,而span是行内元素,<!DOCTYPE html>

    3. css样式:

      A通过标签上的 style 属性给div设置样式

      B通过style标签给span设置样式

      C通过Link标签引入外部的css文件

    4:使用style属性定义样式

    <html>
        <head>
            <meta charset="UTF-8">
            <title>css</title>
        </head>
        <body>
            
            <!--  geox给下面的div/span/p加上css样式 -->

        <!--sytle属性:
          border:边框 宽度
            solid:设置边框颜色
              font-size:字体大小
            font-family:字体属性
            font-style:是否为斜体
            font-weight:是否加粗
            background:底色
        -->

            <div id="" style="border: 2px solid red;font-size: 25px;
                font-family: '微软雅黑';font-style: italic;
                font-weight: bolder;">
                div111
            </div>
            <div id="" style="border: 2px solid red;font-size: 25px;
                font-family: '微软雅黑';font-style: italic;
                font-weight: bolder;">
                div111
            </div>
            
            <span style="border: 3px solid blue;
                font-size: 25px;font-style: italic;">
                span222
            </span>
            <span style="border: 3px solid blue;
                font-size: 25px;font-style: italic;">
                span222
            </span>
           
            <p style="background: blueviolet;font-size: 30px;
                font-style: italic;font-weight: bolder;">p333333</a></p>
            <p style="background: blueviolet;font-size: 30px;
                font-style: italic;font-weight: bolder;">p333333</a></p>
            
        </body>
    </html>

     使用link标签引入外部css样式和style标签定义样式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                span{
                    border: 3px solid red;
                    font-size: 50px;
                    font-weight: bolder;
                    background: green;
                }
                div{
                    border: 1px solid red; font-size: 40px;
                background: pink;
                }
                
            </style>
            <!--href:引入文件路径
                rel:引入文件的样式
            -->
            <link rel="stylesheet" href="002.css" />
        </head>
        <body>
            <div>
                这是一个DIV
            </div>
            <span>
                这是另一个sapn
            </span>
            <span>
                这是另一个sapn
            </span>
            <p>pppppp</p>
            <p>pppppp</p>
            <p>pppppp</p>
            
        </body>
    </html>

    css:

    p{
        border: 10px solid blue;
        font-size: 30px;
        font-weight: bolder;
        font-style: italic;
        background: burlywood;
    }

    5标签选择器

    5.1标签名选择器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>基本选择器</title>
            <style type="text/css">
                /*标签名选择器*/
                span{
                    border: 3px solid red;
                    font-size: 40px;
                    font-weight: bolder;
                }
            </style>
        </head>
        <body>
            <span>111</span>
            <span>222</span>
            <span>3333</span>
        </body>
    </html>

    5.2类或id选择器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>基本选择器</title>
            
            <style type="text/css">
                .p1{
                    border: 3px solid red;
                    font-size: 40px;
                    font-weight: bolder;
                }
                #aa{
                    border: 3px solid #FF0000;
                    font-size: 40px;
                    font-weight: bolder;
                    background: yellow;
                }
            </style>
        </head>
        <body>
            <span class="p1">111</span>
            <span id="aa">222</span>
            <span>3333</span>
        </body>
    </html>

     若是标签名、类、id同时被选中,起效果先后顺序为:id>类>标签名

    6.后代选择器

    div span{}    div内部的所有span元素
    
    div>span{}    div内部所有span子元素
    
    div,span,p{}    分组选择器
    
    *[class]{}   选中所有具有class属性的元素
    
    input[type='text']{}    选中input标签内属性type='text'的标签

    #p1+p{}  相邻兄弟选择器,选择id为p1后面的兄弟元素

    div a:hover{}  当鼠标移入时

    7.盒子模型

    margin:外边距

    div{
    
      margin-top:1px  上编辑
    
      margin-left:1px  左边距
    
      margin-bottom:1px  下边距
    
      margin:1px 1px 1px  1px  上 右 下 左

      
    margin:1px 1px 1px  上 左右 下
      margin:1px 1px 1px  上下 左右
     
    }

    垂直方向的外边距(上下)相遇是,会有一个外边距合并的现象,合并的结果,是取较大者!!!

    border:边框  

    padding:内边距(同上)

  • 相关阅读:
    Docker Mysql 只从复制
    Mysql 常用sql记录
    ssh 内网穿透
    MyBatis相关记录
    mybatis(plus) 继承子模块的 Mapper文件
    Navicat 连接 Mysql 错误 2059
    angular service 进行组件通信
    angular 中的 ? 和 !
    angular @Input() 和 @Output()
    Centos7 安装 Docker CE
  • 原文地址:https://www.cnblogs.com/gxlaqj/p/11368635.html
Copyright © 2011-2022 走看看