html中css的基础学习

news2025/7/8 3:41:16

小李胖了吗 I 都说秋天适合思念,其实更适合见面

【小李胖了吗 I 都说秋天适合思念,其实更适合见面】 https://www.bilibili.com/video/BV19g411B7uL/?share_source=copy_web&vd_source=385ba0043075be7c24c4aeb4aaa73352

通过本博文的学习,你可以学到以下知识点和掌握以下知识点。

在这里插入图片描述

什么是css尼

1.1 html的局限性

在这里插入图片描述

1.2 网页的美容师

cSS是层叠样式表( Cascading Style Sheets )的简称.有时我们也会称之为CSS样式表或级联样式表。

CSS是也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式.边距等)以及版面的布局和外观显示样式。

在这里插入图片描述

CSS让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS可以美化HTML,让HTML更漂亮,让页面布局更简单。

1.3 css的语法规范

在这里插入图片描述
效果:
在这里插入图片描述

代码如下:
在这里插入图片描述

1.4 css的代码风格
  1. 样式格式书写
    在这里插入图片描述

  2. 样式大小写风格

在这里插入图片描述

  1. 样式空格风格
    在这里插入图片描述

2. css的基础选择器

2.1 css选择器的作用

在这里插入图片描述

2.2 选择器的分类

  1. 基础选择器

  1. 标签选择器
  2. 类选择器
  3. id选择器
  4. 通配符选择器
  • 复合选择器

在这里插入图片描述

2.3 标签选择器

在这里插入图片描述

作用和优点:
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.4 类选择器

class

.

在这里插入图片描述
语法:

在这里插入图片描述
代码如下:
在这里插入图片描述
效果如下:

在这里插入图片描述

案例使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4.1 多类名的使用方式

在这里插入图片描述

2.4.2 多类名开发中使用场景

在这里插入图片描述

2.5 id选择器

id

#
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.6 通配符选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.7 基础选择器的总结

在这里插入图片描述

3.css的字体属性

cSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

3.1font-family
  • font-family

在这里插入图片描述

示例代码如下:
在这里插入图片描述
效果图:

在这里插入图片描述

3.2 font-size 字体大小

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.3 字体粗细
  • font-weight
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
3.4 font-style(文字样式)

在这里插入图片描述

3.5 字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码。
我们之前的写法:

在这里插入图片描述
现在的写法:
在这里插入图片描述
但是这一般也不怎么用:我们正常来就好啦。

3.6 字体属性总结

在这里插入图片描述

4. css的文本属性

csS Text (文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

在这里插入图片描述

4.2 对齐文本
  • text-align

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4.3 装饰文本
  • text-decoration
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.4 文本缩进
  • text-indent

在这里插入图片描述
在这里插入图片描述

4.5 行间距

在这里插入图片描述
代码如下:

在这里插入图片描述

效果图:

在这里插入图片描述

4.6 文本属性总结

在这里插入图片描述

5.css的引入方式

  1. 行内样式表(行内式)
  2. 内部样式表(嵌入式)
  3. 外部样式表(链接式)

在这里插入图片描述

5.2 内部样式表

在这里插入图片描述

在这里插入图片描述

5.3 行内样式表

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

5.4 内部样式表

style.css中写的

在这里插入图片描述

在HTML中引入样式

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/9118.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

常见的软件测试面试题,千万别答错了

软件测试的童鞋们,在面试测试工作时,一定遇到面试官问过这个问题: 软件测试的目的意义是什么?大家是怎么回答的呢?如果这个问题回答好了,说明你对软件测试工作的价值与意义了如指掌。 有经验的测试人员可…

[数据结构]栈和队列面试题解析

作者: 华丞臧. 专栏:【数据结构】 各位读者老爷如果觉得博主写的不错,请诸位多多支持(点赞收藏关注)。如果有错误的地方,欢迎在评论区指出。 推荐一款刷题网站 👉 LeetCode刷题网站 文章目录一、有效括号题目描述解题思…

freemarker+yml介绍 以及freemarker与JSP的区别

目录 1. freemarker介绍 2. freemarker使用步骤 2.1 在pom.xml引入freeMarker的依赖包 2.2 在springboot中添加freemarker配置 2.3 编写模板文件*.ftl(当做jsp使用即可) ​编辑 2.4 访问控制器后进行页面跳转 3. freemarker常用语法 3.1 取值 3.2 条件 3.3 循环 3…

超赞:不愧是“阿里内部Redis学习笔记”从头到尾,全是精华

近几年,随着移动互联网的飞速发展,我们享受着整个社会的技术进步带来的便利,但同时也给从业者带来了如何保证项目的高并发、低延时的技术挑战,相应的互联网技术也随之发生了重大变革,NoSQL技术得到了蓬勃的发展。 Red…

【JavaSE】抽象类与接口

文章目录抽象类的概念抽象类的语法抽象类的特性接口的概念接口的语法接口的特性多接口的实现接口的继承抽象类的概念 什么是抽象类呢?我们先来看一个例子:一个父类是动物类,两个子类一个狗狗类,一个猫猫类。 Animal中有一个dark…

有趣的statement stack

引子 在使用events_statements_current的过程中发现,同一线程在同一时刻,可能有多条记录,与直观感觉不太一样,于是跟踪了一下内部实现,有了本文。 STATEMENT STACK的定义 STATEMENT STACK 是events_statements_curr…

Linux基础内容(11)—— 进程理解

目录 1.进程状态 1.只针对操作系统的宏观概念 2.Linux的进程状态 1.运行状态(R) 2.休眠状态(S) 3.暂停状态/浅度睡眠状态(T) 4.深度睡眠状态(D) 5.当前进程正在被追踪(t) 6.死亡状态(X) 7.僵尸状态(Z) 8.孤儿进程 2.进程的优先级 1.优先级定义 2.Linux的优先级表现…

matlab 小数据法求liyapunov指数

1、内容简介 略 625-可以交流、咨询、答疑 2、内容说明 摘 要:从 Lyapunov 指数的定义出发:在常用计算最大 Lyapunov 指数的基础上,将自相关法和 G-P 法应用于小数 据量法中,得到了一种计算最大 Lyapunov 指数的改进小数据量法…

推特的算法规则你知道多少?

如果玩Twitter却不明白Twitter算法是如何运作的,就如同贸然出征却忘了带上武器。 社交媒体的算法正在成为你在平台中所见内容的核心,当知晓了该平台的推荐算法,自然也就知道发布什么样的内容有助于被更多用户看到。因此,了解了算…

Spring之依赖注入

文章目录前言一、set注入1.1 UserDao类:1.2 UserService类:1.3 spring.xml配置文件:1.4 测试类:1.5 执行结果:二、构造方法注入2.1 UserDao2.2 UserService类:1.3 spring.xml配置文件:2.4 测试类…

微服务改造过程中那些必须重视的问题

“微服务”近几年尤其火热,各大厂都在进行微服务化改造和微服务建设,想享受微服务化带来的好处以便对自己的系统进行改造。分布式实验室特约记者李鹏采访了广州轻阅科技系统架构师陈珙,就微服务与SOA的区别与联系、企业引入微服务会带来的问题…

Vue2:官方路由 Vue-Router 3.x

前端路由 前端路由:根据不同的url地址,页面上展示不同的内容(根据url地址的不同分发到不同的组件。) SPA 介绍 spa 是 single page application 简写,意思是单页面应用程序。Vue 适合开发 spa 类型的项目。 优点&…

Django 所带的用户auth_user的坑点,authenticate()校验一直为None,校验与创建所遇到的问题整理与解决

整理一下django中用户模块自定义model后登录的一些问题: 网上的报错解决不是万能方案,主要还是要自主分析原因,有的是有用但是导包之类的也要看清楚因为自己修改了所以有所变得,不自定义的话又不太好用。 在项目初期决定使用auth…

鸡卵白蛋白偶联脂多糖(OVA-LPS),麻黄多糖修饰卵白蛋白(PB-OVA)

产品名称:鸡卵白蛋白偶联脂多糖 英文名称:OVA-LPS 用途:科研 状态:固体/粉末/溶液 产品规格:1g/5g/10g 保存:冷藏 储藏条件:-20℃ 储存时间:1年 脂多糖(Lipopolysacchar…

第四站:数组

目录 一、一维数组的创建和初始化 1.数组的创建 (1)基本定义,创建方式 (2)经典的错误标准的零分 2.数组的初始化 3.一维数组的使用 4.一维数组在内存中的存储 二、二维数组的创建和初始化 1.二维数组的创建 2…

SpringBoot SpringBoot 开发实用篇 2 配置高级 2.2 松散绑定

SpringBoot 【黑马程序员SpringBoot2全套视频教程,springboot零基础到项目实战(spring boot2完整版)】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇2 配置高级2.2 松散绑定2.2.1 问题引入2.2.2 松散绑定2.2.3 小结2 配…

MySQL学习笔记:模型2

序言 《MySQL45讲》 为什么表数据删除一半,表文件大小不变? 表数据既可以存在共享表空间里,也可以是单独的文件。这个行为是由参数 innodb_file_per_table 控制的: 这个参数设置为 OFF 表示的是,表的数据放在系统共…

错字修改 | 布署1个中文文文本拼蟹纠错模型

内容一览:中文文本错误的种类之一为拼写错误,本篇文章为利用 BART 预训练方法实现中文文本纠错功能的模型部署教程。 关键词:BART 中文拼写纠错 NLP 本文首发自微信公众号:HyperAI超神经 中文文本错误3大障碍:拼写、语…

Chapter9.1:线性系统的状态空间分析与综合(上)

此系列属于胡寿松《自动控制原理题海与考研指导》(第三版)习题精选,仅包含部分经典习题,需要完整版习题答案请自行查找,本系列属于知识点巩固部分,搭配如下几个系列进行学习,可用于期末考试和考研复习。 自动控制原理(…

第六节.常用Linux命令—chmod修改目录权限,组管理,用户管理

第六节.常用Linux命令—chmod修改目录权限,组管理,用户管理 1. chmod:可以修改用户/文件/目录的权限 1).命令格式: chmod(代表增加权限)/-(代表减少权限) r(可读权限)w(可写权限)x(可执行权限) 文件名/目录名 2.组管理: 1).终端…