CSS学习笔记

skyoung13

已于 2022-03-18 16:47:04 修改

阅读量145

点赞数

文章标签： css 学习 css3

于 2022-03-18 16:44:52 首次发布

本文链接：https://blog.csdn.net/qq_43102225/article/details/123579072

版权

CSS学习笔记

一、CSS基础

1.1 CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

1.2 CSS是如何工作的？

1.3 基础选择器

1.3.1 通配选择器

<style>
*{
color: red;
font-size:20px;
}
</style>

1.3.2 标签选择器

<style>
    /*标签选择器会选择页面上的所有这个标签*/
    /*缺点：所有都会变*/
    h1{
        color: aquamarine;
       background: red;
        border-radius:25px;
    }

</style>

1.3.3 ID选择器

<style>
    /*id选择器*/
   /*#id名称        */
   /* ID保证全局唯一*/
   /* 不遵循就近原则 id选择器>类选择器>标签选择器*/
   #skyoung{
       color: aqua;
   }
</style>

1.3.4 类选择器

<style>
    /*类选择器的格式 .class*/
    .sky{
        color: red;
    }
    .young{
        color: aqua;
    }
</style>

1.4 高级选择器

1.4.1 层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background: green;
        }
        /*后代选择器*/
        body p{
            background:red;
        }
        /*子选择器*/
        body>p{
            background: green;
        }
        /*相邻兄弟选择器*/
        .active + p{
            background: fuchsia;
        }
        /*通用选择器*/
        .active~p{
            background: yellow;
        }


    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>
<!--1.后代选择器：在某个元素的后面-->
<!--会改变body后面所有的-->
<!--2.子选择器-->
<!--只会改变body后的第一层-->
<!--3.相邻兄弟选择器-->
<!--相邻 且对下不对上-->
<!--4.通用选择器-->
<!--不用相邻，对下不对上-->

1.4.2 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
        /*存在id元素属性的元素*/
        a[id=first]{
            background: red;
        }
        /*class中有links的元素*/
        /*=是绝对包含 *=是部分*/
        a[class*=links]{
            background: yellow;
        }
        a[href^=www]{
            background: green;
        }
        /*正则表达式： *包含  ^开头 $是结尾*/

    </style>
</head>
<body>
<p class="demo">
    <a href="www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png " class="links item">4</a>
    <a href="images/123.jps" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="a.pdf" class="links item">9</a>
</p>
</body>
</html>

1.4.3 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--避免使用 class id 选择器-->
    <style>
        /*ul的一个元素*/
        /*ul的最后一个元素*/
        ul li:first-child{
            background: red;
        }
        ul li:last-child
        {
            background: aqua;
        }
     /*选中p1  定位到父元素，选择当前第一个元素*/
     /*   按顺序*/
        p:nth-child(1){
            background: green;
        }
        /*按类型*/
        p:nth-of-type(2){
            background: yellow;
        }
        a:hover{
            background: black;
        }
    </style>
</head>
<body>
<a href="">1221</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1
    </li>
    <li>
        li2
    </li>
    <li>
        li3
    </li>
</ul>
</body>
</html>

1.5 设置字体

Serif 衬线体
Cursive 手写体
Monospace 等宽字体

属性设置 font-family

Web Fonts
font-size
font-style
font-weight
line-height

1.6 设置文字格式

text-align left/right/center/justify
spacing
text-indent
text-decoration
white-space noraml/nowrap/pre/pre-wrap/pre-line
text-shadow

1.7 盒模型基础

width 宽度：长度百分度 auto
height 高度：长度百分度 auto
padding 指定元素四个方向的内边距
border 容器边框样式 border-width border-style border-color
margin 指定元素四个方向的外边距
overflow visible/hidden/scroll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
   /*margin 是外边距*/
   /*padding内边距*/
   /*border 边框*/
   /*粗细 样式 颜色     */
    hl,ul,li,a,body{
        margin:0; /*外边距,总有默认的外边距*/
        padding: 0;
        text-decoration: none;
    }
     #box{
         width: 300px;
         border: 1px solid white;
         padding: 0 0 0 0 ;
     }
     form{
         /*background-color: #0093E9;*/
         background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

     }
     h2{

         background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
         font-size: 16px;
         line-height: 30px;
     ;
         margin: 0;
     }
     div:nth-of-type(1) input{
         border:3px solid black;
     }
     div:nth-of-type(2) input{
         border:3px solid black;
     }


    </style>
    
    
    
    
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码&nbsp;&nbsp;&nbsp;:</span>
            <input type="text">
        </div>
    </form>
</div>




</body>
</html>

1.7.1 块级盒子

不和其他盒子并列摆放
使用所有的盒模型属性
body article div main section h1-6 p ul li

1.7.2 行级盒子

和其他行级盒子一起放在一行或拆开多盒
width height不适用
span em strong cite code

1.8 盒子的效果

1.8.1 border-radius

<style>
    /*左上 右上 右下 左下 顺时针方向*/
 /*圆圈  圆角=宽度*/

    div{
        width: 100px;
        height: 50px;
        background: red;
        border-radius:100px 0px 0px 0px;
        text-align: center;

    }
    img{

        box-shadow: 10px 10px 100px red;
        border-radius:250px;

    }
</style>

1.8.2 background

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("../定位/images/1.jpg");}
    /*默认是全部平铺的*/
    .div1{
        background-repeat: repeat-x;

    }
    /*水平平铺*/

    .div2{
        background-repeat: repeat-y;

    }
    /*垂直平铺*/
    .div3{
        background-repeat: no-repeat;

    }
    /*不平铺，原图像*/
    /*CSS sprites 可以把图像存储到一张图上*/
</style>

1.8.3 box-shadow

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        box-shadow: 10px 10px 100px green;
    }
</style>

1.9 行高和垂直对齐

1.10 选择器的特异度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7eMTIR8J-1647593070059)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220318105116853.png)]

根据三种类型来计算特异度判断特异度

高优先级的选择器会覆盖低优先级选择器

继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值

inherit:显式继承一些不会继承父元素的值

1.11 CSS中的值和单位

颜色常用RGB表示

二、CSS布局

常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 行级排版上下文
- - 只包含行级盒子的容器会创建一个IFC
  - 盒子在一行内水平摆放
  - 一行内放不下时，换行显示
  - text-align 决定一行内盒子的水平对齐
  - vertical-align 决定一个盒子在行内的垂直对齐
  - 避开浮动元素
- 块级排版上下文
- - 某些容器会创建一个BFC
  - 根元素
  - 浮动、绝对定位、inline-block
  - Flex子项和Grid子项
  - overflow值不是visible的块盒

2.1 Flexible Box

2.1.1 display: flex

flex-direction :row row-reverse column column-reverse
flex-wrap: row nowrap
flex-grow 伸展占满剩余宽度的比例
flex-shrink 收缩空间不足时收缩的比列
flex-basis 正常显示的值

justify-content:

flex-start
flex-end
center
space-between
space-around
space-evenly

align-items

flex-start
flex-end
center
stretch
baseline

align-self

align-content

order

2.2 Grid布局

grid-template-columns [left] xx [center] xx [right]
grid-template-rows [top] xx [middle] xx [bottom]
grid-area :x/x/x/x 上下左右
grid-row-gap
grid-column-gap

justify-items/align-items 水平/垂直

stretch
statrt
end
center

2.3 表格样式

2.3.1 宽度设置

table th{
 width: 100px;
}
table th,
table td{
 width: 100px;
}

table{
 width: 200px;
 table-layout: fixed;
}

table th{
 width: 100px;
}

2.3.4 边框设置

border-collapse:collapse 边框合并

2.4 浮动

float: left/right/none

浮动元素脱离常规流，漂浮在容器左边或右边
浮动元素贴着容器边缘或另外的浮动元素
浮动元素不会影响常规流里面的块级盒子

clear:left/right/both 不会和浮动重叠

2.5 定位

2.5.1 相对定位 relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*相对自己原来位置进行偏移*/

        div{
            margin:10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #first
        {
            background-color: #D9AFD9;
            border: 1px solid #80D0C7;
            position: relative;/*相对位置 原来的位置会被保留*/
            top:-20px;
            left: 20px;
            /*上下左右*/
        }
        #second{
            background-color: white;
            border: 1px solid #D9AFD9;
            position: relative;
            bottom: -50px;
        }
        #third
        {
            background-color: #85FFBD;
            border: 1px solid #4158D0;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

2.5.2 绝对定位 absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*相对自己原来位置进行偏移*/

        div{
            margin:10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #first
        {
            background-color: #D9AFD9;
            border: 1px solid #80D0C7;

            /*上下左右*/
        }
        #second{
            background-color: white;
            border: 1px solid #D9AFD9;
            position: absolute;/*绝对定位，原来位置没有了*/
            right: 30px;
        }
        /*1.没有父级元素定位的前提下，相对于浏览器定位*/
        /*2.假设父级元素存在定位，通常相对于父级元素定位*/
        #third
        {
            background-color: #85FFBD;
            border: 1px solid #4158D0;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

2.6 堆叠层级

z-index 越大越靠近用户

绘制顺序（从下到上）

形成该上下文元素的border和background
z-index为负值的子堆叠上下文
常规流内的块级元素
浮动元素
常规流内的行级元素
z-index为0的子元素或子堆叠上下文
z-index为正数的子堆叠上下文

三、CSS 高级

3.1 CSS transform

translate(100px,100px)

rotate(90deg/0.5turn) transform-orgin 改变旋转点

scale(2)放大倍数

skewX/skewY (20deg)扭曲

perspective(100px) 3D效果 ( 旋转之后)

3.2 CSS transition

transition-property 那个性质改变
transition-duration 过度时间
transition-timing-function 过度性质 linear ease-out step
transition-delay 过度延迟

3.3 CSS Animation

实现更复杂的样式变化效果
适用方法
- 定义关键帧样式
- 应用动画到元素上

<style>
@keyframes down{
  from{
  margin-top:0;
  opacity:1;
  }
  50%{
  margin-top:0.5em;
  opacity: 0.3;
  }
  /*结束时*/
  to{
  margin-top:0;
  opacity:1;
  }
}


.scroll-down{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
font: normal noraml 100px/1 Helvetica;
color: #f66;
animation: down 1.5s ease infinite;
}

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direciton normal/reverse/alternate

3.4 响应式设计

同一个页面可以适应不同屏幕大小设备的设计方案

3.4.1 设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.4.2 图像尺寸设置

max-width:100%;

3.4.3 背景图片

background-size:contain/cover;

/*媒体查询*/
@media screen and (min-width: 480px){
.box{
font-size:16px;
}
}

3.5处理CSS兼容性

考虑使用的用户人群，使大多数使用得到满足

层叠

重写，某些不支持的就不会使用

条件注释

只会在某些特定的版本使用

浏览器怪癖

浏览器会忽略不习惯的写法

浏览器前缀
- Chrom/Safari:-webkit-
- Mircosoft:-ms-
- Mozilla:-moz-

四、持续学习

在具体使用的过程中不断体会和熟悉，持续学习！

skyoung13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

CSS学习笔记
复制链接

扫一扫