css引入方式、颜色、基本选择器(ID、class、标签)、高级选择器(分组-子类-后代-兄弟-相邻兄弟-过滤-属性-通配符-伪类-伪元素-新增)、优先级、属性、元素分类、浮动、定位、弹性盒模型

最新推荐文章于 2022-11-21 19:03:28 发布

Tony-1fan

最新推荐文章于 2022-11-21 19:03:28 发布

阅读量417

点赞数 1

分类专栏：前端文章标签： css webstorm java html5

本文链接：https://blog.csdn.net/qq_39497997/article/details/112756711

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1. webstorm的安装

2. 编写网页的神器(emmnet表达式)

+: 同级
>:下一级

3. css

css: 层叠样式表,级联样式表

4. CSS的引入方式

4.1 内联方式引入样式

<span style="color:red; font-size: 120px">我是中国人</span>

优点: 使用简单

缺点: 属性要是太多不方便修改,没有做到内容与样式相分离

这种方式只适合在测试环境写少量的样式

4.2 内部方式引入样式

<style>
    span {
        color: red;
        font-size: 30px;
    }
</style>

优点: 把当前页面多有的css可以写在一块了

缺点: 没有实现完全的 内容与样式相分离

只是适合在测试环境使用

4.3 外部方式引入样式

<!--使用link引入外部css;   需要添加rel属性-->
<link href="./base.css"  rel="stylesheet">

优点: 内容与样式彻底分离,可以按需引入

可以在生产环境直接使用

5. CSS中的颜色的写法

常用的颜色可以写英文
16进制的颜色值的写法 background-color: #cccccc;
RGB颜色值的写法 background-color: rgb(255,0,0);
RGBA的写法(带透明度的写法); 最后一个值是透明度 0-1,之间的小数; color: rgba(255,0,0,0.5);

6. CSS的基本选择器

ID选择器

#id值{
    属性名称:属性值;
    ....
}

Class选择器

.类名{
   属性名称:属性值;
    ....
}

标签选择器

标签名称{
   属性名称:属性值;
    ....
}

7 CSS的高级选择器

7.1 分组选择器

选择器1，选择器2...{
	css属性名称：属性值
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组选择器</title>
    <style>
        .s1, p {
            color: #ff0000;
        }
    </style>
</head>
<body>
    我在学习<span class="s1">JAVA</span>
    我在学习<span class="s2">C++</span>
    我在学习<span class="s1">Python</span>

    <p>现在</p>
    <p>将来</p>
</body>
</html>

在这里插入图片描述

7.2 子类选择器

父类选择器>子类选择器{
	css属性名称：属性值
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子类选择器</title>
    <style>
        ul>li{
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li>JAVA</li>
    <li>C++</li>
    <li>Python</li>
    <li>Hadoop</li>
</ul>

<li>政治</li>

</body>
</html>

在这里插入图片描述

7.3 后代选择器

父类选择器 后代选择器{
	css属性名称：属性值
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ul span{
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <span>学习的内容</span>
    <li>JAVA</li>
    <li>C++</li>
    <li>Python</li>
    <li>Hadoop</li>
</ul>

<ul>
    <li><span>政治</span></li>
    <li><span>历史</span></li>
</ul>

<span>体育</span>

</body>
</html>

在这里插入图片描述

7.4 兄弟选择器

选择的是从当前元素后边所有的兄弟。

#di~li{
	color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        #d1~li{
            color: red;
        }
    </style>
</head>
<body>
<ul>
	<li>666</li>
    <li id="d1">JAVA</li>
    <li>C++</li>
    <li>Python</li>
</ul>
</body>
</html>

在这里插入图片描述

7.5 相邻兄弟选择器

选择的是从当前元素后边的第一个兄弟。且中间不能有分割的。

#di+li{
	color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        #d1+li{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>666</li>
    <li id="d1">JAVA</li>
    <li>C++</li>
    <li>Python</li>
</ul>
</body>
</html>

在这里插入图片描述

7.6 过滤选择器

h1和.box2之间没有空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <style>
        h1.box2{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="box1">div1</h1>
    </div>

    <div>
        <h1 class="box2">div2</h1>
    </div>

    <span class="box2">span</span>
</body>
</html>

在这里插入图片描述

7.7 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*包含属性name=age的input*/
        input[name="age"] {
            background-color: #ccc;
        }
    </style>
</head>
<body>
<input name="nickname" type="text" placeholder="请输入姓名"><br>
<input name="age" type="text" placeholder="请输入年龄"><br>
<input name="sex" type="text" placeholder="请输入性别"><br>
<input type="text" placeholder="请输入身高"><br>
</body>
</html>

在这里插入图片描述

7.8 通配符选择器

*表示所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>666</li>
    <li id="d1">JAVA</li>
    <li>C++</li>
    <li>Python</li>
</ul>
</body>
</html>

在这里插入图片描述

7.9 伪类选择器

a:hover
标滑过变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*鼠标滑过变化*/
        a:hover{
            color: pink;
        }
    </style>
</head>
<body>
<a href="#">点击我</a>
</body>
</html>

在这里插入图片描述

7.10 伪元素(对象)选择器

.box::before
.box::after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        .box{
            /* #ffffff  或者 rgb(255,255,255)*/
            background-color: #cccccc;
            height: 200px;
            width: 500px;
        }
        .box::before{
            content: "前面加的内容";
        }
        .box::after{
            content: "后面加的内容";
        }
    </style>
</head>
<body>
    <p class="box"> 政治 </p>
</body>
</html>

在这里插入图片描述

7.11 css3中新增的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3中新增的选择器</title>
    <style>
        /* ul>li:first-child  第一个子元素*/
        ul>li:first-child{
            color: red;
        }
        /* ul>li:last-child  最后一个子元素*/
        ul>li:last-child{
            color: green;
        }
        /* ul>li:nth-child(n)  第n个子元素*/
        ul>li:nth-child(2){
            color: yellow;
        }
        /* ul>li:nth-child(2n)  第2n（偶数）个子元素*/
        ul>li:nth-child(2n){
            color: yellow;
        }
        /* ul>li:nth-of-type  忽略打断的元素*/
        ul>li:nth-of-type(5){
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>JAVA</li>
            <li>C++</li>
            <li>Python</li>
            <li>JAVA</li>
            <li>C++</li>
            <li>Python</li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

8 css选择器的优先级

css后面的样式覆盖前面的样式（相同权重下）
id>class>标签

9 css的宽高属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css宽高属性</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="box">

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

在这里插入图片描述

10 前端开发调试神器（Google开发者工具箱）

F12
Ctrl+Shift+i

11 字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        span{
            font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;/*字体默认是微软雅黑*/
            font-size: 18px;/*字体大小默认是16px*/
            font-style: italic;/*默认是普通的，italic是html中最轻量的标签*/
            font-weight: 800;/*bold是粗体，lighter是细体，还可以是磅数*/
            color: aqua;/*字体颜色*/
        }
    </style>
</head>
<body>
<span>我在学习JAVA</span>
</body>
</html>

在这里插入图片描述

12 列表属性

list-style: none;/*none取出列表前边原点或数字*/

13 (链接)文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接文本属性</title>
    <style>
        a{
            text-decoration-color: red;/*线条颜色*/
            text-decoration-line: line-through;/*穿过字体*/
            text-decoration-width: 220px;
            text-decoration-style: solid;/*线型 默认solid实线*/

			text-decoration: none;/*去掉线*/
        }
    </style>
</head>
<body>
<a href="#">点击我</a>
</body>
</html>

14 图片属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片属性</title>
    <style>
        .box{
            width: 2000px;
            height: 1500px;
            background-color: pink;
            background-image: url("./image/image.jpg");
            background-size: auto;
            background-repeat: no-repeat; /*不平铺*/
            background-position: 100px 100px;/*一般用像素调(网页上)*/
        }
    </style>
</head>
<body>
<div class="box">

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

在这里插入图片描述

15 行高属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高属性</title>
    <style>
        h1{
            width: 150px;
            height: 60px;
            background: pink;
            line-height: 60px;/*行高与父元素height一样就竖直居中*/
        }
    </style>
</head>
<body>
    <h1>我爱学习</h1>
</body>
</html>

在这里插入图片描述

16 文本对齐方式

元素中的文本相对于元素对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐方式</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        h1{
            background: yellow;
            text-align: center;/*元素中的文本相对于元素 对齐方式*/
        }
    </style>
</head>
<body>
<div class="box">
    <h1>我爱学习</h1>
</div>
</body>
</html>

在这里插入图片描述

17 盒子模型

在html中，所有的元素都是盒子

17.1 边框属性(border)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box1 {
            width: 400px;
            height: 200px;
            background: red;
            /*边框属性*/
            /*border-color: yellow;!*边框颜色*!
            border-width: 5px;!*边框宽度*!
            border-style: solid;!*边框样式*!*/
            border-bottom: 10px solid yellow;
        }
        .box2 {
            width: 500px;
            height: 300px;
            background: green;
            border: 10px solid blue;
        }

    </style>
</head>
<body>
<div class="box1">box1</div>

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

在这里插入图片描述

17.2 内边距(padding)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            width: 200px;/*内容的宽高属性*/
            height: 200px;
            border: 4px solid red;
            /*padding-bottom: 20px;*/
            padding: 20px 30px;/*第一个上下，第二个左右*/
            padding: 20px 30px 40px;/*上 左右 下*/
            padding: 20px 30px 40px 50px;/*上右下左*/
            
        }
        .box2{
            width: 300px;
            height: 300px;
            border: 8px solid green;
        }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

在这里插入图片描述

17.3 外边距(margin)

和内边距(padding)用法一样
外边距不是盒子大小，盒子边界是border

17.4 盒子大小

默认属性：content-box。加上内边距和边框会撑大盒子
border-box：不会撑大盒子，会压缩内容的大小

			box-sizing: border-box;!*盒子大小不变*!
            /*box-sizing: content-box;/*盒子大小会变*/

在这里插入图片描述

18 css中的元素的分类

行内元素(span,i,a)：默认宽度是包裹内容的，设置宽高无效，不会独占一行
块(级)元素(div,ul)：默认宽度是填充父元素的，能设置宽高，独占一行
行内块(级)元素(input,img)：默认宽度是包裹内容的，能设置宽高，不会独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的分类</title>
    <style>
        span {
            background-color: aqua;

            width: 200px;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
        }
        input{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<span>我爱学习</span>
<span>我爱打游戏</span>

<a href="http://www.baidu.com">百度</a>
<a href="http://www.bilibili.com">Bilibili</a>

<div class="box1">块元素</div>
<div class="box2">块元素</div>

<input type="text">
<input type="text">
</body>
</html>

在这里插入图片描述

19 css中的浮动

文档流：文档从上而下或从从左往右的排列方式

浮动的元素会脱离文档流
设置的浮动的元素会变成行内块元素

		/*设置浮动*/
        float: left;
        /*清除浮动*/
        clear: both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动属性</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: #cccccc;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /*设置浮动*/
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
        h1{
            /*清除浮动*/
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <h1>我爱学习</h1>
    <h2>我爱学习</h2>
</div>

</body>
</html>

在这里插入图片描述

20 手动改变元素类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动改变元素类型</title>
    <style>
        span{
            /*display: none*/
            /*display: block;*/
            display: inline-block;
            margin-left: 30px;

            background-color: red;
        }
    </style>
</head>
<body>
<span>我爱学习</span>
</body>
</html>

21 css中的定位

相对定位

相对定位元素不会脱离标准的文档流，以自身为参照进行定位

			/*相对定位*/
            position: relative;
            top : 100px;
            left: 100px;

绝对定位

			/*绝对定位*/
            position: absolute;
            top : 100px;

脱离标准的文档流，定位时首先看父类是否设置定位方式，如果设置了就以父元素为参照定位；如果没有就依次向上查找；如果都没找到，则以body为参照进行定位

固定定位

			/*固定定位*/
            position: fixed;
            top : 100px;

脱离标准的文档流，永远以浏览器的窗口为参照进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #cccccc;
        }
        .box1 {
            width: 50px;
            height: 50px;
            background-color: red;
            /*相对定位*/
            position: relative;
            top : 10px;
            left: 0px;
        }
        .box2 {
            width: 50px;
            height: 50px;
            background-color: blue;
            /*绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
        }
        .box3 {
            width: 50px;
            height: 50px;
            background-color: green;
            /*固定定位 */
            position: fixed;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>
</body>
</html>

在这里插入图片描述

22 css中的浮动和定位使用建议

实际开发中尽量不使用浮动，能不用则不用。因为会破坏标准的文档流，而且浮动之后元素不方便控制。
定位要遵循父相子绝的方式使用

23 网页布局

最原始的时候用table做布局，但是现在用的少
现在一般使用div+css做布局
弹性盒模型布局

24 弹性盒模型布局(`flex布局`)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒模型布局</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: #cccccc;
            display: flex;/*弹性盒子*/
            flex-wrap: wrap;/*默认是nowrap，折行*/
            flex-direction: column;/*盒子里内容的排列方向，默认是row*/
            justify-content: center;/*主轴上的对齐方式*/
            align-items: center;/*副轴上的对齐方式*/
        }
        .box1{
            height: 100px;
            background-color: aqua;
            flex: 1;
        }
        .box2{
            height: 100px;
            background-color: green;
            flex: 1;
        }
        .box3{
            height: 100px;
            background-color: yellow;
            flex: 1;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>
</body>
</html>