JavaEE day5 初识CSS 2

news2025/1/12 23:07:33

选择器

基本选择器:id选择器、类选择器、元素选择器

复合选择器:并列选择器、子孙选择器、孩子选择器

通配符选择器  *{.....}  任意元素:书写一些全局的规则时使用,就等于是一个全局都要遵守的规则

伪类选择器:针对某些元素的一些不同状态进行选择:我们对一个链接来说,操作就有四种状态:这个链接没有被用户点击过:link   这个链接已经被用户访问过 visited  当鼠标悬停在链接上 hover  当鼠标点击了链接还没松开 active 

假设我们针对该标签进行伪类选择器的操作:

<a href="url">...</a>

规则为:

顺序必须为 Link Visited Hover Active 而且一般只设置一般状态与hover状态

a#hello 意思为a并且#hello 采用交集的关系

a,  #hello  意思为a 或者#hello 采用或者的关系

a  #hello 则是子孙选择器

关于选择器,可以参考

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_ blocks/Selectors


CSS中的常见属性

由于css的属性随着标准不断变化,并且数量特别多,难以全部掌握,在MDN与其他网站上都提供了CSS属性的解释,可以随时查阅文档,并且这些属性大多见名知意。

1.文本(text)相关的

字体:font-family  使用:font-family:字体1,字体2,字体3 优先1没有1的话依次往后用。需要注意的是,字体是由多个词组成的话需要用“”引起来,例如“Yu Gothic UI”

字号:font-size  font-size:25px  (25像素)

字重:font-weight 表示字体的加粗程度 例如  font-weight:5/40/230/bold(加粗)/normal(正常)

字体风格:font-style  font-style:italic(斜体)

字体的颜色:color    color:red (红色字体)这是提前用已有的英文单词作为其代表颜色,一般更推荐使用RGB形式来表示颜色:red green blue混合出来的颜色 红色就为:Red:255,Green:0,Blue:0黑色就为Red:0,Green:0,Blue:0    而对应在css中,有使用十六进制来表示这种RGB形式,例如红色为#FF0000  FF为255,00为0,00为0。所以有两种表现形式:rgb(255,0,0)和#FF0000

除了RGB以外还有RGBA,前面RGB完全一样,而A表示alpha通道,即透明度,可选范围为0-1,0代表完全透明,1代表完全不透明  使用为 rgba(255,0,0,0.5)

文本的水平方向对齐方式:text-align:left(左对齐)/right(右对齐)/center(居中对齐)

下/中/上划线:text-decoration

文本缩进:indent 使用  indent:2em(缩进两个字)

行高:line-height 影响的是文字的垂直居中方式 当其等于=文字所在的容器高度,即可居中对齐


2.背景相关的

背景的属性是一个简写属性,可以在一次声明中定义一个或多个属性

比较常见的为

backgroud-color  背景色   

background-image 背景图片(需要通过指定一个图片资源的YRL)

除此之外都是影响背景图/色的具体表现的

一般用于background-image

背景平铺:backgroud-repeat:repeat(平铺)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺)

背景位置:background-position:x,y;


3.盒模型

每一个HTML的元素都被视为一个矩形的盒子,因此被称为盒模型,这个盒子由几部分组成:

border 边框  content 内容  padding 内间距  margin 外间距

如图

四个方向为top(上)bottom(下)left(左)right(右)

并且box-sizing的默认值为box-sizing:content-box; 

默认情况下,盒子的宽度和父元素一样例如:

 而高度是由盒子中的内容决定的,默认高度是0

我们可以将块级元素理解为容器,即盒模型,内联元素理解为内容content,被装进容器中


4.布局相关

处理的是为什么元素摆放在哪里的问题。

这里只描述弹性布局

弹性布局中,其父容器需要设置:display:flex;

之后可以对其孩子进行弹性布局,所谓弹性布局,就是可以将其在父容器中的水平轴与垂直轴上进行布局

例如水平轴上可以有以下这几种情况:

 垂直方向同理

主轴/水平方向上设置的属性为:justify-content:space-between(贴合最左和最右)

辅助轴/垂直方向上设置的属性为:align-items:center(居中)


CSS入门小结

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

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

相关文章

Lab 3: Midterm Review

Lab3 部分questionQ5&#xff1a;Its Always a Good PrimeQ6&#xff1a;Church numeralsQ5&#xff1a;It’s Always a Good Prime Implement div_by_primes_under, which takes in an integer nand returns an n-divisibility checker. An n-divisibility-checker is a funct…

【蓝桥杯选拔赛真题35】python回文数升级 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析

目录 python输出N除以3的商 一、题目要求 1、编程实现 2、输入输出

二叉树22:二叉搜索树中的搜索

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;700. 二叉搜索树中的搜索 题目&#xff1a; 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数…

变量的了解

1、普通局部变量 -------------定义形式&#xff1a;在{}里面定义的 普通变量 叫做 普通局部变量 -------------作用范围&#xff1a;所在的 {} 复合语句之间有效 -------------生命周期&#xff1a;所在的 {} 复合语句之间有效 -------------存储区域&#xff1a;栈区 ---…

2.6 JAVA运算符

文章目录1.运算符概述2.运算符具体功能3.基本四则运算符4.取余运算符5.自增自减运算符6.比较运算符7.逻辑运算符8.三目运算符9.赋值运算符10.综合练习&#xff1a;求平年闰年1.运算符概述 运算符用于连接表达式的操作数&#xff0c;并对操作数执行运算。 例如&#xff0c;表达…

使用java来创建es索引(基于es7.8)

1、先引入pom依赖&#xff1a; <dependencies> <dependency> <groupId>org.elasticsearch</groupId> <artifactId>elasticsearch</artifactId> <version>7.8.0</version> …

零基础学JavaWeb开发(二十四)之 springmvc入门到精通(4)

三、整合前端layui 前后端分离架构模式 前端---页面编写好 数据源来自于 后端接口 layui或者vue等 将接口编写好即可&#xff08;springmvc&#xff09; 1、使用layui画出首页界面 html/js/css 表格 - 页面元素 - Layui 引入css <!-- 引入layui css --> <link …

MySQL优化(1)执行计划explain中type属性详解

系列文章目录1.初始化测试数据1.初始化表格&#xff08;user表&#xff09;2.初始化表格&#xff08;product表&#xff09;3.初始化表格&#xff08;user表数据初始化&#xff09;4.初始化表格&#xff08;product表函数&#xff09;5.初始化表格&#xff08;product表数据初始…

雷达编程实战之信号处理流程

信号处理_MatlabAD数据幅相校准1DFFT2DFFT由射频前端发射、接收信号&#xff0c;至获得目标径向距离、径向速度、径向角度、RCS等目标属性信息&#xff0c;这个过程&#xff0c;我们谓之&#xff0c;FMCW毫米波雷达信号处理流程。 VCO为压控振荡器(Voltage Controlled Oscilla…

从技术角度看Android大系统的构成

最近因为工作需要&#xff0c;再次捡起了放下多年的Android开发。说起Android&#xff0c;还是要感谢这个时代&#xff0c;感谢开源。这个时代&#xff0c;让我们开发者&#xff0c;可以通过开源&#xff0c;通过开源的Android&#xff0c;学到很多东西。有如此感慨&#xff0c…

基本二叉树

文章目录接口实现三种基本遍历方式获取节点个数获取叶子节点个数获取树的高度返回第K层节点个数返回x所在节点二叉树的销毁OJ二叉树知识点及选择题N0 N2 1由中序和前序&#xff08;或后序&#xff09;确定结构的方法有N个元素的完全二叉树的深度是 logN 1选择题&#xff1a;…

Linux常用命令——sftp命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) sftp 交互式的文件传输程序 补充说明 sftp命令是一款交互式的文件传输程序&#xff0c;命令的运行和使用方式与ftp命令相似&#xff0c;但是&#xff0c;sftp命令对传输的所有信息使用ssh加密&#xff0c;它还…

预处理【详解】

本期介绍&#x1f356; 主要介绍&#xff1a;#define如何定义宏&#xff0c;宏替换的规则&#xff0c;为什么宏定义时不要吝啬我们的括号&#xff0c;为什么宏的参数不能带有副作用&#xff0c;宏和函数的区别。还讲解了预处理符号#和##&#xff0c;#undef指令&#xff0c;众多…

Swift(4)

目录 Dictionary集合 组合赋值符号 区间运算符 字符串字面量里的特殊字符 操作字符 Dictionary集合 相当于java中的Map集合 函数与闭包 函数也可以内嵌 函数其实就是闭包的一种特殊形式&#xff1a;一段可以被随后调用的代码块。闭包中的代码可以访问其生效范围内的变量和…

SpringMVC的@RequestMapping注解

SpringMVC的RequestMapping注解RequestMapping注解的功能RequestMapping注解的位置RequestMapping注解的value属性RequestMapping注解的method属性RequestMapping注解的params属性RequestMapping注解的headers属性什么是headers属性RequestMapping注解的功能 从注解名称上我们…

二叉树23:验证二叉搜索树

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;344. 反转字符串 题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。…

26. 命名空间

前言&#xff1a;如果你接触过c/c/c#/java&#xff0c;那么对于python中的命名空间也是如此&#xff0c;只不过在些许地方存在细微差异&#xff0c;不过倒无伤大雅。 1. 定义 命名空间(Namespace)是从名称到对象的映射&#xff0c;大部分的命名空间都是通过 python 字典来实现…

lamda表达式

lamda表达式可以看作是一个匿名函数。编译器在编译的时候&#xff0c;会将lamda表达式处理成一个仿函数类&#xff0c;类名是类名是不重复的随机名称&#xff08;因为一个作用域中可能存在多个仿函数&#xff09;&#xff0c;返回该仿函数的对象。 lamda既然可以看作是一个匿名…

文件操作(C语言)

目录 1、为什么使用文件 2、什么是文件 程序文件 数据文件 文件名 3、文件的打开和关闭 文件指针 文件的打开和关闭 4、文件的顺序读写 文件读写介绍 文件读写函数 fputc&#xff08;字符 输出/写 函数&#xff09; fgetc&#xff08;字符 输入/读 函数&#xff09; fputs&…

VMware Workstation安装:与 Device/Credential Guard 不兼容

VMware Workstation安装&#xff1a;与 Device/Credential Guard 不兼容 1、快速解决 安装最新版VMware Workstation&#xff0c;例如我安装的是VMware Workstation Pro 17&#xff1a; 是的&#xff0c;解决报错的办法&#xff0c;就是安装/升级VMware Workstation版本。 参…