CSS入门基础

BenBuYi

于 2020-09-25 21:31:31 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/weixin_48295367/article/details/108804668

版权

1.CSS是什么

如何学习
1. CSS是什么
2. CSS怎么用（快速入门）
3. CSS选择器（重点+难点）
4. 美化网页（文字、阴影、超链接、列表）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画（特效）
w3cshool 菜鸟教程

1.1 什么是CSS

Cascading style Sheet 层叠级联样式表

CSS：表现（美化网页）

1.2 CSS发展史

CSS1.0

CSS2.0 div + css,提出HTML和CSS分离的思想

CSS2.1 浮动和定位

CSS3.0 圆角边框，阴影，动画… 浏览器兼容性问题

1.3 快速入门

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范，css代码写在head中    style编写CSS代码-->
<!--每一个声明最好以分号结尾-->
<!--语法：
        选择器{
            声明1;
            声明2;
        }
-->
    <style>
        h1{
            color: #1f8b82;
        }
    </style>

</head>
<body>


<h1>我是标题</h1>
</body>
</html>

建议使用分离规范

CSS优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

h1{
    color: #1f8b82;
}

1.4 CSS导入方法

行内样式
内部样式
外部样式

优先级：就近原则，谁离元素越近，谁就优先

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red";>我是标题</h1>
</body>
</html>

/*外部样式*/
h1{
    color: black;
}

拓展：

链接式
导入式 CSS2.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "style.css";
    </style>
</head>

2.选择器

作用：选择页面上，某一个或某一类元素

2.1 基本选择器

标签选择器 h1{}

可选择所有同一标签

<style>
    /* 标签选择器,选择页面上所有这个标签的元素*/
    h1{
        color: #ff5849;/*字体颜色*/
        background: #1f8b82;/*背景颜色*/
        border-radius: 10px;/*圆角大小*/
    }
    p{
        font-size: 80px; /*字体大小*/
    }
</style>

类选择器 .first{}

选中class相同的所有标签

可以跨标签

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

    <style>
        /*类选择器格式 .class的名称{}
        好处：可以多个标签归类，是同一个class
        可以跨标签使用
        */
        .first{
            color: #7fff21;
        }
        .second{
            color: #1f8b82;
        }
    </style>
</head>
<body>

<h1 class="first">标题1</h1>
<h1 class="second">标题2</h1>
<h1 class="second">标题3</h1>
<p class="first">P标签</p>

</body>
</html>

id选择器 #first{}

全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器
        #id名称{}
        id 具有唯一性，要保证全局唯一
        不遵循就近原则 id > class > 标签
        */

        #first{
            color: red;
        }
        .second{
            color: wheat;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>

<h1 id="first">标题1</h1>
<h1 class="second">标题2</h1>
<h1 class="second">标题3</h1>
<h1>标题4</h1>

</body>
</html>

2.2 层次选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1HIzawLI-1601040678057)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200710201546036.png)]

1、后代选择器 body p

某个元素的所有后代

body p{
    background: #1f8b82;
}

2、子选择器 body>p

只有一代

body>p{
    background: #1f8b82;
}

3、相邻兄弟选择器.aciton + p

下面弟弟样式选择 .aciton + p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .action + p{
            background: red;
        }
    </style>
</head>
<body>
<p class="action">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>

4、通用选择器 .action~p

当前选中元素向下的，所有同级同类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .action~p{
            background: red;
        }
    </style>
</head>
<body>

<p class="action">p1</p>
<p>p2</p>   <!--此行会变红-->
<p>p3</p>	<!--此行会变红-->
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>
<p>p7</p>	<!--此行会变红-->
</body>
</html>

2.3 结构伪类选择器

定位元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*定位ul的第一个元素*/
        ul li:first-child{
            background: wheat;
        }
        /*ul的第三个元素*/
        ul li:last-child{
            background: #ff5849;
        }
        /*选中p1: 定位到父元素，选择当前第“一”个元素
        选中当前p元素的父级元素，选中父级元素的第一个,并且第一个元素为p才生效
        */
        p:nth-child(3){
            background: red;
        }
        /*选择当前父元素，下面的第二个类型为p的元素*/
        p:nth-of-type(2) {
            background: yellow;
        }

    </style>
</head>
<body>
<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>

2.4 属性选择器（常用）

    /*id+class的结合
    a[]{} 属性选择器
    属性[属性名=属性值] 绝对等于
    属性[属性名*=属性值]包含等于
    属性[属性名^=属性值]以属性值开头的元素
    属性[属性名$=属性值]以属性值结尾的元素

<!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: 50px;/*圆角*/
            background: antiquewhite;/*背景色*/
            text-align: center; /*字体左右居中*/
            color: #ff5849; /*字体颜色*/
            text-decoration: none;/*下划线*/
            font: bold 20px/50px Arial; /*粗体 字体大小/行高 */
            margin-right: 5px;/*向右偏离5px*/
        }
        /*选中存在id属性的元素
        a[]{} 属性选择器
        属性[属性名=属性值] 绝对等于
        属性[属性名*=属性值]包含等于
        属性[属性名^=属性值]以属性值开头的元素
        属性[属性名$=属性值]以属性值结尾的元素
        */
        a[id=first]{
            background: green;
        }
        /*a标签中带id的所有元素*/
        a[id]{
            background: red;
        }
        a[class*="links"]{
            background: #1f8b82;
        }
        a[href^="http"]{
            background: rgba(57, 55, 179, 0.64);
        }
    </style>
    
</head>
<body>
<p class="demo">
    <a href="http://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="" id="second" >3</a>
    <a href="" class="links">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
</p>
</body>
</html>

3.美化网页元素

3.1 为什么要美化网页

有效传递页面信息
美化网页，吸引用户
凸显主题
提升用户体验

span / div /

重点要突出的的字(行内元素)，用span

重点突出的块级元素（占整行），用div

3.2 字体样式

font-family: 字体 可用逗号隔开，中英文
font-size:   大小 px像素   em缩进
color：      字体颜色
font-weight:  字体粗细
font: oblique bold 20px "思源黑体"; 斜体 加粗 字号 字体

3.3 文本样式

rgba:透明度 0-1
text-align:center居中 right右对齐
text-decoration: underline; 下划线
text-decoration: line-through; 中划线
text-decoration: overline; 上划线
height: 600px;/*整段行高*/
line-height: 300px;/*单行行高*/
text-indent: 2em;/*首行缩进2字符*/
超链接去下划线: text-decoration: none;
img,span{vertical-align: middle;}两者水平参照对齐

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

    <style>
        h1{
            color: rgba(0,255,0,0.8);
            text-align: right;
        }
        .p1{
            text-indent: 2em;/*首行缩进*/
        }
        .p2{
            background: #ff5849;
            height: 600px;/*整段行高*/
            line-height: 300px;/*单行行高*/
        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>
    量子力学
</h1>
<p class="p1">
    据此，一些物理学家和哲学家断言量子力学摈弃因果性，而另一些物理学家和哲学家则认为量子力学因果律反映的是一种新型的因果性——几率因果性。量子力学中代表量子态的波函数是在整个空间定义的，态的任何变化是同时在整个空间实现的。
</p>
<p class="p2">
    19世纪末，人们发现旧有的经典理论无法解释微观系统，于是经由物理学家的努力，在20世纪初创立量子力学，解释了这些现象。量子力学从根本上改变人类对物质结构及其相互作用的理解。除了广义相对论描写的引力以外，迄今所有基本相互作用均可以在量子力学的框架内描述（量子场论）。
</p>
<p>
    <img src="" alt="">
    <span>123</span>
</p>
</body>
</html>

3.4 阴影

div元素中添加box-shadow

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIQz8i6s-1601040678060)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200712171353975.png)]

/*文本阴影颜色 水平右偏移 垂直下偏移 模糊距离*/
text-shadow: #ff5849 10px 1px 3px;

3.5 超链接伪类

CSS 伪类用于向某些选择器添加特殊的效果。

<style>
    /*默认颜色*/
    a{
        text-decoration: none;
        color: #ff5849;
    }
    /*鼠标悬浮的颜色*/
    a:hover{
        color: red;
        font-size: 40px;
    }
    /*鼠标点击未释放颜色*/
    a:active{
        color: #7fff21;
    }
    /*已经访问后颜色*/
    a:visited{
        color: blue;
    }
</style>

3.6 列表

list-style:none;去点点
list-style:circle;空心圆
list-style:square;正方点
list-style:decmal;有序列表

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    background: orange;
}
#nav{
    height: 300px;
    width: 146px;
}
/*
list-style:none;去点点
list-style:circle;空心圆
list-style:square;正方点
list-style:decmal;有序列表

*/
ul li{
    height: 30px;
    list-style: decimal-leading-zero;
    background: aliceblue;
}
a{
    text-decoration: none;
    font-size: 20px;
    color: #3bb856;

}
a:hover{
    color: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="nav">
    <h1 class="title">商品列表</h1>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="">音响</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="">音响</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="">音响</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="">音响</a></li>
    </ul>
</div>
</body>
</html>

3.7 背景图案

background-repeat: no-repeat;/*不平铺*/
background-repeat: repeat-x;/*仅水平平铺*/
background-repeat: repeat-y;/*仅垂直平铺*/
background-image: url("images/图片.jpg");/*默认全部平铺，铺不满自动复制 */
background-position: 100px 30px; /*定位x y*/

一行写法：
background: red url("images/图片.jpg") 20px 40px no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    div默认没有大小，仅是空标签-->
    <style>
        div{
            width: 1920px;
            height: 1080px;
            border: 1px solid tan;/*边框粗细 边框样式 颜色*/
            background-image: url("images/图片.jpg");/*默认全部平铺，铺不满自动复制 */
        }
        .div1{
            background-repeat: repeat-x;/*仅水平平铺*/
        }
        .div2{
            background-repeat: repeat-y;/*仅垂直平铺*/
        }
        .div3{
            background-repeat: no-repeat;/*不平铺*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

3.8 渐变

网站：www.grabient.com

background-color: #FEE140;
background-image: linear-gradient(90deg, #FEE140 0%, #FA709A 100%);
background: linear-gradient(90deg, #FEE140 0%, #FA709A 100%);

4.盒子模型

4.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htjPMA1L-1601040678062)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200712184818303.png)]

4.2 边框border

dotted 点状 
solid  实线
double 双线
dashed 虚线
border: 1px solid red; 边框宽度 样式 颜色

div:nth-of-type(1) input{
    border: 3px solid black;
    border-radius:20px;/*圆角半径，顺时针控制，当半径等于正方形大小的一半时，成为圆形*/
}
div:nth-of-type(2) input{
    border: 3px dotted black;
}
div:nth-of-type(3) input{
    border: 3px dashed black;
}

4.3 内外边距

/*有很多属性都有外边框默认值，需要提前设置*/
外边距的作用：居中元素

#app{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto ;/*上下  左右（auto居中）*/
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4t2lzy7K-1601040678065)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200712184434948.png)]

元素实际大小 = margin + border + padding + 内容大小

4.4 圆角边框

<style>
    div{
        width: 100px;
        height: 100px;
        border: #ff2167 2px solid;
        border-radius: 50px 50px 0px 0px;
    }
</style>

4.5 盒子阴影

width: 100px;
height: 100px;
border: #ff2167 10px solid;
box-shadow: 10px 10px 10px yellow;/*x-y偏移量 模糊程度 颜色*/

5.浮动

5.1 标准文档流：自上而下

块级元素：独占一行 h1 p div

行内元素：不独占一行 span a img strong

行内元素何以包含在块级元素中，反之不行。

5.2 display

span元素即使添加width和height和边框，也只和文字多少有关。

但可以通过添加display：block；成为块元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FeOTg9Pw-1601040678069)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200713095901643.png)]

display:inline;/*成为行内元素*/
display:block;/*成为块级元素*/
display：inline-block/*对span添加后，既可以像行内元素一样在同一行中，也可以拥有块级元素的外边框*/
display:none;/*直接消失*/

display是一种实现行内元素排列的方式，但我们很多情况用的都是float

5.3 float：浮动

float: right;
float: left;

但会随着页面大小变动而漂浮变动

5.4 父级边框坍塌问题

浮起后元素不在包含在父级元素中，容易不在父级边框中

解决方法：

增加父级元素高度
在漂浮元素块后，增加空的div，并清除浮动

.clear{
    clear: both;
    margin: 0px;
    padding: 0px;
}
<div id="father">
    <div class="lay01">块级元素1，独占一行</div>
    <div class="lay02">块级元素2，独占一行</div>
    <div class="lay03">块级元素3，独占一行</div>
    <div class="clear"></div>
</div>

overflow滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 200px;
            overflow: scroll;
        /*hidden：超出范围自动隐藏
          scroll: 进度条
        */
        }
    </style>
</head>
<body>
<div id="content">
    <img src="../imges/image-20200710201546036.png" alt="" width="300px" height="300px">
    <p>哈哈哈哈哈哈</p>
</div>
</body>
</html>

父类中添加伪类：after

不用添加div ，推荐使用

#father:after{
    content: ''; 添加空元素
    display: block; 变为块元素
    clear: both; 清除浮动
}

5.5 display&float对比

display 方向不可控
float 浮动会脱离标准文档流，需要解决父级边框塌陷问题

6.定位

6.1 相对定位

相对于原来的位置偏离后，原来的位置也会被保留，不会造成塌陷

position: relative;

    #first{
        background:red;
        border: 1px red dashed;
        position: relative;/*相对定位：上下左右*/
        top:-10px; /*距离顶部的距离减少10px*/
        left: 20px;
    }

<!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: red 1px solid;
        }
        #first{
            background:red;
            border: 1px red dashed;
            position: relative;/*相对定位：上下左右*/
            top:-10px; /*距离顶部的距离减少10px*/
            left: 20px;
        }
        #second{
            background: #FA709A;
            border: #a09322 1px dashed;
        }
        #third{
            background: #FA709A;
            border: #FA709A 1px dashed;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.2 绝对定位

基与XXX定位，上下左右

没有父级元素定位的前提下，相对于浏览器边框定位。
假设父级元素存在定位，会相对于父级元素偏移
相对于父级或浏览器的位置，进行指定大小的偏移量，不在标准文档流中，原来的位置不会保留。会有边框塌陷的问题出现

#father{
    border: red 1px solid;
    position: relative;
}

6.3 固定定位

position: fixed;
right: 0;
bottom: 0;

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

        body{
            height: 1500px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: #1f8b82;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) {
            width: 50px;
            height: 50px;
            background: #FEE140;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index

图层概念

z-index : 999; 数值越大，越靠前

#content{
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;
    width: 500px;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 20px;
    top: 340px;
}
.tipText{
    z-index: 4;
}
.tipBg{
    background: #FEE140;
    opacity: 0.5;/*0-1*/
    filter: alpha(opacity=50);/*IE8之前的老版本用的*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../imges/image-20200710201546036.png" alt="" height="400" width="300"></li>
        <li class="tipText">学PYthon</li>
        <li class="tipBg"></li>
        <li>时间：2020年7年14日</li>
        <li>地点：芜湖</li>
    </ul>
</div>
</body>
</html>

对象不透明度

opacity: 0.5;/*0-1*/
filter: alpha(opacity=50);/*IE8之前的老版本用的*/
background:rgba(255,0,0,0.5)

BenBuYi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫