CSS快速入门

于 2022-10-24 20:30:29 发布
阅读量171 收藏 1
点赞数
分类专栏： Java 文章标签： java css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62906329/article/details/127500487
版权

一、什么是CSS

1.1CSS简介

Cascading Style Sheets：层叠样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、页面定位、网页

1.2快速入门

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

    <!--规范,<style>可以编写css代码，每一个声明最好使用分号结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: aqua;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

CSS优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式丰富
  4. 利用SEO，容易被搜索引擎收录

1.3CSS的三种导入方式

  1. 行内样式

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

  2. 内部样式

    <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: aquamarine;
        }
    </style>
</head>

  3. 外部样式

    <首先在html中链接：>
<link rel="stylesheet" href="css/style.css">
h1{
    color: greenyellow;
}

优先级依次递减，同时遵循就近原则，谁离html定义的元素更近就先执行谁

拓展：外部样式两种写法

  • 链接式：link标签
  • 导入式：@import url(“css/style.css”);

二、选择器

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

2.1基本选择器

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

    <style>
    /*标签选择器会选择到页面上所有含该标签的元素*/
    h1{
        text-decoration: none;
        color: #006bad;
        background-color: #fff;
    }
    p{
        font-size: 80px;
    }
</style>

  2. 类选择器：选中所有class名称一致的标签，可以跨标签

    	<style> 
        .a{
            color: aqua;
        }
        .b{
            color: bisque;
        }
	</style>
<h1 class="a">标题1</h1>
<h1 class="b">标题2</h1>

  3. ID选择器：全局唯一

<style>
        #a{
            color: #64d354;
        }
        #b{
            color: #64d354;
        }
   </style>
</head>
<body>

<h1 id="a">天津科技大学1</h1>
<h1 id="b">天津科技大学2</h1>

优先级：id选择器 > class选择器 > 标签选择器，不遵循就近原则

2.2层次选择器

  1. 后代选择器：在某个元素的后面

    <style>
    /*后代选择器*/
    body p{
        background: #64d354;
    }
</style>

  2. 子选择器：只有一代

    <style>
    /*子选择器*/
    body>p{
        background: #d316ad;
    }
</style>

  3. 相邻兄弟选择器（同辈）:选择紧邻active的p元素，只选择一个

    .active + p{
    background: aqua;
}

  4. 通用兄弟选择器：当前选中元素的向下的全部兄弟元素

    .active~p{
            background: blue;
}

2.3 结构 伪类选择器

/*选中ul的第一个子元素*/
ul li:first-child{
    background: #d316ad;
}
/*选中ul的第一个子元素*/
ul li:last-child{
    background: #4bff50;
}

<ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
</ul>

/*选中其父级元素的第n个子元素，且类型必须是当前元素*/
p:nth-child(1){
    background: aqua;
}

/*选中父元素下的p元素的第n个*/
p:nth-of-type(2) {
    background: pink;
}
<body>
    <p>p1</p>
    <p>p2</p>
</body>

2.4属性选择器（常用）

结合了id+class

<!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: 10px;/*圆角边框*/
            background: aqua;
            text-align: center;/*水平居中*/
            color: rgba(6, 29, 26, 0.68);/*文字颜色*/
            text-decoration: none;/*去掉下划线*/
            margin-right: 10px;/*增大间距*/
            font:bold 20px/50px Arial;/*粗体  字体大小 行高  字体*/
        }

        /*选中存在id属性的元素  a[]{}*/
        a[id]{
            background: chartreuse;/*a标签中带有id属性的元素*/
        }
        a[id=first]{   /*此处的属性值可用于正则表达式*/
            background: #996dff;
        }

        a[class *="links"]{   /*class中含有link的元素 "="是绝对等于，"*="是包含该元素 */
            background: #fdff13;
        }

        a[href^=http]{  /*选中herf中以http开头的元素*/
            background: #4bff50;
        }

        a[href$=jpg]{  /*选中herf中以jpg结尾的元素*/
            background: #3c3fd3;
        }
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.bilibili.com"class="links item first" id="first">1</a>
    <a href=""class="links item active"target="_blank"title="text">2</a>
    <a href="image/123.html"class="links item">3</a>
    <a href="image/123.png"class="links item">3</a>
    <a href="image/123,jpg"class="links item">5</a>
    <a href="abc"class="links item">6</a>
    <a href="/a.pdf"class="links item">7</a>
    <a href="/abc.pdf"class="links item">8</a>
    <a href="abc.doc"class="links item">9</a>
    <a href="abcd.doc"class="links item last">10</a>
</p>

</body>
</html>

三、美化网页元素

3.1字体样式

  1. 要重点展示的元素放入span标签
  2. 文字操作
    • 字体：font-family
    • 大小：font-size
    • 粗细：font-weight
    • 颜色：color
<style>
    body{
        font-family: 楷体;
        color: #4bff50;
    }
    h1{
        font-size: 20px;
    }
    .p1{
        font-weight: lighter;
    }
    
    
    <!--可将所有的属性都写在font后-->
    <style>
        p{
            font:oblique bolder 20px "楷体";    <!--斜体  加粗  字号  字体-->
        }
    </style>

</style>

3.2文本样式

  1. 颜色

    • RGB:0~f
    • RGBA:最后一个参数可设置透明度，一般为0~1
    color: rgba(0,255,255,0.9);

  2. 对齐方式

    text-align: center;

  3. 首行缩进

    text-indent: 2em;

  4. 行高

    • 行高跟块的高度一致才能实现上下居中
    height:50px;
line-height:50px;

  5. 装饰

    • 下划线、中划线、上划线
    • 去掉a标签的下划线：text-decoration : none ;
    .l1{
   text-decoration: underline;
}
.l2{
    text-decoration: line-through;
}
.l3{
    text-decoration: overline;
}

  6. 文本图片水平对齐

    <style>
    img,span{
        vertical-align: middle;
    }
</style>

<p>
    <img src="images/up.png "width="100" height="100" alt="">
    <span>lqy</span>
</p>

3.3超链接伪类

一般使用hover

<style>
    /*默认颜色*/
    a{
        text-decoration: none;
        color: black;
    }
    /*鼠标悬浮状态*/
    a:hover{
        color: #006bad;
        font-size: 20px;
    }
    /*鼠标按住未释放*/
    a:active{
        color: #d316ad;
    }

</style>

3.4阴影

/*text-shadow三个参数
阴影颜色 水平偏移 竖直偏移  阴影半径
*/
#price{
    text-shadow: #ff4469 90px 0px 1px;
}

3.5列表

/*ul li*/
/*
none:去掉圆点
circle:空心圆
decinal:数字
square:正方形
*/
ul{
    background: #a7a7a7;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.6背景

div {
    width: 1060px;
    height: 954px;
    border: 1px solid blue;
    background-image: url("images/b.png"); /*默认全部平铺*/
}
.div1{
    background-repeat: repeat-x;/*水平平铺*/
}
.div2{
    background-repeat: repeat-y;/*竖直平铺*/
}
.div3{
    background-repeat: no-repeat;/*不平铺*/
}

3.7渐变

径向渐变与圆形渐变

background-color: #00DBDE;
background-image: linear-gradient(135deg, #00DBDE 0%, #23ff19 100%);

四、盒子模型

4.1什么是盒子

margen：外边距

padding：内边距

border：边框

4.2边框

  1. h1、ul、li、a、body等存在默认的内外边距，一般在开始时将其都设为0

  2. border三大属性：粗细、样式、颜色

    • solid：实线

    • dashed：虚线

<style>
    /*h1,ul,li,a,body{*/
        /*!*存在默认的内外边距，要根据需求将其置为0*!*/
        /*margin: 0;*/
        /*padding: 0;*/
        /*text-decoration: none;*/
    /*}*/
    /*border:粗细、样式、颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }
    h2{
        font-size: 16px;
        background-color: #4e2aff;
        line-height: 30px;
        color:white;
    }
    form{
        background: #64d354;
    }
    div:nth-of-type(1) input{
        border:3px solid black;
    }
    div:nth-of-type(2) input{
        border:3px dashed #d57ffb;
    }
    div:nth-of-type(3) input{
        border:3px solid #4b31f9;
    }
</style>

4.3内外边距

margin：共四个参数，只填一个时默认上下左右都为该值，两个时为上、左（元素赋值时顺时针旋转）

  • 外边距的妙用：居中元素

    margin: 0 auto;

padding：内边距，属性与外边距一致

<style>

    #box{
        width: 300px;
        border: 1px solid red;
        margin: 0 200px;
    }
    div:nth-of-type(1) {
        padding: 10px;
    }
</style>

盒子的计算方式：margin + border + padding + 内容宽度

在这里插入图片描述

4.4圆角边框

四个角，传入的参数分别按顺时针方向赋给四个角

<!--
左上  右上  右下  左下
-->

<!--
圆圈：圆角 = 半径
-->

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid blue;
        border-radius: 50px 20px 10px;
    }
</style>

图片变为圆形：将border-radius的值设为图片大小的一半

img{
    border-radius: 54px;
}

4.5盒子阴影

box-shadow：左偏移量 下偏移量 模糊半径 颜色

<style>
    img{
        border-radius: 54px;
        box-shadow: 00px 00px 50px #12b4b1;
    }
</style>

五、浮动

5.1标准文档流

块元素：独占一行

  • h1-h6 p div 列表…

行内元素：不独占一行

  • span a img strong…

行内元素可以被包含在块元素中，反之不可以

5.2display

实现行内元素排列的一种方式，但是方向不可以控制，所以大多数情况使用float

  • block：块元素
  • inline：行内元素
  • inline-block：既是行内元素，又是块元素（内联，可以保证在一行）
  • none：消失
<style>
    div {
        width: 100px;
        height: 100px;
        border:1px solid #6ef381;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border:1px solid #6ef381;
        display: inline-block;
    }
</style>

5.3float

浮动起来之后会脱离标准文档流，所以要解决父级边框塌陷问题

  1. 左右浮动：float
div {
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #53f63f solid;
}
.layer01{
    border: 1px #f839a7;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #4db1f8;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #7037f8;
    display: inline-block;
    float: left;
    clear: both;/*清除浮动：保证浮动的前提下，让它是块元素*/
}
.layer04{
    border: 1px #d4d8f8;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;/*清除浮动：保证浮动的前提下，让它是块元素*/
}

5.4父级边框塌陷问题

边框塌陷图示
在这里插入图片描述
解决塌陷图示
在这里插入图片描述

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

解决方法：

  1. 增加父级元素高度

    简单，但是元素假设有了固定的高度就会被限制

    #father{
    border: 1px #53f63f solid;
    height: 800px;
}

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

    • 简单，但是代码要求尽量避免空div
    <div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

  3. overflow：

    在父级元素中增加一个overflow，内容超出设定范围之后，隐藏且可以选择使用滚动条( lesson06 )

    • hidden：隐藏超出部分
    • scroll：设置滚动条
    #content{
    width: 200px;
    height: 150px;
    overflow: hidden;
    overflow: scroll;
}

  4. 在父类添加一个伪类：after（推荐使用）

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

六、定位

6.1 相对定位

相对定位：position: relative;

相对于原来的位置进行指定偏移，相对定位之后仍然在文档流，原来的位置会被保留

  • top: -20px表示上方距离减20
  • right: 20px表示右侧距离加20
<style>
    body{
        padding: 20px;
    }
    div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
    }
    #father{
        border: 1px  solid #000000;
        padding: 0;
    }
    #first{
        background: #fdff13;
        border: 1px  dashed #fdff89;
        position: relative;/*相对定位：上下左右*/
        top: -20px;/*上方距离减20*/
        right: 20px;/*右侧距离加20*/
        bottom:10px;/*底部距离加20*/
    }
    #second{
        background: #ff3fdd;
        border: 1px  dashed #ff3fad;
    }
    #third{
        background: #31fb3b;
        border: 1px  dashed #30fb3b;
        position: relative;
        bottom: -20px;
        right: 20px;
    }
</style>

6.2 绝对定位

绝对定位：position: absolute;

相对于父级或浏览器的位置进行指定的偏移

定位标准：

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，通常会相对于父级元素进行偏移
  3. 在父级元素范围内，不会超出标准文档流，绝对定位之后不在标准文档流中，原来的位置不会被保留
<style>
    body{
        padding: 20px;
    }
    div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
    }
    #father{
        border: 1px  solid #000000;
        padding: 0;
        position: relative;
    }
    #first{
        background: #fdff13;
        border: 1px  dashed #fdff89;
    }
    #second{
        background: #ff3fdd;
        border: 1px  dashed #ff3fad;
        position: absolute;
        right: 30px;
        top: -10px;
    }
    #third{
        background: #31fb3b;
        border: 1px  dashed #30fb3b;
    }
</style>

6.3 固定定位

固定定位：position: fixed;

<style>
    body{
        height: 1000px;
    }
    div:nth-of-type(1){/*绝对定位，相对于浏览器*/
        width: 100px;
        height: 100px;
        background: #4ab0fb;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    div:nth-of-type(2){/*固定定位，滚动条滚动时位置也不会改变*/
        width: 50px;
        height: 50px;
        background: #39fb51;
        position: fixed;
        right: 0;
        bottom: 0;
    }
</style>

6.4 z-index

z-index：默认是0，最高无限

#content{
    width: 300px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位，子元素才可以绝对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 273px;
}
.tipText{
    color: white;
    z-index: 999;/*图层默认为0级，无上限*/
}
.tipBg{
    background: #f5734a;
    opacity: 0.5;/*背景透明度*/
    filter: Alpha(opacity=50);/*背景透明度方法二*/
}
Der_Der996
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值