当前位置: 首页 > news >正文

HTML第三节

一.初识CSS

1.CSS定义

A.内部样式表
B.外部样式表 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./第一次.css">
</head>
<body><p>这是p标签</p><div>这是div标签</div>
</body>
</html>
P{color: aquamarine;
}
div{color: brown;font-size: 30px;
}
 C.行内写法

二.选择器

1.标签选择器

注:1.所有的p标签都会设置成一个格式 

2.类选择器 (差异化)

注:1.先定义类,再使用类

2.一个class属性可以使用多个类名

3.定义类前面要加.

3.id选择器

 

 

 4.通配符选择器

 

注:作用:清除页面中所有标签的默认格式,方便后续设置每一项格式 

三.利用类选择器画盒子

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red{width: 100px;height: 100px;background-color: red;}.orange{width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

 四.文字控制属性

(一) 字体大小

注:1.默认字体大小为16px 

(二)字体粗细 

 (三)字体倾斜

 

注:1.字体倾斜不好看,一般用font-style清除文字的倾斜效果 

(四)行高

1.行高的书写方法

 

2.行高的测量方法

 3.垂直居中

注:1.盒子高度即为height,好像涉及盒子模型 

 (五)字体族

注:1.从左向右依次查找,先找到哪个就用哪个 

 (六)font属性

注:1. 具体设定的属性值可以从京东等网站上复制

2.设置所有字体的初始格式,如果有需要单独设置的字体则单独设置

(七)文本修饰属性 

1.文本缩进

注:1.2em表示首行缩进两个字号大小的距离 

 2.文本对齐

注:1.居中的本质是文字内容居中

3.图片实现居中效果 

 

注:1. 要将属性设置给内容的父级,内容外要套div标签

4.文本修饰线

(八)字体颜色

注:1.其中第二种写法数字越大颜色越深

五.调试工具 

注:1.调试工具在浏览器检查页面中 

本文是对B站上黑马免费课程的总结,供个人学习使用 

http://www.lryc.cn/news/546554.html

相关文章:

  • Visual Studio 2022安装问题解决,提示无法安装Microsoft.VisualStudio.Community.Msi
  • 【代码分享】基于IRM和RRT*的无人机路径规划方法详解与Matlab实现
  • MybatisPlus从入门到精通
  • el-table input textarea 文本域 自适应高度,切换分页滚动失效处理办法
  • 基于Windows11的DockerDesktop安装和布署方法简介
  • ffmpeg源码编译支持cuda
  • 动漫短剧开发公司,短剧小程序搭建快速上线
  • 《2025软件测试工程师面试》接口测试篇
  • 嵌入式学习第二十三天--网络及TCP
  • Elasticsearch:解锁深度匹配,运用Elasticsearch DSL构建闪电般的高效模糊搜索体验
  • SQLAlchemy系列教程:基本数据类型及自定义类型
  • 【Wireshark 02】抓包过滤方法
  • ES怎么查询大于10000条数据
  • 《几何原本》命题I.8
  • 课程2. 机器学习方法论
  • ioday2----->标准io函数
  • SQL注入练习场:PHPStudy+SQLI-LABS靶场搭建教程(零基础友好版)
  • 【笔记ing】python
  • DFT之SSN架构
  • 四十二:VSCODE打开新文件覆盖上一个文件窗口问题
  • JMeter 引入 JAR 包的几种方法
  • 记一次ScopeSentry搭建
  • C语言_数据结构总结1:静态分配方式的顺序表
  • C语言--简单排序算法(冒泡、选择、插入)
  • 【文献阅读】The Efficiency Spectrum of Large Language Models: An Algorithmic Survey
  • MySQL-高级查询
  • Netty笔记10:LengthFieldBasedFrameDecoder很简单,请看
  • linux 安装Mysql无法远程访问问题的排查
  • DeepSeek搭配Excel,制作自定义按钮,实现办公自动化!
  • 英文生物信息学技术社区Top10推荐:基本情况、评介和网页链接