浅学CSS3

最新推荐文章于 2024-07-24 22:39:14 发布

CoolboY61

最新推荐文章于 2024-07-24 22:39:14 发布

阅读量117

点赞数

分类专栏： Web 文章标签： css3 css html5

本文链接：https://blog.csdn.net/InnocentBoYYY/article/details/120825633

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 指的是层叠样式表* (Cascading Style Sheets)，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS 节省了大量工作。它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中

CSS3

1. 入门

<!--	 
	语法：
        选择器：{
            声明1;   
            声明2;   
            声明3;
    }
-->

两种写法：

直接在html中写css代码，必须写在style的标签中，而且style必须在head当中
单另写在css的文件中，但是必须在html的head中使用link标签，标明css的地址##

2. css的三种导入方式

行内样式：

<h1 style="color: red">我是标题</h1>

直接在标题标签中添加一个style标签

内部样式

<style>
    h1{
       color:green;
    }
</style>

在html的head头部中写

外部样式

<link rel="stylesheet" href="css/style.css">

h1 {
    color:blue;
}

在外部的css文件中写，需要注意：在html文件中必须使用link标签表明css文件的地址

执行顺序：行内样式最优先，内部样式和外部样式看他们在head中的位置，位置靠后的先执行，就近原则谁距离h1标签近，谁就先执行

3. css的基本选择器

作用：可以选择上页面上的某一个或者某一类元素

3.1 基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器：会选择到页面上所有这个标签的元素*/
        h1 {
            color: #d9d270;
        }

        p {
            color: #10bed5;
        }
    </style>
</head>
<body>
<h1>刘艺！！！</h1>
<h1>刘艺！！！</h1>
<p>狂神！！！</p>
</body>
</html>

语法：标签名{} 缺点：不能进行单个选择

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器：会选择到页面上对应的标签，还可以实现复用*/
        .liuyi {
            color: #e86060;
        }

        .shuaige {
            color: #5ccece;
        }
    </style>
</head>
<body>
<h1 class="liuyi">刘艺！！！</h1>
<h1 class="shuaige">刘艺！！！</h1>
<p>狂神！！！</p>
</body>
</html>

语法：.class{} 优点：可以细分选择，也可以实现复用命名不能以数字开头

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #liu1 {
            color: #5ccece;
        }
        #liu2 {
            color: #d9d270;
        }
    </style>
</head>
<body>
<h1 id="liu1">标题1</h1>
<h1 id="liu2">标题2</h1>

</body>
</html>

语法：#id{} 注意点：id必须唯一，不能重复！ 命名不能以数字开头

选择器执行顺序和位置无关：id选择器 > class选择器 > 标签选择器

3.2 层次选择器

后代选择器

/*后代选择器*/
body p {
    background: #e86060;
}

body p{} body下的所有P标签都会改变

子选择器

/*子选择器*/
body>p {
    background: #5ccece;
}

body>p{} 会选中body的儿子（不包括儿子以下的孙子啥的）

相邻兄弟选择器（弟弟选择器）

/*相邻兄弟选择器*/
.active + p {
    background: aquamarine;
}

.class + p{}

通用选择器（所有弟弟选择器）

/*通用选择器*/
.active~p {
    background: cadetblue;
}

.class~p{} 会选中所有的弟弟

3.3 结构伪类选择器

/*ul的第一个元素*/
ul li:first-child{
    background: gold;
}
/*ul的最后一个元素*/
ul li:last-child {
    background: #e86060;
}

/*选中p1 : 选中P父元素，选中父元素的第一个子元素，按顺序选择*/
p:nth-child(1) {
    background: red;
}

/*选中父元素，下的P元素的第二个，按类型选择*/
p:nth-of-type(2) {
     background: #10bed5;
}

伪类：一些筛选条件（带冒号的开头）

3.4 属性选择器

标签名[属性名 = 属性值] {} eg:a[id = first]{}

其中属性值可以使用正则表达式

= 绝对等于

*= 包含这个元素的元素

^= 以这个开头的元素

$= 以这个结尾的元素

4. 美化网页元素

作用：

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

4.1 span标签

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

    <style>
        #title {
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title">java</span>

</body>
</html>

重点要突出的子，使用span套起来（一种约定）

4.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family: 设置字体样式
    font-size:   设置字体大小
    font-weight: 设置字体粗细
    color：      设置字体颜色
    -->

    <style>
        body{
            font-family: "Arial Black",楷体;
            color: #417979;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1>背景介绍</h1>
<p class="p1">
    《灵笼》是艺画开天、bilibili联合出品的原创网络动画作品，由艺画开天担任制作。上半季于2019年7月13日起在bilibili独家播出，下半季（终章上、下）于2021年5月1日播出。全7话。
</p>
<p class="p2">
    《灵笼》讲述的是地球经历一场毁灭性的浩劫，幸存的人类不得不避难于一座悬浮于空中的灯塔上，继而面对善恶对立、是非难辨等种种矛盾的故事。
</p>
<p>
    She saw scars and bruises on her body.Tears fell on the wounds.This wasn’t the 1st time he abused and hit her.She decided to end life.Took a knife and went to the bedroom.She came outside with blood all over her face,But this is the 1st time it wasn’t her blood.
</p>
</body>
</html>

font-family: 设置字体样式
font-size: 设置字体大小
font-weight: 设置字体粗细
color：设置字体颜色

4.3 文本样式

颜色 color rgb rgba
文本对齐方式 text-align: center;
首行缩进 text-indent: 2em;
行高 line-height: 50px;
装饰 text-decoration: underline; (操作下划线)
文本图片水平对齐 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    text—align: 文字排版，居中……
    text—indent： 段落首行缩进
    行高，和块的高度一致，可以实现上下居中
    -->
    <style>
        h1 {
            color: lightpink;
            text-align: center;
        }
        .p1 {
            text-indent: 2em;
        }
        .p3 {
            background: cornsilk;
            height: 100px;
            line-height: 50px;
        }
        /*下划线*/
        .l1 {
            text-decoration: underline;
        }
        /*中划线*/
        .l2 {
            text-decoration: line-through;
        }
        /*上划线*/
        .l3 {
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">12345</a>
<p class="l1">111111111</p>
<p class="l2">222222222</p>
<p class="l3">333333333</p>
<h1>背景介绍</h1>
<p class="p1">
    《灵笼》是艺画开天、bilibili联合出品的原创网络动画作品，由艺画开天担任制作。上半季于2019年7月13日起在bilibili独家播出，下半季（终章上、下）于2021年5月1日播出。全7话。
</p>
<p class="p2">
    《灵笼》讲述的是地球经历一场毁灭性的浩劫，幸存的人类不得不避难于一座悬浮于空中的灯塔上，继而面对善恶对立、是非难辨等种种矛盾的故事。
</p>
<p class="p3">
    She saw scars and bruises on her body.Tears fell on the wounds.This wasn’t the 1st time he abused and hit her.She decided to end life.Took a knife and went to the bedroom.She came outside with blood all over her face,But this is the 1st time it wasn’t her blood.
</p>
</body>
</html>

4.4 超链接伪类文本阴影

鼠标悬停的颜色

a:hover { }
文本阴影

text-shadow: #10bed5 30px 30px ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a {
            text-decoration: none;
            color: cornflowerblue;
        }
        /*鼠标悬停的颜色*/
        a:hover {
            color: red;
            font-size: 20px;
        }
        /*鼠标按住未释放的颜色*/
        a:active {
            color: green;
        }
        /*文本阴影*/
        #price {
            text-shadow: #10bed5 30px 30px ;
        }
    </style>
</head>
<body>

<a href="#">
<img src="images/B$U6)AHNB47DL9C%5BIQ$OX0B.png" alt="">
</a>

<p>
    <a href="#">CSGO前职业队员，loveqq</a>
</p>
<p>
    <a href="">作者：刘艺</a>
</p>
<p id="price">
    $1999
</p>
</body>
</html>

4.5 列表操作

list-style:
	none 去掉原点
	circle 空心圆
	decimal 数字
  	square 正方形

4.6 背景

背景颜色
背景图片

<style>
    div {
         width: 1000px;
         height: 1000px;
         border: 2px solid red;
         background-image: url("image/QQ图片20200502193402.jpg");
            /*默认全部是平铺的*/
    }
    .div1 {
           background-repeat: repeat-x;
           background: ;
    }
    .div2 {
           background-repeat: repeat-y;
    }
    .div3 {
    	   background-repeat: no-repeat;
    }
</style>

background: 颜色，图片，图片位置，平铺方式

5. 盒子模型

5.1 盒子

margin：外边距不手动设置会有默认值
padding：内边距
border：边框

5.2 边框

border：粗细，样式（solid实线，dashed虚线），颜色

    <style>
        #box {
            width: 300px;
            border: 1px solid red;
        }
        form {
            background: #417979;
        }
        h3 {
            background: #e86060;
            margin: 0;
        }
        div:nth-of-type(1) input {
            border: 10px solid lightsalmon;
        }
         div:nth-of-type(2) input {
            border: 10px dashed #16dbae;
        }
         div:nth-of-type(3) input {
            border: 10px solid lightsalmon;
        }
    </style>

<div id="box">
    <h3>用户登录</h3>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

5.3 内外边距

妙用：可以实现div居中对齐
margin: 0 auto; 两个参数时，第一个为上下，第二个为左右

要求：块元素，块元素有固定的宽度

盒子的计算方式：你的这个元素到底多大

margin + border + padding + 内容宽度

5.4 圆角边框

<style>
    /*顺序为顺时针方向：左上，右上，右下，左下*/
    div {
         width: 100px;
         height: 100px;
         border: 5px solid red;
         border-radius: 10px 20px 30px 40px;
    }
</style>

border-radius: 左上，右上，右下，左下

5.5 盒子阴影

<style>
    div {
         width: 100px;
         height: 100px;
         border: 5px solid red;
         box-shadow: 10px 10px 100px #e86060;
     }
</style>

box-shadow 设置阴影（发光）: 10px 10px 100px #e86060

6. 浮动

6.1

块级元素：独占一行
h1~h6 p div 列表……
行内元素：不独占一行
span a img strong……
行内元素可以被包含在块级元素中，反之，则不可以

这是一种是先行内元素排版的方式，但是我们有很多情况都是用float

6.2 display

div {
    width: 100px;
    height: 100px;
    border: 1px solid #16dbae;
    display: inline;
}
span {
    width: 100px;
    height: 100px;
    border: 1px solid #16dbae;
    display: block;
}

display: inline行元素 /

block块元素 /

inline-block保持块元素的特性但能内联写在一行 /

none消失

方向不可控制

6.3 float（左右浮动）

float:left / right

让窗口浮动，根据网页界面变换自动调整位置

浮动起来会脱离标准文档流

6.4 父级边框塌陷问题

clear：

/*
clear: right;   右侧不允许有浮动元素
clear: left;    左侧不允许有浮动元素
clear: both;    两侧不允许有浮动元素
clear: none;
*/

解决方案：

增加父级元素的高度

#father{
    border: 10px solid #16dbae;
    height: 1500px;
}

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

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

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

在父级元素中增加一个overflow

#father{
    border: 10px solid #16dbae;
    overflow: auto;
}

auto：滚轮效果（超过父类边框时生成滚轮）

hidden：截取效果（超过父类边框时会截取，但是别的内容依然可见）

在父类添加一个伪类**(推荐)**

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

7. 定位

7.1 相对定位 relative

相对自己原来的位置进行偏移

position：relative

相对于原来的位置，进行指定的漂移，原来的位置会被保留

position: relative;
top: -30px;
left: -10px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位：
                相对自己原来的位置进行偏移
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #e57a3f;
            padding: 0;
        }
        #first{
            border: 1px solid #5ccece;
            background: cornflowerblue;
            position: relative;
            top: -30px;
            left: -10px;
        }
        #second{
            border: 1px solid darkred;
            background: salmon;
        }
        #third{
            border: 1px solid #10bed5;
            background: #417979;
            position: relative;
            top: 20px;
        }
    </style>

</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

7.2 绝对定位 absolute

定位：基于xxx定位，上下左右~

没有父级元素定位的前提下，性对于浏览器定位

假设父级元素存在定位，我们通常会相对于父级元素进行偏移

在父级元素范围内移动

相对于父级 / 浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #e57a3f;
            padding: 0;
            /*position: relative;*/
        }
        #first{
            border: 1px solid #5ccece;
            background: cornflowerblue;
        }
        #second{
            border: 1px solid darkred;
            background: salmon;
            position: absolute;
            right: 30px;
            top: 30px;
        }
        #third{
            border: 1px solid #10bed5;
            background: #417979;
        }
    </style>

</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

7.3 固定定位 fixed

固定定位：

固定定位使用后块就会固定在网页一个部分，不随着滚轮的上下移动而移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;
        }
        div:nth-of-type(1) {/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: #5ccece;
            position: absolute;
            bottom: 0;
            right: 0;
            text-align: center;
            line-height: 100px;
        }
        div:nth-child(2) {/*fixed，固定定位*/
            width: 50px;
            height: 50px;
            background: #d550d3;
            position: fixed;
            bottom: 0;
            right: 0;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

7.4 z-index

z-index: 0/1/2/3/4

给模块设置图层，编号大的在上面

CoolboY61

关注

0
点赞
踩
0

收藏

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

CSS 指的是层叠样式表* (Cascading Style Sheets)，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS 节省了大量工作。它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中CSS31. 入门两种写法：直接在html中写css代码，必须写在styl
复制链接

扫一扫