CSS基础入门：从选择器到布局与动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46170910/article/details/120248761

title: css基础一
date: 2021-07-27 16:59:43
tags: html
description: html系统学习

1.选择器

id选择器 #name
类选择器 .name
指定特定的HTML元素使用 p.name
分组选择器
```
h1,h2,p
{
    color:green;
}
```

嵌套选择器

.marked p
{
    color: white;
}

p.marked 
{
    text-decoration: underline;
}

其他

* {} // 选择所有元素  
div,p {} // 选择div 和 p
div p{} // 选择div中的p

组合选择符

div p
{
    // 后代选择器
}

div>p
{
    // 子元素选择器，只能选择直接/一级子元素
}

div+p
{
    // 选择紧接在另一元素后的元素，且二者有相同父元素
}

div~p
{
    // 选择所有指定元素之后的相邻兄弟元素
}

伪类

a:link

:before

:after

2.css创建

优先级：内联样式>内部样式>外部样式>浏览器默认样式

外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="xxx.css">
</head>

内部样式表

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px}
        body {background-image:url();}
    </style>
</head>

内联样式
```
<p style="color:sienna">
   xxx
</p>
```

3.文本

颜色
- 十六进制值：#FF0000
- RGB值：RGB(255,0,0)
- 颜色名称：red
对齐方式
- text-align(水平对齐方式)
链接样式
- a:link(正常，未访问过)
- a:visited(已访问)
- a:hover(鼠标悬停)
- a:active（链接点击）

4.列表、表格

表格对齐：vertical-align: bottom / caption表格标题

5.盒子模型

margin属性：（padding属性同理）

margin: 25px 50px 75px 100px 上右下左
margin: 25px 50px 75px 上左右下
margin:25px 50px 上下左右
margin:25px

盒子阴影

box-shadow: 10px 20px 30px rgba(0,0,0,.4) x偏移 y偏移模糊量颜色

6.边框

border-style边框样式

border-width边框宽度
border-color边框颜色
指定不同侧面不同的边框 border-top-style border-right-style border-bottom-style border-left-style

7.显示与可见性

display:none （元素占用的空间也会消失）
visibility:hidden (虽然被隐藏，但是仍然会影响布局)
display:inline(显示为内联元素)
display:block(显示为块元素)
display:inline-block(显示为内联块元素) 将li元素加上改属性，原本垂直的列表就可以水平显示了

8.定位

fixed相对于浏览器窗口是固定位置
relative相对于正常位置（一般作为容器）
absolute相对于已定位父元素（用绝对定位，一个元素可以放在页面上的任何位置）
sticky定位 (在relative和fixed定位之间切换)
重叠元素通过z-index指定堆叠顺序

9.浮动

float: left float:right

浮动一定要放在盒子里，否则会对其他元素产生影响

清除浮动方法：

让内部有浮动的盒子形成BFC overflow:hidden
给后面的父盒子设置 clear:both

10.对齐

居中对齐 margin:auto(需要设置width，否则不起作用)
文本居中对齐 text-align:center
图片居中对齐 margin:auto(需要设置width 并且要放在块元素中 display:block)
左右对齐 float / position
垂直居中对齐 padding: 70px 0 / line-height: 200px text-align: center

11.css精灵

好处：减少http请求数，加快网页显示速度

12.动画

旋转变形： transform: rotate(45deg) 顺时针旋转45度 transform-origin:0 0 沿着左上角进行旋转
缩放变形: transform:scale(3) 数值小于1缩放，大于1放大
斜切变形: transform:skew(1deg,1deg)
位移变形: transform: translate(100px,200px) 向右移动，向下移动类似于相对定位
3D旋转： transform: rotateX(30deg) 绕横轴旋转 transform: rotateY(30deg)
空间移动: translateX() translateY() translateZ() 空间移动要添加在3D旋转之后
CSS3过渡

transition: width 1s linear 0s; 什么属性要过渡(width height left top border-radius、背景颜色、变形) 动画时长变化速度曲线延迟时间

缓动参数（变化速度曲线）：

CSS3动画

用@keyframes来定义动画在项目上线前补上@-webkit-

/* 定义动画 */
@keyframes r {
    /* 起始状态 */
    from {
        transform: rotate(0);
    }
    /* 结束状态 */
    to {
		transform: rotate(360deg);
    }
}

/* 调用动画 */
/*
* 调用次数
* 循环执行
* 偶数次逆向执行
* 停止在结束状态
*/
animation: r 1s linear 0s 3;
animation: r 1s linear infinite;
animation: r 1s linear infinite alternate;
animation: r 1s linear 0s forwards;

/* 多关键帧动画 */
@keyframes changeColor {
    0% {
        background-color: red;
    }
    25% {
        
    }
    50% {
        
    }
    75% {
        
    }
    100% {
        
    }
}