前端入门第三天

目录

一、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简介

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java Swing实现思聪吃热狗游戏

引言 Java Swing,一种灵活的图形用户界面库,让我们可以以相对简便的方式创建图形化应用程序。在本文中,我们将讲述如何借助Swing构建一个简单的游戏:DogGame,它的规则是控制一只名为Wsc的狗来捕捉飞来的热狗。让我们浏…

PHP中的stdClass:一个动态的空白板

PHP中的stdClass:一个动态的空白板 在PHP编程中,灵活性和动态性是开发人员追求的重要目标。而stdClass作为PHP中的一个特殊类,为我们提供了一个通用的空白板,允许在运行时动态地添加属性和方法。它的存在为处理动态数据结构和临时…

使用gcc/g++查看C语言预处理,编译,汇编,连接,以及动静态库的区分

文章目录 使用gcc/ggcc如何完成编译后生成可执行文件?预处理(进行宏替换)编译(生成汇编)汇编(生成机器可识别代码)连接(生成可执行文件或库文件)最后记忆小技巧 在这里涉及到一个重要的概念&…

《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)

文章目录 4.1 表单的基础(📝🚀💬 开启沟通的大门)4.1.1 表单基础知识点4.1.2 基础示例:创建一个简单的注册表单4.1.3 案例扩展一:创建一个调查问卷4.1.4 案例扩展二:创建一个预订表单…

Gson源码解读

一,概述 gson作为流行的json工具,笔者使用较多。本文主要目的是解读下Gson的源码实现,就没有然后了。 二,实例 实例如下图所示,笔者简单调用gson的toJson方法获得json字符串,fromJson则从json字符串解析…

最新2024如何解决谷歌浏览器Chrome谷歌翻译无法使用问题

快速恢复谷歌浏览器一键翻译功能在Chrome 中安装好【翻译】插件 Macbook 操作步骤: 1点击“前往”,打开“前往文件夹” 2 在对话框中输入“/etc” 囝找到“hosts”文件,复制粘贴到桌面 3 在复制的文件最后新起一行,输入并保存&am…

【CSS + ElementUI】el-tree下拉扩展图标置于右侧

效果图 代码实现 <template><div class"search_resource"><el-tree class"filter-tree" ref"tree" default-expand-all :data"directoryList" :props"defaultProps"icon-class"el-icon-arrow-right…

飞凌嵌入式RK3568开发板蓝牙收、发文件测试

本文由电子发烧友论坛用户fsdzdzy提供&#xff0c;感谢分享。飞凌嵌入式每月定期开展新的开发板体验活动&#xff0c;欢迎更多工程师朋友的关注和参与。 飞凌嵌入式OK3568-C开发板板载WiFi&BT模组&#xff0c;蓝牙版本为Bluetooth 5.0&#xff0c;速率高达3Mbps。笔者将在本…

MySQL之谈谈MySQL里的日志

文章目录 前言一、SQL是如何做更新操作的二、MySQL中的redo log三、MySQL中的binlog四、聊聊两阶段提交总结 前言 上一章我们讲了一条SQL是如何做查询的&#xff0c;其中经历了许多步骤。这次来讲讲一条SQL是如何做更新操作的。 常有大佬说他可以把MySQL恢复到半个月内任意一秒…

2024年美赛B题:寻找潜水器 Searching for Submersibles 思路模型代码解析

2024年美赛B题&#xff1a;寻找潜水器 Searching for Submersibles 思路模型代码解析 【点击最下方群名片&#xff0c;加入群聊&#xff0c;获取更多思路与代码哦~】 问题翻译 海上游轮迷你潜艇&#xff08;MCMS&#xff09;是一家位于希腊的公司&#xff0c;专门制造能够将人…

jQuery前段开发--星级评价和图形跟随指针移动

一、实验原理&#xff1a; 当鼠标移入某个星星&#xff0c;前面的星星都会被点亮&#xff1b;当鼠标移出&#xff0c;星星将会变暗&#xff0c;单击某个星星后&#xff0c;即可完成评论&#xff0c;此时鼠标移出后&#xff0c;被单击星星前面的星星都会被点亮&#xff0c;后面…

GmSSL - GmSSL的编译、安装和命令行基本指令

文章目录 Pre下载源代码(zip)编译与安装SM4加密解密SM3摘要SM2签名及验签SM2加密及解密生成SM2根证书rootcakey.pem及CA证书cakey.pem使用CA证书签发签名证书和加密证书将签名证书和ca证书合并为服务端证书certs.pem&#xff0c;并验证查看证书内容&#xff1a; Pre Java - 一…

在Mixamo网站上,下载的模型导入unity后没有材质怎么解决

在Mixamo网站上&#xff0c;下载的模型导入unity后没有材质 1.导入的模型没有材质2.解决方法3.提取后就有材质了 1.导入的模型没有材质 2.解决方法 选中导入的模型 > 选择提取纹理>选择你要提取到的文件夹(默认是当前文件夹)>点击 fix now 3.提取后就有材质了

力扣hot100 最小路径和 多维DP 滚动数组 一题多解

Problem: 64. 最小路径和 文章目录 思路&#x1f496; 朴素版&#x1f496; 空间优化版 思路 &#x1f468;‍&#x1f3eb; 路飞 &#x1f496; 朴素版 ⏰ 时间复杂度: O ( n m ) O(nm) O(nm) &#x1f30e; 空间复杂度: O ( n m ) O(nm) O(nm) class Solution {public …

026-安全开发-PHP应用模版引用Smarty渲染MVC模型数据联动RCE安全

026-安全开发-PHP应用&模版引用&Smarty渲染&MVC模型&数据联动&RCE安全 #知识点&#xff1a; 1、PHP新闻显示-数据库操作读取显示 2、PHP模版引用-自写模版&Smarty渲染 3、PHP模版安全-RCE代码执行&三方漏洞 演示案例&#xff1a; ➢新闻列表&…

linux麒麟系统安装mongodb7.0

1.mogedb下载 下载的是他tar包 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-7.0.5.tgz wget -o https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-7.0.5.tgz 也可以下载rpm包 2.将包上传至服务器并解压 #进入目录 并解压 cd /opt/ tar …

动网格-网格重构之弹性光顺局部重构法(四)

弹性光顺法的基本特点 弹性光顺法中&#xff0c;网格线类似于弹簧&#xff0c;两端节点(node)作弹性移动 弹性光顺法有如下特点。 (1)节点的数量和节点之间的连接关系均不变&#xff0c;即节点之间的连接属性不变。 (2)单独使用时&#xff0c;仅限于变形非常小的情况&#xff…

常用API2---system

是一个工具类&#xff0c;提供了一些与系统相关的方法. 常用方法&#xff1a; package MyApi.a02Systemdemo;public class SystemDem01 {public static void main(String[] args) {//方法形参://状态码&#xff1a;//0 表示当前虚拟机是正常停止//非0&#xff1a;1表示当前虚拟…

TRUNCATE TABLE和DELETE FROM对比

相同点:用于删除数据,同时保留表结构. 不同点: TRUNCATE比DELETE更快(数据量小可能体现不出来,单数据量大就很明显了) 原因:TRUNCATE是DDL(数据定义语言)DELETE是逐行删除属于(DML) TRUNCATE 不会产生大量日志,但DELETE删除会产生大量日志 DELETE FROM 可以加WHERE子句指定…

(已解决)spingboot项目如何做QQ邮箱注册功能,如何在邮箱注册中进行随机数添加作为动态验证码,并满足分层解耦

前面我们已经完成了发送静态验证码&#xff0c;现在用随机数作为动态验证码。 文章地址&#xff1a;spingboot 后端发送QQ邮箱验证码 使用注解Component进行分层解耦加入ioc容器&#xff0c;方便调用。 package com.example.tianyidemo.utils; import org.springframework.st…