前端入门第三天

目录

一、CSS定义

二、CSS引入方式

三、基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

5.画盒子

四、文字控制属性

1.字体大小

2.字体粗细

3.字体倾斜

4.行高

1.行高-垂直居中

5.字体族

6.font复合属性

7.文本缩进

8.文本对齐方式

1.水平对齐方式-图片

9.修饰线

10.颜色

五、调试工具

六、综合案例


一、CSS定义

1.基础选择器

找标签

2.文字控制属性

文字大小、颜色

键值对:

color        颜色

font-size        大小

二、CSS引入方式

特点:

  • 内部:(title下面)style+选择器+属性
  • 外部:(css文件中) 选择器+属性(title下面)link
  • rel 表示联系 stylesheet表示样式表
  • 行内:+属性style

三、基础选择器

1.标签选择器

  • 无法区分同名标签

2.类选择器

  • 区分同名标签
  • 使用多个类选择器 class="red size"

3.id选择器

4.通配符选择器

  • 没有设置该属性的全部内容将选中
  • 清楚标签默认样式(去间隔)

5.画盒子

  • 使用类选择器和这三个属性

四、文字控制属性

1.字体大小

  • 默认字体大小:16px

2.字体粗细

3.字体倾斜

4.行高

上=下

1.行高-垂直居中

  • 只适用于单行文字

5.字体族

6.font复合属性

7.文本缩进

8.文本对齐方式

1.水平对齐方式-图片

9.修饰线

10.颜色

五、调试工具

  • 错误属性有黄色叹号
  • 选择属性进行生效

六、综合案例

  • 新闻详情
  • CSS简介

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#,打印漂亮的贝尔三角形(Bell Triangle)的源程序

以贝尔数为基础,参考杨辉三角形,也可以生成贝尔三角形(Bell triangle),也称为艾特肯阵列(Aitkens Array),皮埃斯三角形(Peirce Triangle)。 贝尔三角形的构造…

Pycharm Community 配置调试Behave

前提:python小白,临时搞python项目,公司限制使用Pycharm版本,故只能使用社区版,然而官方有明确说明:只有Professional版支持Behave。故研究了半天才整清楚社区版调试Behave的设置 没有进行下面的步骤之前&…

Unity | 渡鸦避难所-9 | 角色名字及血条等信息

1 效果预览 游戏中角色的名字和血条是非常重要的元素,它们可以帮助玩家了解角色的身份和状态。在 Unity 中,可以使用 UGUI 来实现这些功能 2 实现方案 1 画布 (Canvas) 画布 (Canvas) 组件表示进行 UI 布局和渲染的抽象空间。所有 UI 元素都必须是附加…

Keil软件某些汉字输出乱码,0xFD问题,51单片机

1. 问题 keil软件输入某些汉字的时候会输出乱码,例如:升、 数 2. 原因 keil软件会忽略0xFD。 升的GB2312编码为 0xc9fd,keil解析为0xc9数的GB2312编码为 0xcafd,keil解析为0xca 关于Keil软件中0xFD问题的说明 3. 解决方案1 …

协作办公开源神器:ONLYOFFICE

目录 前言ONLYOFFICE为什么选择ONLYOFFICE强大的文档编辑功能多种协作方式多人在线协同支持跨端多平台连接器安全性极高本地部署 ONLYOFFICE 8.0版本震撼来袭可填写的 PDF 表单显示协作用户头像更新插件界面设计更快更强大 总结 前言 近几年来,随着互联网技术的不断…

gilab 展示测试用例结果详情页面

Python 此示例使用带有 --junitxmlreport.xml 标志的 pytest 将输出格式化为 JUnit 报告 XML 格式:gitlab 会自动去解析report.xml 这个文件,并且将每个case的测试结果展示在gitlab中pytest:stage: testscript:- pytest --junitxmlreport.xmlartifacts:w…

PyTorch的nn.Module类的详细介绍

在PyTorch中,nn.Module 类是构建神经网络模型的基础类,所有自定义的层、模块或整个神经网络架构都需要继承自这个类。nn.Module 类提供了一系列属性和方法用于管理网络的结构和训练过程中的计算。 1. PyTorch中nn.Module基类的定义 在PyTorch中&#xff…

U盘损坏电脑无法识别怎么修复?

USB闪存器简称为U盘,据谐音也称“优盘”,是一种可移动的存储设备,通过USB接口连接到电脑。因其便于携带且存储容量大,很多用户都使用U盘来存储文件资料、图片、视频等个人数据。但常使用U盘的用户,经常会遇到因U盘损坏…

YOLO系列助力涨点!新SOTA让缺陷检测更准更快!附开源数据集下载

缺陷检测在工业自动化、质量控制、安全检测等多个实际应用中都有着广泛的需求。因此这个方向是相对容易发表高质量论文的,尤其是当研究涉及到创新的算法、改进的技术、新的应用场景或显著提高检测性能时。 在这其中,YOLO系列算法与缺陷检测的结合已经取…

nest.js实现登录验证码功能(学习笔记)

安装express-session npm i express-session 引入 注册session import * as session from express-session;import { NestFactory } from nestjs/core; import {DocumentBuilder,SwaggerModule, } from nestjs/swagger;import { AppModule } from ./app.module;async functio…

废品上门回收小程序搭建全过程

随着人们对环境保护意识的不断增强,废品回收成为了一项重要的社会活动。为了方便废品回收的顾客和回收者之间的联系,废品上门回收小程序成为了一种流行的解决方案。然而,如何选择一款合适的废品上门回收小程序搭建平台呢?下面将为…

【Linux网络编程三】Udp套接字编程(简易版服务器)

【Linux网络编程三】Udp套接字编程(简易版服务器) 一.创建套接字二.绑定网络信息1.构建通信类型2.填充网络信息①网络字节序的port②string类型的ip地址 3.最终绑定 三.读收消息1.服务器端接收消息recvfrom2.服务器端发送消息sendto3.客户端端发送消息sendto4.客户端…