css的简单学习笔记

时间:2023-02-24 11:41:46

1、CSS的简介
    *css :层叠样式表
        **层叠: 一层一层。
        **样式表:
              具有大量的属性和属性值
    *使得页面的显示效果更加好。
    *css将网页内容和显示样式进行分离,提高了显示功能。
    *css不能单独存在,依赖于html

2、css和html 的结合(一共有四种方式)

  (1)在每个html标签中都有一个属性 style ,把css和html结合在一起。
      --<div style="background-color:red;color:green;">
      --设置了本句语句的 背景色 和 字体色。

  (2)在html的一个标签:<style> 中(要写在head里面)
      *<style type="text/css">
        css代码;
       </style>
    如:
      <style type=""text/css>
      div{
        background-color:blue;
        color:red;
      }
      </style>

  (3)在html标签里面,使用一个语句实现(某些浏览器下不起作用)
      *@import url(css文件的路径);

      --第一步,创建一个css文件。
      <style type="text/css">
        @import url(css文件名);

      </style>

  (4)使用头标签 link ,引入外部css文件
    --第一步,创建一个css文件。

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

      注意:第三中方式在某些浏览器下不起作用,一般采用第四种方法。

  优先级
      一般来说,从上到下,从外到内,优先级由低到高。
    即: 后加载的优先级高。


3、css的选择器(三种)

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

    (1)标签选择器:
      *使用标签名称作为选择器名称
      div {
        background-color:gray;
      }

    (2) class选择器:
      *每个标签都有一个属性 :class
      -<div class="haha">aaaaa</div>
      -   .haha {
          background-color:gray;
        }

    (3)id 选择器
      *每个标签都有一个属性 : id
      - <div id="hehe"> bbbbbb</div>
      -   #hehe {
            background-color:gray;
         }

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


4、css的扩展选择器

    (1)关联选择器
        *<div> <p> wwwww</p></div>
        *设置div标签里的p标签的样式,(嵌套标签里面的样式)
        * div  p {
            background-color : green;
          }

    (2)组合选择器
        * <div> sssss</div>
           <p>dsdsd</p>
        *将div和p标签设置成相同样式,把不同的标签设置成相同的样式。
        * div,p {
            background-color : orange;
          }

    (3)伪元素选择器
        *css里面提供了一些定义好的样式。
        *比如超链接:
          **超链接的状态:
            原始状态 悬停状态 点击状态 之后状态
              :link     :hover   :active    :visited



5、css的盒子模型

  **在进行布局前需要把数据封装到一块一块的区域内(div)
  (1)边框
        (width, height)


         border:统一设置
         border:2px solid blue(粗细,样式,颜色)
        上: border-top
      下: border-bottom
      左: border-left
      右: border-right

  (2)内边距
         padding: 20px
         使用padding进行听统一设置
         也可以分别设置,
          上下左右四个内边距

  (3)外边距
        margin: 20px
        可以使用margin进行统一设置
        也可以分别设置
          上下左右四个外边距



6、css的布局漂浮属性(了解,一般不用)

    float:
      **属性值
            left : 文本流向对象的右边(自己居左,下面一个补到其右边)
            right: 文本流向对象的左边(自己居右,下面一个补到其左边)


7、css的布局的定位

    position:
        **属性值
             --abslute :
                ***将对象从文档流中拖出
                ***可以使用 top、bottom、left、right属性进行定位。
                   (定位到绝对位置,其后面的流对象向前补位)

            --relative :
                ***不会将对象从文档刘流中拖出。
                ***也可以使用top、bottom、left、right属性进行定位。
                  (定位到原来的相对位置,其他流对象还是在原来位置)

 

 

8、css的一些常用属性

    1、文字属性
      font-size:大小
      font-family:字体类型
    2、文本属性
      color:颜色
      text-decoration:下划线
        属性值:noneunderline
      text-align:对齐方式
        属性值:left center right
          <div>hello css!!!</div>
          <a href="#">click me!!!</a>
          <style type="text/css">
        div{color:red;text-decoration: underline;text-align: right }
          a{text-decoration: none;}
           </style>
    3、背景属性
      background-color:背景颜色
      background-image:背景图片
        属性值:url("图片地址");
      background-repeat:平铺方式
        属性值:默认横向纵向平铺
          repeat:横向纵向平铺
          no-repeat:不平铺
          repeat-y:纵向
          repeat-x:横向

        body{
            background-color: black;
            background-image: url("images/dog.gif");
            background-repeat: repeat-y;
        }

    4、列表属性
      list-style-type:列表项前的小标志
        属性值:太多了
      list-style-image:列表项前的小图片
        属性值:url("图片地址");

        <ul>
          <li>黑马程序员</li>
          <li>黑马程序员</li>
          <li>黑马程序员</li>
          <li>黑马程序员</li>
        </ul>
        <style type="text/css">
            /* ul{list-style-type: decimal-leading-zero;} */
            ul{list-style-image: url("images/forward.gif");}
          </style>

    5、尺寸属性
      width:宽度
      height:高度
          <div id="d1">div1</div>
          <div id="d2">div2</div>
          <style type="text/css">
              #d1{background-color: red;width: 200px;height: 200px;}
              #d2{background-color: pink;width: 200px;height: 200px;}
          </style>
    6、显示属性
      display:
        属性值:none:隐藏
      block:块级显示
        inline:行级显示

          <form action="">
            name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
            <br>
            pass:<input id="pass" type="password" />
            <br>
            <input id="btn" type="button" value="button" />
          </form>
          <style type="text/css">
              span{color:red;display: none}
          </style>
          <script type="text/javascript">
              document.getElementById("btn").onclick = function(){
                  document.getElementById("span").style.display = "inline";
              };
          </script>

    7、浮动属性
      float:
        属性值:left right
      clear:清除浮动 left right both
        缺点:(1)影响相邻元素不能正常显示
            (2)影响父元素不能正常显示

    8、css盒子模型
      border:
        border-width:边框的宽度
        border-style:边框的线型
        border-color:边框的颜色

        border-top:上边框
        border-bottom:下边框
        border-left:左边框
        border-right:右边框

      padding:
        代表边框内壁与内部元素之间的距离
        padding:10px; 代表上下左右都是10px
        padding:1px 2px 3px 4px; 上右下左
        padding:1px 2px; 上下/左右
        padding:1px 2px 3px; 上,左右,下
        padding-top: 单独设置
      margin:
        代表边框外壁与其他元素之间的距离
        margin:10px; 代表上下左右都是10px
        margin:1px 2px 3px 4px; 上右下左
        margin:1px 2px; 下/左右
        margin:1px 2px 3px; 上,左右,下
        margin-top: 单独设置