CSS3

最新推荐文章于 2021-09-22 01:11:07 发布

Mootry

最新推荐文章于 2021-09-22 01:11:07 发布

阅读量138

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Mootry/article/details/114685580

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、概念

什么是CSS
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变）
盒子模型
浮动
定位
网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet 层叠练级样式表
CSS：表现（美化图片）
字体、颜色、边距、定位、高度、宽度、背景图片、网页定位、网页浮动

1.2、发展史

CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画…浏览器兼容性
创建文件规范

1.3、快速入门

style 基本入门

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

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

建议使用zhezhon/g优势
在这里插入图片描述
CSS优势：

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

1.4、CSS的3种导入方式

<!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>

拓展：外部样式两种写法

链接式
html

<!--外部链接-->
<link rel = "stylesheet" href = "文件位置">

导入式
css2.1特有

    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
ink支持使用Javascript控制DOM去改变样式；而@import不支持。

2、选择器

作用：选择页面上某一个元素或者某一类元素
优先级：id > class > 标签（越精确优先级越高）

2.1、选择器

1.标签选择器
选择一类标签：标签{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1 {
            color: red;
            background: green;
            border-radius: 24px;
        }
    </style>


</head>
<body>

<h1>学Java</h1>
<h1>学java</h1>
<p>每天都要努力学Java</p>

</body>
</html>

2.类选择器class
选择所有class属性一致的标签，跨标签，类名不可数字开头：. 类名{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kkkk</title>
    <style>
            /*类选择器的格式   .class名{}
        好处，可以多个标签归类，是同一个class，可以复用
         */
        .c1{
            color:red;
        }
        .c2{
            color: #ffc659;
        }
    </style>

</head>
<body>

<h1 class = "c1">小莫</h1>
<h1 class = "c2">小莫</h1>
<h1 class = "c1">小莫</h1>
<p class = "c1">p标签小莫</p>

</body>
</html>

3.id选择器
全局唯一，id名不可纯数字：#id名{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  id选择器：id必须保证全局唯一，id名不可纯数字
            #id名称 {}
            优先级：
            不遵循就近原则，固定的
            id选择器 > class > 标签选择器 （越精确优先级越高）
        */

        #id2{
            color: red;
        }
        .c1{
            color: green;
        }
        h1{
            color: blue;
        }

    </style>
</head>
<body>
<h1 class="c1" id="1">标题1</h1>
<h1 class="c1" id="id2">标题2</h1>
<h1 id="3">标题3</h1>

</body>
</html>

2.2、层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

body p{
	background: red;
}

子选择器：一代儿子们

body>p{
	background: red;
}

相邻兄弟选择器：向下弟弟只有一个

.active + p{
	background: red;
}

通用选择器：当前选中元素的向下的所有兄弟元素

body~p{
	background: red;
}

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

</head>
<body>
<p class="a">p1</p>
<p>p2</p>
<p>p3</p>

<u1>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</u1>

</body>
</html>

2.3、结构伪类选择器

通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

/*u1的第一个元素*/
u1 li:first-child{
     background: green;
}

/*u1的最后一个元素 */
u1 li:last-child{
     background: green;
}

/*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第n个，若是当前类型元素才生效
 */    
        p:nth-child(2){
            background: darkgoldenrod;
        }*/
        
/*选中父元素下的p元素的第n个,按元素类型来排，不是此类型则不排入*/
        p:nth-of-type(2){
            background: darkgoldenrod;
        }

2.4、属性选择器

存在id属性的元素 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: red;
            text-align: center;
            color: green;
            text-decoration:none;
            margin_right: 10px;
            font:bold 20px/50px Arial;
        }

        /*存在id属性的元素     a[]{}
                          标签[属性=属性名]{}
                                 = 绝对等于
                                *= 包含元素
                                ^= 这个结尾
                                $= 以这个结尾
                          */
        /*  id=d1的元素    */
        a[id=d1]{
            background: #ffc659;
        }
        a[id=d1]{
            background: #ffc659;
        }
        a[href^=http]{
            background: #ffc659; 
        }
        

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="c1" id="d1">1</a>
    <a href="" class="c2" target="_blank" title="test">2</a>
    <a href="images/123.jpg" class="c3" >3</a>
    <a href="images/123.npg" class="c3" >4</a>
    <a href="images/123.html" class="c3" >5</a>
    <a href="abc" class="c4">6</a>
    <a href="abc.pdf" class="c4">7</a>
    <a href="abc.doc" class="c4">8</a>
    <a href="abc.doc" class="c4">9</a>
</p>

</body>
</html>

3、美化网页元素

3.1、为什么要美化网页元素

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span套起来

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

    <style>
        #title1{
            font-size:50px;
        }
    </style>
</head>
<body>

欢迎学习 <span id = "title1">Java</span>

</body>
</html>

3.2、字体样式

    font-family 字体
    font-size 字体大小
    font-weight 字体粗细
    color 字体颜色
font: oblique bold 56px "楷体";
字体    斜体   粗细  大小

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

    <style>

        /*
        font-family 字体
        font-size 字体大小
        font-weight 字体粗细
        color 字体颜色

        */
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }

    </style>
</head>


<body>
<h1>《平凡的世界》</h1>
<p class="p1">是中国作家路遥创作的一部全景式地表现中国当代城乡社会生活的百万字长篇小说。全书共三部。1986年12月首次出版。</p>
<p>该书以中国70年代中期到80年代中期十年间为背景，通过复杂的矛盾纠葛，以孙少安和孙少平两兄弟为中心，刻画了当时社会各阶层众多普通人的形象；劳动与爱情、挫折与追求、痛苦与欢乐、日常生活与巨大社会冲突纷繁地交织在一起，深刻地展示了普通人在大时代历史进程中所走过的艰难曲折的道路。</p>
</body>
</html>

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

    <style>
        p{
            font:oblique bold 56px "楷体";
        /*   字体   斜体   粗细  大小        */
        }

    </style>
</head>
<body>
<p class="p1">是中国作家路遥创作的一部全景式地表现中国当代城乡社会生活的百万字长篇小说。全书共三部。1986年12月首次出版。</p>
</body>
</html>

3.3、文本样式

颜色
单词
RGB 红绿蓝 0~F （#000000黑）（#FFFFFF白）
RGBA A：0~1(表示透明度)
文本对齐方式（水平）
text-align排版：居中、左对齐、右对齐
首行缩进
text-indent: 2em; 首行缩进2个字符
行高：单行文字上下居中
height：500px 块高
line-height：500px 行高
行高和块高高度一致，就可以上下居中
装饰
text-decoration：underline 上划线line-through 中划线、overline 下划线
文本图片水平对齐
verical-align: middle;

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

    <!--
    颜色：
        单词
        RGB 红绿蓝 0~F （#000000黑）（#FFFFFF白）
        RGBA  A：0~1(表示透明度)

    text-align排版：居中、左对齐、右对齐
    text-indent: 2em; 首行缩进

    height：500px         块高
    line-height：500px    行高
    行高和块高高度一致，就可以上下居中

    text-decoration
                    underline 上划线
                    line-through 中划线
                    overline 下划线

    -->

    <style>
        h1 {
            color:rgba(0,0,25,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;   /*首行缩进2个字符*/
        }
        .p2{
            background: blue;
            height: 100px;  /*一整块的宽度*/
            line-height: 100px; /*行高*/
        }
        .p3{
            text-decoration: underline; /*下划线*/
        }
        .p4{
            text-decoration: line-through; /*中划线*/
        }
        .p5{
            text-decoration: overline; /*上划线*/
        }
        a{
            text-decoration: underline; /*超链接去下划线*/
        }
        img,span{
            vertical-align: middle;     /*两个参照物水平对齐*/
        }
        
    </style>
</head>

<body>
<a href="">123</a>
<p class="p3">123456</p>
<p class="p4">123456</p>
<p class="p5">123456</p>

<h1>《平凡的世界》</h1>
<p class="p1">是中国作家路遥创作的一部全景式地表现中国当代城乡社会生活的百万字长篇小说。全书共三部。1986年12月首次出版。</p>
<p class="p2">该书以中国70年代中期到80年代中期十年间为背景，通过复杂的矛盾纠葛，深刻地展示了普通人在大时代历史进程中所走过的艰难曲折的道路。</p>

<p>
    <img src="images/1.jpg" alt="GLU">
    <span>123456789</span>
</p>

</body>
</html>

3.4、阴影

        .name{  /*阴影颜色，水平偏移，垂直偏移，阴影半径*/
            text-shadow: blueviolet 10px 10px 10px;
        }

3.5、超链接伪类

        a:hover{  /*伪类 hover 当鼠标至于所选标签之上则变色*/
            color: red;
        }
        a:active{   /*伪类 鼠标按住未释放时的状态*/
            color: #ffc659;
            font-size: 50px;

3.6、列表

/*ul li
list-style
none：去掉原点
circle：空心圆
decimal：数字
square：正方形
 */
 ul li{
    height: 39px;
    list-style: none;
    /*text-indent: 1em;*/
    text-align: center;
}

在这里插入代码片

3.7、背景

#nav{	/*div的class名*/
    width: 300px;
    background:rgba(64,49,61,0.44)
}

   /*  颜色、图片、图片位置、平铺方式*/
    background: red url("../images/b.jpg") 10px 10px no-repeat;

    background-image: url("../images/b.jpg");
    background-repeat: no-repeat;
    background-position: 150px 2px;

3.8、渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

从上到下（默认情况下

/*从上到下，红渐变到黄*/
background-image: linear-gradient(#e66465, #9198e5);

从左到右

   /*从左边开始的线性渐变，起点是红色，慢慢过渡到黄色：*/
    background-image: linear-gradient(to right, red , yellow);

对角

/*左上角开始（到右下角）的线性渐变。起点是红色过渡到黄色：*/
 background-image: linear-gradient(to bottom right, red, yellow);

径向渐变（Radial Gradients）- 由它们的中心定义

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。

4、盒子模型

4.1、什么是盒子

在这里插入图片描述

margin：外边距
padding：内边距
border：边距（粗细、样式、颜色）

4.2、边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        hl、li、a、body总有一个默认边距margin，一般需置为0
        margin: 0;
        padding: 0;
        border: 0;
         */
        #box{
            width:240px;
            /*      粗细  样式   颜色*/
            border: 2px solid rgba(57,64,35,0.44);
            background-color:rgba(62,39,64,0.44);
        }
        h2{
            font-size: 16px;
            text-align: center;
        }
        form{

        }
        div:nth-of-type(1)input{
            border: 3px solid black;
        }



    </style>
</head>
<body>

<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
        <div>
            <input type="submit"value="登录">
            <input type="submit"value="注册">
        </div>
    </form>


</div>
</body>
</html>

4.3、内外边距

外边距的妙用：居中元素
margin：0 aotu

4.4、盒子的计算

盒子的计算方式：这个元素到底多大
margin + border +padding + 内容宽度
在这里插入图片描述

4.5、圆角边框

border-radisx

         2个数时：a左上右下  b右上左下
         4个数时：↖↗↘↙ 顺时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border:2px solid red;
            /*border-radisx
                2个数时：a左上右下  b右上左下
                4个数时：↖↗↘↙ 顺时针
            */
            border-radius: 50px;
        }

    </style>
</head>
<body>
<div></div>
</body>
</html>

扇形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: red;
            border-radius: 50px 0 0 0 ;
        }

    </style>

</head>
<body>
<div></div>
</body>
</html>

4.6、阴影

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


    <style>
        img{
            <!--margin: auto;居中
            要求:块元素，块元素有固定宽度
            -->
            margin: 0 auto;
            boder-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>
<body>

<div>
<img src="../3.圆角边框/images/1.jpg" alt="">
</div>
</body>
</html>

5、浮动

5.1、标准文档流

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong

5.2、display

block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
none
这是一种简单的模式，一般用float

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }
    </style>

5.3、float

1.左右浮动

.c3{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
    clear: both;
}
.c4{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;

5.4、父级边框塌陷的问题

clear

clear: right; 右侧不允许有浮动
clear: left; 左侧不允许有浮动
clear: both; 两侧均不允许有浮动
clear:none; 允许有浮动

解决方案：

增加父级元素的高度

#father{
    height: 250px;
    border: 1px #000 solid;
    }

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

overflow
在父级元素中增加一个 overflow: hidden;

    <style>
        #content{
            width: 200px;
            height: 150px;
            overflow: scroll;
        }
    </style>

父类添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

浮动元素后面增加空div
简单，代码中尽量避免空div
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
overfloat
简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）
写法稍微复杂一点。但是没有副作用，推荐使用

5.5、对比

display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位

6.1、相对定位

position relative；
相对于原来的位置，进行指定的偏移，相对定位，它仍然在标准文档流中，原来的位置会被保留

top: -20px
left: 20px;
right: 20px;
bottom: 20px;

        #d1{
            background-color: brown;
            border: 5px black dashed;
            position: relative;
            top: 20px;
            left: 20px;
        }

在这里插入图片描述

6.2、绝对定位

定位：基于XXX定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

        #father{
            width: 250px;
            height: 120px;
            border: 1px solid red;
            /*绝对定位：父类定位了则相对于父类偏移，父类没有定位则相对于浏览器偏移*/
            position: relative;
        }
        #d1{
            background-color: brown;
            border: 5px black dashed;
            position: absolute;
            top: 20px;
            left: 20px;
        }

6.3、z-index

图层：z-index 默认是0 最高无限_{999（大概有点类似于透明度的感觉}）
在这里插入图片描述

.tipText{
	color:white;
	z-index:0
}
.tipBg{
	background:#000;
	opacity:0.5;/*背景透明度*/
}

7、动画

Mootry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3

1、概念什么是CSSCSS怎么用（快速入门）CSS选择器（重点+难点）美化网页（文字、阴影、超链接、列表、渐变）盒子模型浮动定位网页动画（特效效果）1.1、什么是CSSCascading Style Sheet 层叠练级样式表CSS：表现（美化图片）字体、颜色、边距、定位、高度、宽度、背景图片、网页定位、网页浮动1.2、发展史CSS1.0CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动、定位CSS3.0 圆角、阴影
复制链接

扫一扫