【Java Web】秒懂CSS样式!

目录

一、CSS的使用

二、CSS引用方式

三、CSS三大选择器

四、CSS浮动

五、CSS定位

六、CSS盒子模型


一、CSS的使用

css层叠样式表能够对网页中标签元素位置的排版进行像素级别的精确控制,支持几乎所有的字体和字号样式,拥有对网页对象和模型的样式编辑的能力,简单的说就是用来美化网页的。

二、CSS引用方式

  • 行内式:通过标签的style属性引用样式

        语法:style="样式名:样式值;样式名:样式值;... ..."

        缺点:1.css样式代码的复用度低,不利于维护。2、css样式代码和html结构代码交织在一起,影响阅读、文件大小以及性能。

  • 内嵌式:通过在head双标签内使用style双标签定义本页面的公共样式,此种方式需要使用选择器来指定css样式作用在本文件的哪些标签元素上。

        缺点:内嵌式定义的样式只能被本网页文件中的标签元素使用,而不能被其它html网页文件中的标签元素使用,因此内嵌式的样式复用还不够很好。

  • 外部样式表:将css代码单独放到一个“.css"文件中,哪些html网页文件需要这些样式就在html网页文件的head标签中通过link单标签来引用。

        引用语法:<link href="被引用文件路径" rel="被引入的文件类型,要是css样式就填stylesheet" />

注意:用内嵌式或外部样式表的方式来引用css样式需要使用选择器来指定样式作用的标签元素有哪些。 

三、CSS三大选择器

选择器就是用来指定定义好的css样式对网页文件中哪些标签元素是生效的。

  • 元素选择器:根据标签名来指定css样式作用的标签元素有哪些。

                语法:标签名{}

缺点:某些同名的标签元素不想使用某些样式但无法设置,不同名的标签元素想使用css样式但无法实现。

           

  • id选择器:根据标签的id属性值来指定css样式作用的标签元素有哪些。

                语法:#id值{}

           

  • class选择器:根据标签元素的class属性值来确定css样式作用的标签元素有哪些。

一个标签元素的class属性可以有多个值即此标签享有多个css样式。

                语法:.class属性值{}

四、CSS浮动

css的浮动就是使元素脱离文档流,使其按照指定的方向(左或右)移动,直到它的外边缘碰到包含它的父边框或其它的浮动元素为止,总之就是它让出的位置空间会被其它的元素所侵占这就是浮动。

说明:

1、浮动后的元素所占用位置上的文字会被挤到其它地方去

2、通过浮动可以使不在同一行的块元素改变为在同一行上并且对其大小的设置不会失效。

例如:

五、CSS定位

通过css的position样式属性可以设置标签元素在页面中的位置即用来规划设计页面元素的布局。

position样式用来设置元素的位置属性

static: 元素原本在文档流中的位置,行内元素水平方向从左向右,块元素垂直方向从上往下,标签元素默认就是此属性值。

absolute: 绝对定位,根据页面来进行定位,会脱离文档流。

relative: 相对定位,相对该元素原本的位置来定位,不会脱离文档流。

fixed: 相对定位,相对浏览器页面窗口定位,会脱离文档流(如广告)。

注意:top、bottom、left、right样式必须在标签元素设置了position样式除static的值后才能生效即需要与position配合使用。

六、CSS盒子模型

所有的html元素都可以看做为是个盒子,标签元素里面可以包含其它的标签,一个盒子包括:外边距(margin)、边框(border)、内边距(padding)和盒子实际可以包含的内容(content)例如:div元素。在css中“盒子模型”这个术语是用来设计和布局页面时使用的。

@声明:“山月润无声”博主知识水平有限,以上文章如有不妥之处,欢迎广大IT爱好者指正,小弟定当虚心受教!

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

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

相关文章

一 windso10 笔记本刷linux cent os7.9系统

1:准备材料 16G以上U盘, 笔记本一台 镜像选了阿里云镜像:centos-7-isos-x86_64安装包下载_开源镜像站-阿里云 软件:链接&#xff1a;https://pan.baidu.com/s/13WDp2bBU1Pdx4gRDfmBetg 提取码&#xff1a;09s3 2:把镜像写入U盘,本人已经写入好了,选择镜像,点开始就是,确定等…

基于php的用户登录实现(v2版)(持续迭代)

目录 版本说明 数据库连接 登录页面&#xff1a;login.html 登录处理实现&#xff1a;login.php 用户欢迎页面&#xff1a;welcome.php 密码修改页面&#xff1a;change_password.html 修改执行&#xff1a;change_password.php 用户注册页面&#xff1a;register.html …

WebGPU vs. 像素流

在构建 Bzar 之前&#xff0c;我们讨论过我们的技术栈是基于在云上渲染内容的像素流&#xff0c;还是基于使用设备自身计算能力的本地渲染技术。 由于这种选择会极大地影响项目的成本、可扩展性和用户体验&#xff0c;因此在开始编写一行代码之前&#xff0c;从一开始就采取正确…

C语言指针、数组学习记录

指针 指针是什么 数据在内存中存放的方式 声明一个变量int i 3;&#xff0c;那么在内存中就会分配一个大小为4字节&#xff08;因为int类型占4字节&#xff09;的内存空间给变量i&#xff0c;这块内存空间存放的数据就是变量i的值。 换句话说就是&#xff0c;在内存中给变…

指针的学习5

目录 sizeof和strlen的区别 sizeof strlen 数组和指针笔试题解析 一维数组 字符数组 二维数组 指针运算笔试题解析 题目1&#xff1a; 题目2&#xff1a; 题目3&#xff1a; 题目4&#xff1a; 题目5&#xff1a; 题目6&#xff1a; 题目7&#xff1a; sizeof和…

安装配置Hadoop集群

安装配置Hadoop集群的主要步骤 1、安装配置Hadoop 2、配置用户环境变量 3、配置Hadoop 配置core-site.xml文件配置hdfs-site.xml文件配置mapred-site.xml文件配置yarn-site.xml文件配置slaves文件配置hadoop-env.sh文件 更多配置文件的配置信息请参见官方网站的解释。 4、…

vue2中使用异步组件

在大型应用中&#xff0c;我们可能需要将应用分割成小一些的代码块&#xff0c;并且只在需要的时候才从服务器加载一个模块。这时就就可以使用异步组件。 1.通过import方式引入 //组件1<tempalte><Parent v-if"show"></Parent><button clickha…

关于Spring依赖注入简洁方式的探索

最近在项目开发过程中关注到一个依赖注入的写法差异&#xff0c;因为本人代码上有点强迫症&#xff0c;看到这种不同人不一样的写法&#xff0c;特意了解了一下&#xff0c;但是依然有部分疑惑未解。 两种写法&#xff1a;(就是传说中最常见的属性注入和构造函数注入) Service…

云打印机多少钱一台?

随着新的一年的开始&#xff0c;很多同学们都开始打印资料&#xff0c;以应对新一年的各种考试。但是对于学生们来说&#xff0c;去打印店打印价格贵、打印不方便、没时间去打印等多种原因导致我们没办法及时打印资料&#xff0c;这个时候我们就需要用到云打印机。那么云打印机…

浅谈游戏AI LOD的智能控制——LOD交易员

前引 LOD的概念 提到 细节层次 &#xff08;Level of Details&#xff0c;简写LOD&#xff09;&#xff0c;大家可能首先会想到图像渲染&#xff0c;像游戏中大地图的3D物体会随玩家与其距离的远近而变化精度&#xff08;主要是模型面数的变化&#xff0c;有时还会直接剔除&a…

CSS基础知识

font-family: "Trebuchet MS", Verdana, sans-serif; 字体栈&#xff0c;浏览器会一个一个试过去看下哪个可以用 font-size16px; font-size1em; font-size100%;//相对于16px 字体大小&#xff0c;需要进行单位换算16px1em font-weightnormal;//400font-weight属性…

ai直播数字人:AI大模型应用开发的神奇世界

当AI技术的发展走向一个新的高峰&#xff0c;AI直播数字人逐渐成为人们关注的焦点。这种全新的数字人形态&#xff0c;通过大模型应用开发&#xff0c;带来了一个神奇世界。 在这个神奇世界里&#xff0c;AI直播数字人可以展现出与真实人类相媲美的外貌和声音。通过先进的图像…

HarmonyOS ArkTS工程目录结构(Stage模型)

1. ArkTS工程目录结构&#xff08;Stage模型&#xff09; 官方文档&#xff08;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2&#xff09; 1.1. AppScope AppScope > app.json5&#xff1a;应用的全局配…

图的单源最短路径问题

目录 一、简述 二、前置配置 三、迪杰斯特拉算法 四、改进的迪杰斯特拉算法 五、贝尔曼福特算法 一、简述 图是一种比较常用的数据结构&#xff0c;将问题转换成图相关的思路也是比较常用的。 图的单源最短路径问题&#xff0c;也就是图中某一个节点到图中其他节点的最短路…

基于SSM的植物园管理系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 开发技术简介 3 1.1 SSM框架 3 1.2 JSON 3 1.3 Ajax 4 1.4 Bootstrap前台框架 4 1.5 Eclipse 4 1.6 本章小结 4 2 系统分析 5 2.1可行性分析 5 2.1.1 技术可行性 5 2.1.2 经济可行性 5 2.1.3 操作可行性 5 2.2 功能需求 5 2.3 用例分析 6…

洞悉 Kubernetes 高阶奥秘:掌控资源、网络、存储,玩转容器化应用!

昨天我们已经入门了K8S&#xff0c;今天带大家学习一下资源、网络、存储这几个进阶的知识点模块内容。这几天陆陆续续会把K8S从头到尾讲一遍&#xff0c;最后会带大家实战一下&#xff0c;下面就开始今天的学习吧。 高级资源和控制器 Kubernetes 提供了一系列高级资源和控制器…

请编程输出无向无权图各个顶点的度 ← 链式前向星存图

【题目描述】请利用链式前向星存图&#xff0c;编程输出无向无权图各个顶点的度。【输入样例】 5 6 1 3 2 1 1 4 2 3 3 4 5 1【输出样例】 4 2 3 2 1【算法分析】 本例需要用到基于链式前向星的广度优先搜索&#xff08;BFS&#xff09;。 链式前向星广度优先搜索&#xff08;B…

JavaScript 实现飞机大战

文章目录 一些关键点概览&#xff1a;核心模块的具体实现示例&#xff1a;飞机类&#xff08;Plane&#xff09;的基本结构&#xff1a;子弹类&#xff08;Bullet&#xff09;的基本结构&#xff1a;敌机类&#xff08;Enemy&#xff09;的基本结构&#xff1a; 基于前面定义的…

Idea创建Maven项目

Maven安装配置步骤&#xff1a; 解压安装 bin目录 &#xff1a; 存放的是可执行命令。&#xff08;mvn 命令重点关注&#xff09; conf目录 &#xff1a;存放Maven的配置文件。&#xff08;settings.xml配置文件后期需要修改&#xff09; lib目录 &#xff1a;存放Maven依赖的j…

Python快速入门系列-2(Python的安装与环境设置)

第二章&#xff1a;Python的安装与环境设置 2.1 Python的下载与安装2.1.1 访问Python官网2.1.2 安装Python对于Windows用户对于macOS用户对于Linux用户 2.2 集成开发环境&#xff08;IDE&#xff09;的选择与设置2.2.1 PyCharm2.2.2 Visual Studio Code2.2.3 Jupyter Notebook2…