JavaEE day4 初识CSS
创始人
2024-05-16 21:44:20
0

HTML如果说是前端网页中的骨架

那么CSS就是用来对骨架进行排版美化的、

CSS全称为 Cascading Style Sheets 层叠样式表

预备知识:

html中的所有元素都有两个通用的属性:id和class

id:唯一标识符,一个html组成元素中,id是不能重复的,通过id可以找到一个唯一的元素,id开头不可以为数字。

class:类别,一个元素可以属于多个类别

例子:

........

  该p标签属于china类,唯一标识符为1

........

........

........

  属于两个类的时候空格分开即可

CSS基本规则

准备一些规则——选中一些元素

让选中的元素去应用刚刚准备好的规则

选择器(selector):选中某些元素

属性值(attribute):例子:color: red;其中color是属性:颜色,red是该属性的值:红色

例子:

p{

        color:red;

}

如上就是一个选择器,选中的为文档中所有的p标签,选中后应用的规则为将其颜色属性改为红色。

那么HTML中如何引入CSS规则:三种样式

1.外部样式:通过单标签引入    url可以进行必要的省略

2.内部样式:通过引入

1和2都一般放在下

3.内联样式:通过在要修改样式的标签上,指定sytle="属性",不需要写选择器

展示一个例子:

html代码为

引入的css代码为

效果为

 

若三种引入发方式的规则冲突,以内联优先级最高,内部、外部样式后出现的覆盖先出现的

并且游览器只会执行一次命令,若冲突会自动过滤优先级低的。

css大部分规则都是写给该结点为根的所有根的子树上的(有特例)

例如

那么div以下所有的子树都遵守规则。

选择器(selector)规则

三种最基本的选择器:

1.直接写标签名跟大括号  类似p{.....}    选中所有p标签

2.id选择器,选中id为....的元素(存在的话)类似 #id号xxx{....}  选中id号xxx的元素

例子:

3.类选择器,选中该类的所有元素, 类似 . 类名xxx{....} 选中类名为xxx的所有元素

例子:

选中的为

选择器的优先级规则:选择越精确的,优先级越高 

即  内联样式 > id选择器 > 类选择 > 元素选择器  同样优先级情况下,谁出现在上面,谁被覆盖。

进一步的选择器规则:

1.多个选择器的并集

选择器1,选择器2,选择器3选择的元素若产生并集,那么其仍然适用上面的优先级规则。

若规则按s1s2s3顺序进行,则a2部分为s2规则,a2部分为S3规则。

2.子孙的选择

先通过选择器1找到一部分元素,在这部分元素的子孙中应用选择器2的规则。

左边分别为:找到h1后在h1中选择img标签、找到id为hello的元素再在其中找到所有img标签、找到属于java类中所有的元素,再在其所有的元素中找到img标签。

selector1 > selector2 意思为先根据选择器1找到一批元素,再根据其找到的元素中找到符合选择器2的。

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
AWSECS:哪种网络模式具有... 使用AWS ECS中的awsvpc网络模式来获得最佳性能。awsvpc网络模式允许ECS任务直接在V...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...