WEB入门浅谈02

最新推荐文章于 2022-01-21 17:17:31 发布
最新推荐文章于 2022-01-21 17:17:31 发布
阅读量684 收藏
点赞数 1
分类专栏： WEB专栏 文章标签： css web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52793965/article/details/119187378
版权

WEB入门浅谈02

CSS

CSS全称Cascading Style Sheets ，也叫层叠样式表。CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。CSS是键值对形式的结构，key表示CSS不同的属性，而value表示不同属性的值，其中key和value中间用：连接，键值对与键值对之间用；进行分割
CSS主要写在三个位置：
1、在 html 文件的标签内用标签的 style 属性来指定（内联样式）
2、在 html 文件内以<style>标签包裹来指定各种标签的样式（内部样式）
3、在 html 中用 link 标签来引入外部文件后缀为 .css 文件的形式来指定 html 文件标签的样式（外部样式）
若需要调用外部样式，则需要使用link标签显示的引入，一个html文件可以引入多个外部样式(link标签)：
rel表示文件的类型，herf表示文件的路径

<link rel="stylesheet", href="p_style.css">

在CSS中，注释用/* */，与html不同
CSS基本的语法结构如下：

/*选择器 {
	属性名:属性值
}
如：*/

p{
    text-indent: 2em;
}
选择器

CSS中的选择器种类非常多，常用的有：标签选择器、id选择器、类选择器、子元素选择器

标签选择器

标签选择器：直接写标签名，表示选中该页面中所有的对应名字的元素
如上就是选择了该页面所有的p元素（p标签），也叫元素选择器

<!doctype html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
    
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
	<p>123</p>
	<p>123123123123</p>
	<p>
	这是一个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已经
	忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，故
	事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏这
	首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们都
	经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
	<p>
	这是第二个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已
	经忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，
	故事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏
	这首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们
	都经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
</body>
</html>
ID选择器

由于标签选择器会选中该页面所有同名标签，用起来会有很多不便之处，所以在这种情况下就可以使用ID选择器，需要先给html中需要修改样式的标签给定一个ID值，再通过ID选择器选中改元素
如下，CSS中所选的标签就是id为p1的标签
一个html文件中，id是唯一的，不能重复

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #p1{
            text-indent: 2em;
        }
    </style>
</head>
<body>
	<p id="p1">
	这是一个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已经
	忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，故
	事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏这
	首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们都
	经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
	<p>
	这是第二个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已
	经忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，
	故事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏
	这首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们
	都经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
</body>
</html>
类选择器

由于id选择器要求id唯一，如果要选择多个，此时就不能使用id选择器了，但是可以使用类选择器
类选择器是一个非常灵活的选择器，它可以选择任意多的元素来应用相同的属性
类选择器与标签无关，只要是该页面的标签即可

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pp{
            text-indent: 2em;
        }
    </style>
</head>
<body>
	<p class="pp">
	这是一个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已经
	忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，故
	事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏这
	首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们都
	经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
	<p class="pp">
	这是第二个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已
	经忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，
	故事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏
	这首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们
	都经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
	<p>
	这是第二个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已
	经忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，
	故事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏
	这首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们
	都经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
</body>
</html>
子元素选择器

有了子元素选择器就可以更准确的指定某个范围的元素来进行选择，而避免改一处样式，影响太多其它样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div h3{
        	text-indent: 2em;
        }
    </style>
</head>
<body>
	<h3>hello</h3>
	
        <div>
            <h3>world</h3>
        </div>
</body>
</html>

这些类选择器都可以搭配着使用，如类选择器+子元素选择器：.pp div就表示选择class为pp的子元素div标签，这样就相当于复合选择器

CSS的常用属性

CSS属性参考： w3school

字体的相关属性

font-family : 字体的种类
要确保电脑上安装了这个字体，如果没有安装，就无法正常显示

font-size : 字体的大小
选中元素后在开发者工具里可以实时调整

font-weight : 字体的粗细
可以填数值，也可以填 bold（加粗，相当于700） 、 bolder 、 lighter 、 normal（正常，相当于400）

#lit{
    font-family: 华文行楷;
    font-size: 30px;
    font-weight: 700;
}

在这里插入图片描述

文本的属性

color : 设置文本的颜色
计算机使用 RGB 来表示颜色 R 就表示 红色 ， G 就表示 绿色 ， B 就表示 蓝色
使用三个字节来分别表示 R G B ，一个字节的表示范围为0~255
在计算机上使用截图可以查看鼠标位置的 RGB ，截图时按 C键 可以复制当前RGB ，如：
#FF0000(红色) 相当于#F00
#0000FF(蓝色) 相当于#00F
#00FF00(绿色) 相当于#0F0
#FFFFFF(白色) 相当于#FFF
#000000(黑色) 相当于#000

文本的对齐方式：
text-align : left 文本左对齐
text-align : right 文本右对齐
text-align : center 文本居中

line-height : 文本的行高
这并不是word里的行距，这是每一行文字的高度（包括文字）如果行高与文字像素一样大，则两行文字将没有间隔。小于文字像素时，两行文字将重叠。

#lit{
    color: rgb(252,25,68);
    background-color: rgb(181,230,29) ;
    text-align: center;
    line-height: 100px;
}

在这里插入图片描述

背景的属性

background-color : 设置背景颜色
使用方法与设置字体颜色的 color 相似

background-image : url(图片路径) 设置背景图片

background-repeat 设置平铺情况
默认情况下，背景是平铺的
如果不需要就写为background-repeat: no-repeat;
也可以水平平铺background-repeat: repeat-x;
或者垂直平铺background-repeat: repeat-y;

background-position 设置背景位置
可以设置为居中显示background-position : center center
也可以具体位置(可以填写数值)background-position : center bottom

background-size 设置背景尺寸
设置其宽度与浏览器宽度相同（高度同比例增长）background-size : cover
同理 高度与浏览器高度相同（同样的，也可以填写数值）background-size : contain

所有颜色可以使用rgba来设置透明度

body{
    background-image: url("image/背景图05.jpg") ;
    background-repeat: no-repeat;
    background-position : center center;
    background-size : cover;
}
#lit{
    color: rgb(252,25,68);
    background-color: rgba(125,161,174,0.4);
    text-align: center;
    line-height: 100px;
}

在这里插入图片描述

盒模型

每一个 html 元素（标签）在页面中都是一个矩形（盒子），我们可以通过CSS来设置这些盒子的属性如：

width 盒子的宽（也就是html文件中元素/标签的宽）
也可以写为100%，比例是以父元素为基准的，如果设置在body里的div标签上，则这个div标签的宽度就是整个body标签的宽度，
由于div是块级元素，所以会撑大父元素的宽度，而span则不会

height 盒子的高（也就是html文件中元素/标签的高）
与宽相同

设置元素为块级元素（行内元素）
盒子的尺寸设置是针对块级元素的，设置行内元素时不会生效，行内元素的尺寸完全是由内部的内容撑起来的，如果想让行内元素有宽度和长度，就需要添加display属性
块级元素display: block; 行内元素display: inline; 行内块元素display: inline-block;

#lit{
    background-color: #0FFFF0;
    height: 400px;
    width: 400px;
}

在这里插入图片描述

元素的边框
使用border属性来元素的边框的三个值，分别是 边框的粗细，边框的风格，边框的颜色 如 border: 5px solid #000;
默认情况下，边框会撑大盒子

dotted - 定义点状的边框
dashed - 定义虚线的边框
solid - 定义实线的边框
double - 定义双线的边框
groove - 定义 3D 凹槽边框
ridge - 定义 3D 凸槽边框
inset - 定义 3D 凹边边框
outset - 定义 3D 凸边边框
none - 定义无边框
hidden - 定义隐藏的边框

边框撑大盒子会影响设计，我们可以通过box-sizing来设置。
边框不撑大盒子box-sizing: border-box;（300*200）

#lit{
    height: 200px;
    width: 300px;
    border: 5px solid #000;
    box-sizing: border-box;
}

在这里插入图片描述

边框撑大盒子box-sizing: content-box;（310*210 上下左右边框 5像素 所以为200+10px ）

#lit{
    height: 200px;
    width: 300px;
    border: 5px solid #000;
    box-sizing: content-box;
}

在这里插入图片描述
内边距：边框到内容之间的距离（图中绿色部分）
通过padding指定内边距（四个方向）
内边距也会导致盒子撑大
padding: 20px;可以给一个值对四个方向同时进行设置，也可以给四个值，对上右下左的顺序进行设置

写一个值表示四个方向的值
写两个值表示 垂直 水平 的值
写四个分别表示 上 右 下 左 的值

外边距：盒子到盒子之间的距离（图中最外面依次橘色部分）
通过margin指定外边距
可以使用 margin : 0 auto 0 auto 进行水平居中显示, 也可以给四个数字 按照上右下左的顺序

内边距和外边距也可以只设置某一边的距离

#lit{
    height: 200px;
    width: 300px;
    border: 5px solid #000;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
}

在这里插入图片描述

页面的布局

布局，就是把指定的元素放在合适的位置上
浏览器的默认布局方式： 文档流
对于块级元素，每个块级元素独占一行，块级元素的宽度默认与父元素一样
对于行内元素，不独占一行，彼此之间首尾相接

实现水平布局的方式
1、经典：浮动布局 float 有较多副作用
2、弹性布局 flex 推荐
3、网格布局 grid 下一代布局方式

使用display: flex; 开启弹性布局（在父元素中使用）则其中子元素就会按照弹性规则的顺序进行排列了

通过父元素的justify-content属性来设置子元素水平方向上的排列

通过父元素的align-items属性来设置子元素垂直方向上的排列

补充

如何在一个元素中让文字在 本行 的 垂直方向 居中 显示：

/*当行高与元素盒子高度相同时，文字在盒子中间，大于时在中间偏下，小于时，在中间偏上*/
p{
	line-height:100px
	height:100px
}

在之前有块级元素和行内元素，但是像img这种标签，他不独占一行，又能设置尺寸，这种标签被称为行内块元素。

我们之前在java里接触的命名法为驼峰命名法，分为大驼峰和小驼峰 如 TestDemo
在MySQL里的一些变量名用蛇形命名法 如 user_id
现在CSS里属性又叫做脊柱命名法 如 line-height

LIT-涛
关注
专栏目录
Lit：介绍、项目搭建
weixin_41897680的博客
06-07 4643
Lit：介绍、项目搭建
WEB入门浅谈01
weixin_52793965的博客
07-25 481
WEB前端的浅谈01
WEB入门浅谈21
weixin_52793965的博客
01-18 559
WEB入门浅谈21多线程synchronized工作原理无锁偏向锁轻量级锁重量级锁synchronized锁优化锁消除锁的粗化CallableJUC的其它组件ReentrantLockSemaphoreCountDownLatch补充 多线程 synchronized工作原理 JVM将synchronized锁分为了 无锁、偏向锁、轻量级锁、重量级锁 状态，会根据具体情况，依次升级。 这整个锁策略自动切换的过程也就是锁升级，就叫做 锁膨胀 都是由synchronized内部完成的。目的就是为了在不同场景下使
WEB入门浅谈03
weixin_52793965的博客
07-29 690
WEB前端入门浅谈02JavaScript JavaScript JavaScript是运行在浏览器上的，功能就是控制页面与用户之间进行交互
WEB入门浅谈22
weixin_52793965的博客
01-21 728
WEB入门浅谈22JVMJVM的内存区域划分垃圾回收识别垃圾的手段垃圾回收算法标记清除复制算法标记整理分代回收垃圾回收器类加载初始化流程双亲委派模型补充 JVM JVM全称 Java Virtual Machine。就是java的虚拟机，虚拟机就是软件模拟出来的 “计算机” ，是一个运行平台。虚拟机诞生的意义就是为了跨平台。 最初，操作系统种类很多，CPU种类也很多，C/C++就遇到一个致命难题，写的代码换平台后就很难运行通过。于是后面的语言如 java python go等都带有虚拟机（但是现在基本都不用
WEB入门浅谈17
weixin_52793965的博客
12-27 3183
WEB入门浅谈17多线程 多线程 进程是为了实现并发编程的效果，但为了追求更高的效率就引进了线程 创建一个进程和销毁一个进程，开销比较大(进程管理中存在一些系统分配的资源，申请和释放这些资源不是一个容易的事)，因此就希望能够更高效，更轻量的完成并发编程。于是就通过线程来完成 线程也被称为 轻量级进程 每个线程就对应到一个 独立的执行流 ，在这个执行流里就可以完成一系列的指令。有多个线程，就对应的有多个执行流，就可以并发的完成多个系列的指令了 一个进程包含了多个线程。一个进程从操作系统中申请了很多资源，进程统
WEB入门浅谈20
weixin_52793965的博客
01-17 3219
WEB入门浅谈20多线程锁策略乐/悲观锁读写锁重/轻量级锁（非）公平锁（不）可重入锁死锁CAS机制总结 多线程 锁策略 乐/悲观锁 乐观锁：出现锁竞争的概率较低（线程少，不太涉及锁竞争） 悲观锁：出现锁竞争的概率较高（线程多，很可能涉及锁竞争） 在操作系统中提供的锁接口，Mutex（互斥量，操作系统的锁），就是一个典型的悲观锁，认为竞争很大，一旦竞争，那么就有线程阻塞，进入等待，而什么时候被唤醒，就要看调度器的实现了 在应用程序里面，还可以通过一些其它的方式实现锁（如：CAS），相当于仅仅一个 用户态的锁，
WEB入门浅谈07
weixin_52793965的博客
09-03 235
WEB前端入门浅谈07HTTP报头一些重要的属性HTTPS补充 HTTP报头 一些重要的属性 HOST：描述了服务器（主机）的地址 ， 有的时候URL会省略域名，默认访问的地址就是html所在的地址下。 Connection：keep-alive 表示浏览器和服务器之间使用长连接 User-Agent：简称UA，里面就包括了用户设备的操作系统和浏览器的类型和版本，现在主要区分手机和电脑。 Referer：这个属性表示当前页面是从哪个页面跳转过来的，也就是前始页，如果是直接在地址栏中输入url来访问，一般是没
WEB入门浅谈05
weixin_52793965的博客
07-30 268
WEB前端入门浅谈05JavaScriptDOM API创建/删除元素 JavaScript DOM API 创建/删除元素 创建元素的过程可以理解为在DOM树上添加新节点 1、创建新的节点document.createElement('li');引号内就是要新建的标签名 2、寻找合适的位置，把这个节点添加到这棵树上ul.appendChild(li); <ul></ul> <button onclick="addLi('qqq')">增加</but
WEB标准,Web前端工程师定位浅谈
12-10
先给前端工程师的工作下个一句话定义：运用前端技术，实现体验的良好传达。如果在前面加上Web，那么是针对Web这个领域的，主要是互联网，也可以将移动通信...前者等下次有机会再谈，先讲后者。Web前端工程师如何定位
浅谈spring security入门
08-18
"浅谈spring security入门" Spring Security是一个功能强大且广泛使用的Java安全框架，提供了完整的认证和授权解决方案。下面是春季安全入门的知识点总结： Spring Security的模块介绍 Spring Security的核心模块...
初学Python 浅谈入门篇
12-21
主要是写给想学python的同学 初学Python那些事1. 什么是python2. python怎么运行2.1 下载python（编程环境）2.2 下载pycharm（开发工具）3....Web 开发 科学计算和统计 人工智能 桌面界面开发 软件
线程的创建
weixin_52793965的博客
12-25 1440
线程的创建创建线程继承Thread类实现Runnable接口匿名Thread类匿名Runnable接口使用lambda表达式补充 创建线程 继承Thread类 实现Runnable接口 通过匿名Thread类 通过匿名Runnable接口 使用lambda表达式 继承Thread类 创建一个类，继承自Thread 重写Thread的run方法，在新的run中编写执行流 创建子类实例 调用子类的start方法 class MyThread extends Thread{ @Override p
WEB项目-音乐播放器
weixin_52793965的博客
09-21 1283
音乐播放器需求分析 需求分析
WEB入门浅谈18
weixin_52793965的博客
01-07 606
WEB入门浅谈18多线程线程的状态线程安全synchronized 锁volatile对象等待集单例模式饿汉模式懒汉模式补充 多线程 进程的调度 操作系统实际调度的基本单位是线程 操作系统内核里为了管理所有的进程（线程），有一个链表。链表中存储了当前进程的pid以及当前线程的tid 系统内核中有一个专门的等待队列和就绪队列 当执行sleep时，就是让这个线程进如等待队列中，而等待完成后就进入到就绪队列中。 线程只有在就绪队列里，才可能被执行。 等待队列中可能会有多个线程，所以等待队列并不是一个先进先出的队列
WEB入门浅谈13
weixin_52793965的博客
09-29 540
WEB入门浅谈13网络原理OSI 七层模型TCP/IP端口号UDP协议TCP三次握手四次挥手实例分析补充 网络原理 两个主机一系列的约定就叫做协议，协议中约定的细节就表示传输的数据表达的意义，两个主机之间传输数据的本质就是光电信号，表示1/0这样的bit流 由于任意两台主机之间都需要进行通信，所以所有主机都遵守同一个协议，彼此才能进行交流 网络通信要规定的细节是非常多的，如果放在一起就会显得非常复杂，把不同的细节由不同的协议规定，于是就有了很多协议，又根据协议的功能类型，把这些协议分为 协议栈/协议族 OS
如何用多线程提高代码效率
weixin_52793965的博客
12-25 525
如何用多线程提高代码效率代码目的单线程代码多线程代码补充 代码目的 把两个long类型的数分别自增10E次 单线程代码 public class Demo01 { private static long count = 1_000_000_000; public static void serial(){ long begin = System.currentTimeMillis(); long a = 0; for (long i = 0;
移动Web开发入门：理解PPI与像素概念
本篇着重于"浅谈移动Web开发--深入概念（上）"，首先介绍了PPI（像素密度）这一核心概念。 PPI，即每英寸像素，用来衡量屏幕的像素密集度。在讨论显示设备的PPI时，它指的是屏幕在单位面积内包含的像素数量，数值越...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值