css笔记

最新推荐文章于 2024-06-22 19:05:40 发布

魏郴

最新推荐文章于 2024-06-22 19:05:40 发布

阅读量52

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_47628141/article/details/116208173

版权

学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1.选择器

/*标签选择器*/
        p{
          font-weight: bold;
        }
/*类选择器*/
        .p2{
          color: red;
        }
/*id选择器*/
        #p3{
          color: blue;
        }
/*后代选择器*/
        ul li{
          color: #ce8483;
        }
/*子代选择器·*/
        #u1>li{
          color: red;
        }

/*交集选择器，两者都满足才会影响*/
        #h1.h1{
            color: green;
        }
/*并集选择器，满足任意一个的都会影响*/
        h1,.h1{
            font-size: 100px;
        }
        .div1+h2{
            color: red;
        }
        .div2~h2{
            color: red;
        }
/*伪类选择器*/
      a:hover{/*悬停*/

       }
       a:link{/*未访问的链接*/

       }
       a:visited{/*已访问的链接*/

       }
       a:active{/*点击*/

       }
/*结构伪类选择器(p标签无效)*/
        /*首先要注意，不能直接.div:xxx,这样找不到，得先加个子类选择才能找*/
        .div3>h2:first-child{
            color: #1c50ec;
        }
        /*注意下面没有效果，由于a标签的存在，会排到顺序，但是a不是h2，所以会找到a但不起效果*/
        .div3>h2:nth-child(3){
            color: red;
        }
        /*下面这个就弥补了上面的缺点，他只会找同标签的顺序，所以可以跳过a排序，直接找到第三标签*/
        .div3>h2:nth-of-type(3){
            color: red;
        }

2.块元素与行内元素

块元素可以设置宽高，但会换行，
与其用float，更方便的方法是设置display的inline-block，就不会换行
行内元素不可设置宽高，
设置display的inline-block后，就可以换行了

<head>
		<meta charset="UTF-8">
		<title>Title</title>
      <style>
        div{
          height: 200px;
          width: 200px;
          background-color: #2aabd2;
        }p{
          height: 200px;
          width: 200px;
          background-color: red;
        }h1{
          height: 200px;
          width: 200px;
          background-color: green;
        }ul{
          height: 200px;
          width: 200px;
          background-color: gold;
        }
         ul>li{
           height: 50px;
           width: 50px;
           margin-bottom: 10px;
           background-color: yellowgreen;
         }
      </style>
	</head>
	<body>
<!--      块元素-->
      <div>div</div>
      <p>p</p>
      <h1>h1</h1>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <ol>
        <li></li>
        <li></li>
      </ol>
<!--      行内元素-->
      <a>a</a>
      <span>span</span>

	</body>

3.float的bug

第一个和第二个

  .a,.b{
          width: 200px;
          height: 200px;
          background: red;
        }
        .a{
          margin-bottom: 10px;
        }
          /*bug2*/
        .b{
          margin-top: 20px;
          /**上面是底部10，下面是顶部20，按理说应该加起来，但他以最大值为准，不会相加*/
        background: green;
        }
        /*bug1*/
        .b-1{
          margin-top: 10px;
          /*直接给块标签里的快标签 加margin，移动的竟然是他父级块标签*/
          color: white;
          width: 50px;
          background: blue;
        }

第三个是，如果不设置父块高度，子块浮动就会导致父快高度为0，也就是没了
然后就得清楚浮动了

4.清除浮动

用到了在单独查

5.背景图片的透明

body{
          height: 5000px;
          /*原生写法*/
          background-image: url("../day05/homework/img/20.jpg");
          background-repeat: no-repeat; /* repeat(默认) repeatx repeaty no-repeat  round space*/
          background-position: top right;/*百分比也可以*/
          background-attachment: fixed;/*这是固定的，也就是固定在某个位置，滚动不会改变。不随屏幕滚动的是scroll */
          /*!*简写*!*/
          background: url("../day05/homework/img/2.jpg") no-repeat fixed top right;
        }
        div{
	        height: 500px;
	        width: 500px;
	        background: #d58512;
	        /*设置透明的两种方式*/
	        background: rgba(255,0,0,0.5);/*第四个参数是透明度*/
	        opacity: 20%;/*透明度*!*/
        }

魏郴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css笔记

1.选择器/*标签选择器*/ p{ font-weight: bold; }/*类选择器*/ .p2{ color: red; }/*id选择器*/ #p3{ color: blue; }/*后代选择器*/ ul li{ color: #ce8483; }/*子代选择器·*/
复制链接

扫一扫