CSS

作者: 超人不会飞_9664 | 来源:发表于2019-01-08 16:22 被阅读0次

自己练习的css动画（单标签）
CSS背景、文本、字体、链接、列表、轮廓
CSS 教程
CSS样式
CSS高级
前端开发之 CSS入门
CSS第一天
CSS学习笔记（1）
CSS盒子模型、定位、浮动
每个前端工程师都应该懂的前端性能优化总结：

1.1 CSS 整体重点

选择器
盒子模型
浮动
定位

1.2 CSS

作用： 1.美化网页（通过css控制标签样式） 2.网页布局（通过css控制标签得位置）
书写方法：
1.内嵌式写法

image.png

标签选择器（有弊端就是有多个相同标签的内容时，修改一个标签的css，所有相同的标签都会改变，可以选择为类选择器）

image.png

效果：

image.png

css常见属性总结：

image.png

在input标签里如果想placeholder里的默认字也设置颜色，就需要在input标签里加id属性，

image.png

效果：

image.png

类选择器（常用）

通过 .类名来修改样式，而类名实则是在标签里添加class=类名

image.png

image.png
css里注释符号 / */
注意 class类可以有多个名字，例如“

image.png
效果：

image.png

类命名的规范

不能以纯数字或者数字开头
不推荐使用汉字
不推荐使用特殊字符开头
一般我们用具有一定语义的单词和拼音的类名
css的介个属性

image.png

ID选择器（了解）

image.png

通配符选择器

image.png

补充属性

单位：
px: 像素
em：1em==一个文字的大小
颜色表示方式：

red green.....
十六进制表示（#000-fff）

font 属性

image.png

font属性联写

image.png

复合选择器

image.png

后代选择器

image.png

效果：

image.png

子代选择器

image.png

代码：

image.png

并集选择器

image.png

结构伪类选择器

image.png

属性选择器

image.png

伪元素选择器

image.png

标签显示方式

image.png

块级元素

image.png

行内元素

image.png

所有行内元素都在一行上
行内元素不能设置宽度和高度

行内块元素

代表标签：input img
特点：1.可以设置宽度和高度 2.元素在一行上显示

元素模式的转换

转化为块级元素：display:block;
转化为行内块元素：display:inline-block；
转行内元素：display:inline;
总结;

image.png

伪元素

image.png

CSS特性

层叠性

image.png

继承性

image.png

image.png
优先级

image.png
继承的权重为0

image.png

image.png
总结：

image.png

伪类（也是一种选择器）

image.png
2:

image.png
3（常用:）
设置鼠标悬停在上面显示的颜色设置

image.png
默认情况下，a标签下有下划线，可在a:link{text-decoration:noe}去除下划线，想要悬停时出现下划线可在
a:hover{text-decoration:underline}设置出来
其他标签也可以用

image.png
灵活便用，可以把鼠标放到父类标签上，让它的子类有变化：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:300px;
        height:300px;
        background-color:red;}
        .two {
        width:30px;
        height:30px;
        background-color:green;}
        .one:hover .two{
        background-color:pink;}
    </style>
</head>
<body>
    <div class='one'>
        <div class='two'></div>
    </div>
</body>
</html>

这样把鼠标放到one类标签，那么他的子类标签也会变颜色，不用把标签直接放到子类上

image.png
5:

image.png

导航案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        text-align:center;
        height:40px;
        background-color:pink;
        }
        .one a {
        color:red;
        width:50px;
        height:40px;
        text-decoration:none;
        display:inline-block;
        }
        .one a:hover {
        color:orange;
        background-color:yellow;
        text-decoration:underline;}
        .one .public {
        color:blue; }
    </style>
    
</head>
<body>
    <div class='one'>
        <a href="#">首页1</a>
        <a href="#">首页2</a>
        <a href="#" class='public'>首页3</a>
        <a href="#" class='public'>首页4</a>
    </div>
    
</body>
</html>

效果图：

image.png

background 属性介绍

image.png

background-position注意：

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .box {
        width:30px;
        height:40px;
        background-color:red;
        background-image:url('g.jpg');
        background-repeat:no-repeat;
        background-position:top left;
        background-position:top;}
    </style>
</head>
<body>
    <div class='box'>
        
    </div>
</body>
</html>

background 属性联动类似font

image.png

目标伪类

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        body {
        height:3000px;}
        div:target{
        background-color:red;}
    </style>
</head>
<body>
    <div>自私的很多很多烦恼防护设备设备</div>
    <div>自私的很多很多烦恼防护设备设备</div>
    <div id='test'>123自私的很多很多烦恼防护设备设备</div>
    <div>自私的很多很多烦恼防护设备设备</div>
    <div>自私的很多很多烦恼防护设备设备</div>
    <div>自私的很多很多烦恼防护设备设备</div>
    
    <a href="#test">找123</a>
</body>
</html>

购物车案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:93px;
        height:46px;
        background-image:url('shopping.png');}
        .one:hover{
        background-position:left bottom;}
    </style>
</head>

<body>
    <div class='one'>
        
    </div>
</body>
</html>

效果：

image.png

或者可以用伪元素的方法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        body::before{
        content:'';
        width:93px;
        height:46px;
        display:inline-block;
        background-image:url('shopping.png');
        }
        body:hover:before{
        background-position:left bottom;}
        
        
    </style>
</head>

<body>
    
</body>
</html>

新知识学习

background-size

image.png
有两个属性：

image.png
做专题页面时，可以把整个浏览器页面换成一个背景图，可以用到cover属性,背景图随着浏览器缩放，背景图跟着缩放

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        html,body {
        width:100%;
        height:100%;
        margin:0px;
        padding:0px;}
        a {
        width:100%;
        height:100%;
        display:block;
        background:red url('7.jpg') no-repeat;  
        background-size:cover;
        }
        
    </style>
</head>

<body>
    <a href="#"></a>
</body>
</html>

image.png

多背景

可以给一个容器设置多个背景图

image.png

渐变

image.png
线性渐变

image.png

image.png
效果

image.png

通过角度改变

image.png

注意
0beg 是从上到下渐变

image.png

90beg 从左往右渐变

image.png

image.png
可以做进度条

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        height:150px;
        width:1000px;
        background-image:linear-gradient(
        135deg,
        red 25%,
        blue 25%,
        blue 50%,
        red 50%,
        red 75%,
        blue 75%
        );
        
        background-size:100px 100px;
        
        }
        
        
        
        
    </style>
</head>

<body>
    <div class="one"></div>
    
</body>
</html>

image.png

径向渐变（了解）

image.png

行高

image.png

行高单位

px em % 纯数字

盒子模型（重点）

作用：网页布局【画盒子】
组成：1.内容组成；2.边框；3.内边距；4.外边距

image.png

边框（border）

与font background一样可以联动

image.png

属性联写

image.png
改变边框的某一条边

image.png

去掉轮廓线

image.png

作业

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        border:none;
        border:1px solid red;
        outline-style:none;}
        .one:focus{
        background-color:pink;}
        
    </style>
</head>
<body>
    电话 ：<input type="text" name='uesr' class='one'>
</body>
</html>

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        border:none;
        border-bottom:1px dashed red;
        outline-style:none;}
        .one:focus{
        background-color:pink;}
        
    </style>
</head>
<body>
    邮箱 ：<input type="email" name='uesr' class='one'>
</body>
</html>

image.png

label 标签关联属性

image.png

可以做细线表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        table{
        width:400px;
        height:400px;}
        table,td{
        border:1px solid red;
        border-collapse:collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:400px;
        height:40px;
        border:1px solid red;
        border-radius:5px;
        }
    </style>
    
</head>
<body>
    <div class="one"></div>
</body>
</html>

效果

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:400px;
        height:400px;
        border:1px solid red;
        border-radius:200px;
        }
    </style>
    
</head>
<body>
    <div class="one"></div>
</body>
</html>

画个圆

image.png

padding介绍（内边距）

image.png

所以：

image.png

盒子的实际大小（重点）

image.png

image.png
让盒子居中

image.png

image.png
案例

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:400px;
        height:225px;
        background-color:pink;
        padding-left:100px;
        padding-top:75px;
        }
        .two {
        width:300px;
        height:150px;
        background-color:red;}
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>

效果

image.png

分析：首先大盒子的实际大小是在跟内容区域一样大，小盒子在大盒子里面，所以小盒子在大盒子的内容里的，通过改变大盒子的内边距padding就可以改变大盒子内容区域（改变小盒子的位置）

外边距特点

盒子与盒子的距离

image.png

案例学习

image.png

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type]='text/css'>
       *{
       margin:0;
       padding:0;
       list-style:none;}
       /* 父元素 */
       .one {
       width:238px;
       height:166px;
       border:1px solid #D9E0EE;
       border-top:3px solid #FF8400;
       margin:0px auto;}
       /* 标题 */
       div .title {
       height:35px;
       padding-left:13px;
       border-bottom:1px solid #D9E0EE;
       line-height:36px;}
       /* 内容 */
       div .content {
       height:120px;
       padding-top:10px;
       }
       /* 内容a */
       .content a {
       height:23px;
       text-decoration:none;
       color:#666666;
       padding-left:16px;  }
       
       .content li {
       background:url('li_bg.jpg') no-repeat 7px 9px;}
       .content a:hover {
       color:pink;
       text-decoration:underline;}
       
   </style>
</head>
<body>
   <div class="one">
       <div class="title"><h6>行业动态</h6></div>
       <div class="content">
           <ul>
               <li><a href="#">气质不凡绝妙签名</a></li>
               <li><a href="#">精彩你的手机生活</a></li>
               <li><a href="#">让草根推举草根</a></li>
               <li><a href="#">精彩生活快来看</a></li>
               <li><a href="#">草根名博有伯乐</a></li>
           </ul>
           
       </div>
   </div>
</body>
</html>

效果：

image.png

padding特性

image.png

box-sizing

image.png

浮动

image.png

网页布局

清除浮动

1使用clear清除 left | right | both

image.png

2使用伪元素（推荐方式)

image.png

3使用overflow:hadder

image.png

CSS样式初始化(了解）

overflow （了解）

image.png

定位

image.png

静态定位

image.png

绝对定位（重点）

image.png

相对定位（重点）

image.png

子绝父相案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        body,input{
            margin:0;
            padding:0;
            outline-style:none;
            border: 0 none;
        }
        .search {
            width:300px;
            height:50px;
            border:1px solid red;
            margin-left:100px;
            position:relative;
            

        }
        input {
            height:100%;
            width:100%;
        }

        .search a {
            position:absolute;
            right:0px;
            top:13px;
            
        
        }
        
    </style>
</head>
<body>
    <div class="search">
        <input type="text">
        <a href="#">搜索</a>
    </div>
    
</body>
</html>

效果

image.png

绝对定位（脱标）的元素居中显示

image.png

固定定位

image.png

定位的层级关系

image.png

标签规范

image.png

网页脱标流

image.png

图片垂直对齐方式

image.png

行内元素不能直接使用margin-top
知道是行内块元素就有基线对齐，所以尽量不要设置行内块元素

image.png

元素隐藏方式

image.png

logo 的移除

image.png

盒子阴影

image.png

精灵图使用

image.png

滑动门

image.png

web 字体

image.png

图标文件

//www.iconfont.cn 在这个网址里找

过渡（transition）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one {
            width: 300px;
            height:300px;
            background-color:red;
            /*设置过度*/
            transition:all 1s 1s linear;
        }
        .one:hover {
            width:200px;
            height:200px;
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

2D转换（transform）

image.png

3D转换(transform)【变形】

位移

image.png

自己练习的css动画（单标签）
筷子css 鸡蛋css 勺子css 爱心css 气泡css 缺四角css 缺圆角css 梯形css 圆盘css 平...
CSS背景、文本、字体、链接、列表、轮廓
CSS背景 CSS文本 CSS字体 CSS链接 CSS列表 CSS轮廓
CSS 教程
CSS 教程 CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS ...
CSS样式
CSS背景 CSS字体 CSS链接 CSS 列表 CSS 表格 CSS轮廓 CSS背景 1、背景色 ba...
CSS高级
CSS 对齐CSS 尺寸CSS 分类CSS 导航栏CSS 图片库CSS 图片透明CSS 媒介类型CSS 注意事项C...
前端开发之 CSS入门
文章简要：CSS介绍DIV+CSS的优点CSS 语法CSS新建格式 CSS入门 CSS介绍 CSS（Cascadi...
CSS第一天
CSS 什么是CSS 为什么要学习CSS CSS基础语法 CSS使用方法 CSS选择器 CSS继承和层叠 CSS优...
CSS学习笔记（1）
CSS版本 CSS Level1 CSS Level 2(CSS 2.1规范) CSS Level 3 CSS规则...
CSS盒子模型、定位、浮动
CSS盒子模型概述 CSS内边距 CSS边框： CSS外边距 CSS定位： CSS浮动：
每个前端工程师都应该懂的前端性能优化总结：
采用css雪碧图（css sprite/css图片精灵）技术采用css雪碧图（css sprite/css图片精...

CSS

1.1 CSS 整体重点

1.2 CSS

标签选择器（有弊端就是有多个相同标签的内容时，修改一个标签的css，所有相同的标签都会改变，可以选择为类选择器）

类选择器（常用）

类命名的规范

ID选择器（了解）

通配符选择器

补充属性

font 属性

复合选择器

后代选择器

子代选择器

并集选择器

结构伪类选择器

属性选择器

伪元素选择器

标签显示方式

块级元素

行内元素

行内块元素

元素模式的转换

伪元素

CSS特性

伪类（也是一种选择器）

导航案例

background 属性介绍

background 属性联动 类似font

目标伪类

购物车案例

新知识学习

多背景

渐变

径向渐变（了解）

行高

行高单位

盒子模型（重点）

边框（border）

padding介绍（内边距）

盒子的实际大小（重点）

外边距特点

案例学习

padding特性

box-sizing

浮动

网页布局

清除浮动

CSS样式初始化(了解）

overflow （了解）

定位

静态定位

绝对定位（重点）

相对定位（重点）

子绝父相案例

绝对定位（脱标）的元素居中显示

固定定位

定位的层级关系

标签规范

网页脱标流

图片垂直对齐方式

元素隐藏方式

logo 的移除

盒子阴影

精灵图使用

滑动门

web 字体

图标文件

过渡（transition）

2D转换（transform）

3D转换(transform)【变形】

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

background 属性联动类似font