CSS笔记

什么是CSS

CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

CSS的引入方式

各类选择器

标签选择器

    <span>我是span</span>
    ------------------------
     span{
     font-size: 10px;
 }

类选择器

    <span class="big">我是spanbig</span>
    ------------------------
     .big{
     font-size: 10px;
 }

id选择器(同一个id选择器在一个页面只能用一次)

    <span id="name">我是span</span>
    ------------------------
     #name{
     font-size: 10px;
 }

通配符选择器(对页面所有标签设置样式）

    <span>我是span</span>
    <div>我是div</div>
    ------------------------
     *{
     font-size: 10px;
 }/*对span和div标签都适用*/

复合选择器

/*后代选择器：选中某元素的后代元素
选择器写法：父选择器 子选择器{CSS属性}，父子之间用空格隔开
*/
<style>
  div span{
    color:red;
  }
</style>
<span>标签</span>
<div>
  <span>这是div的儿子</span>/*只有这个span变成了红色*/
</div>

/*并集选择器：选中多组标签设置相同的样式
选择器写法：选择器1，选择器2.....{CSS属性}，选择器之间用，隔开
*/
<style>
  div,
  p,
  span{
    color:red;
  }
</style>

<span>标签</span>
<div>div标签</div>
<p>p标签</p>
/*三个标签里的文字都变成红色*/

/*交集选择器：选中同时满足多个条件的元素
写法:选择器1选择器2{CSS属性}，选择器之间连写
*/
<div class="box">div标签，使用了类选择器</div>
<p>p标签</p>
<p class="box">p标签,使用了类选择器</p>

/*如果交集选择器中有标签选择器，标签选择器必须写在最前面*/
p.box{
  color:red;
}

伪类选择器-超链接

超链接一共有四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时(激活）

如果要给超链接设置以上四个状态，需要按LVHA的顺序书写
例：

       <a href="#" class="box">我要报名</a>
       
        a:hover{                    /*设置悬停时样式*/
            color:#608dd9 ;
        }
        .box:visited{              /*设置访问后样式*/
            color:#608dd9 ;
        }

文字控制属性

例如font-size：

    <span class="big">我是spanbig</span>
    <span>我是span</span>

        .big{
            font-size: 20px;
        }
        span{
            font-size: 10px;
        }

CSS特性

继承性

子级默认继承父级的文字控制属性

优先级

<style>
  div {
    color:red;
  }
  .box{
    color:red;
  }
</style>
<div class="box">div标签</div>
/*div内容为红色*/

规则：选择器优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

背景属性

内容：

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

具体：

background-repeat

属性值	效果
no-repeat	不平铺
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

background-position

属性值：水平方向位置 垂直方向位置
1.关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

2.坐标（数字+px，正负都可以）
水平：正数向右；负数向左
垂直：正数向下；负数向上
提示：

• 关键字取值方式写法，可以颠倒顺序
• 可以只写一个关键字另一个方向默认居中（水平，垂直）
• 数字只写一个值表示水平方向，垂直方向为居中

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./小米手机1.jpg);
            background-repeat: no-repeat;
            background-position: center bottom; 
            background-position: 50px -100px;
            background-position: 50px center;
        }
    </style>

background-size

• 关键字：
  cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
  contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
• 百分比：根据盒子尺寸计算图片大小
• 数字+px（单位）

background-attachment

属性值：fixed

    <style>
        div{
            background-image: url(./小米手机1.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>

盒子模型

盒子模型重要组成部分：

• 内容区域 - width & height
• 内边距 - padding（出现在内容与盒子边缘之间）
• 边框线 - border
• 外边距 - margin（出现在盒子外面）

边框线

属性值：边框线粗细 线条样式 颜色 （不区分顺序）
常用线条样式

属性值	线条样式
solid	实线
dashied	虚线
dotted	点线

设置单方向边框线
属性名：border-方位名词

    <style>
        div{
            border-top: 1px solid red;
            border-right: 3px dashed green;
            border-bottom: 2px dotted blue;
            border-left: 5px solid orange;
        }
    </style>

内边距

属性名：padding / padding - 方向名词

    <style>
        div{
        /*四个方向 内边距相同*/
        padding:30px;
        /*单独设置一个方向内边距*/
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 30px;
        }
    </style>

padding 多值写法

取值个数	示例	含义
一个值	padding : 10px	四个方向内边距均为10px
四个值	padding ：10px 20px 40px 80px	上：10px；右：20px；下：40px；左：80px
三个值	padding：10px 40px 80px	上：10px；左右：40px；下：80px
两个值	padding：10px 80px	上下：10px；左右：80px

问题：给盒子加border/padding会撑大盒子
解决：

• 內减模式：box-sizing：border-box

清除默认样式

    <style>
        div{
            *{
               margin : 0;
               padding : 0;
            }
        }
    </style>

元素溢出（滚动条）

作用：控制溢出元素的内容的显示方式。
属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

    <style>
        div{
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
        }
    </style>

外边距问题 - 塌陷问题

父子级的标签，子级的添加上外边距（margin）会产生塌陷问题 ------ 导致父级一起向下移动
解决办法：

• 取消子级margin，父级设置padding
• 父级设置 overflow：hidden
• 父级设置border-top

行内元素 - 内外边距问题

问题：行内元素（如span标签）添加margin和padding，无法改变元素垂直位置
解决方法：给行内元素添加line-height可以改变垂直位置

    <style>
        span{
            margin:50px;
            padding: 20px;

            /*行高可以改变垂直位置*/
            line-height: 100px;
        }
    </style>

盒子模型-圆角

• 作用：设置元素的外边框为圆角
• 属性名：border-radius
• 属性值：数字+px / 百分比

提示：属性值是圆角半径

盒子模型-阴影

作用：给元素设置阴影效果
属性名：box-shadow
属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意

• x轴偏移量 和 y轴偏移量 必须书写
• 默认是外阴影，内阴影需要添加inset

    <style>
        div{
            width: 400px;
            height: 400px;

            box-shadow: 2px 5px 10px 1px black;/*默认为外阴影*/
            box-shadow: 2px 5px 10px 1px black inset;/*内阴影*/
        }
    </style>

：nth-chilld（公式）（补充）

作用：根据元素的结构关系查找多个元素。

功能	公式
偶数标签	2n
奇数标签	2n+1；2n-1
找到5的倍数的标签	5n
找到第5个以后的标签	n+5
找到5个以前的标签	-n+5

    <style>
        /*第4个li和第8个li去掉右侧的margin*/
        li:nth-child(4n){
            margin-right: 0;
        }
    </style>

浮动

作用：让块元素水平排列。
属性名：float
属性值

• left：左对齐
• right：右对齐

清除浮动

(父级没有设置高，子级却设置了高）

• 父元素添加CSS属性overflow：hidden
• 在父元素内容最后添加一个块级元素，设置CSS属性clear：both

flex布局

描述	属性
创建flex容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩化	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

具体：

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

• align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
• align-self 单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有盒子都在一行显示
属性名：flex-wrap
属性值

• wrap：换行
• nowrap：不换行

行对齐方式

属性名：align-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

补充：透明度

属性名：opacity

    <style>
        .one{
            opacity: 0.2;
        }
        .two{
            opacity: 0.5;
        }
    </style>
<body>
    <img class="one" src="./小米手机1.jpg">
    <img class="two" src="./小米手机4.jpg">
</body>