JavaEE day4 初识CSS
创始人
2024-05-16 18:41:55
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的。

相关内容

热门资讯

安卓系统苹果手机识别,跨界融合... 你知道吗?在科技飞速发展的今天,手机已经成为了我们生活中不可或缺的一部分。而说到手机,安卓系统和苹果...
harmonyos系统是不是安... 亲爱的读者,你是否曾好奇过HarmonyOS系统与安卓系统之间的关系?是不是安卓的“亲戚”?今天,就...
手机怎么装系统安卓,安卓系统安... 手机卡顿了?想给安卓系统来个大变身?别急,跟着我一步步来,保证让你的手机焕然一新!一、准备工作在开始...
安卓Linux系统内网穿透,A... 你有没有想过,你的安卓手机里那些看似普通的APP,其实可能正在悄悄地帮你打通网络世界的任督二脉呢?没...
win怎么安装安卓系统,Win... 亲爱的读者,你是不是对Win系统上的安卓应用垂涎已久,但又苦于不知道如何安装安卓系统呢?别急,今天我...
升级小米平板安卓系统,畅享全新... 你有没有发现,你的小米平板用久了,是不是感觉有点卡呢?别急,今天就来教你怎么给它来个系统升级,让它焕...
捷豹安卓系统车载,捷豹安卓系统... 哇,你有没有想过,当你的手机和汽车融为一体,会是怎样的体验呢?想象你正驾驶着你的捷豹,车窗外的风景如...
安卓1到10系统,安卓1.0至... 你有没有想过,手机里的安卓系统就像是我们生活中的好朋友,从青涩的少年成长为稳重的青年呢?从安卓1.0...
安卓8.0停用系统应用,提升使... 你知道吗?最近安卓系统又来了一次大动作,那就是安卓8.0系统开始停用一些系统应用了。这可真是让人有点...
安卓系统修改mtu值,轻松提升... 你有没有想过,你的安卓手机其实是个小小的电脑呢?它里面藏着许多可以自定义的秘密功能,就像修改MTU值...
安卓平板改window系统,探... 你有没有想过,你的安卓平板其实可以摇身一变,变成一个Windows系统的电脑呢?没错,就是那种可以运...
时空猎人安卓苹果系统,探索无尽... 你知道吗?最近在手机游戏圈里,有一款叫做《时空猎人》的游戏可是火得一塌糊涂呢!不管是安卓用户还是苹果...
安卓9.0系统的电视,新一代电... 亲爱的读者们,你是否也像我一样,对科技新玩意儿充满好奇?今天,我要和你聊聊一个让人眼前一亮的话题——...
小pc安装安卓系统,轻松安装安... 你有没有想过,你的小PC也能变身成为安卓系统的超级玩家呢?没错,就是那个平时默默无闻的小家伙,现在也...
高通备份安卓系统,全方位数据安... 你知道吗?在这个科技飞速发展的时代,手机备份可是个不得不提的话题。尤其是对于安卓用户来说,选择一个靠...
谷歌安卓系统有多少,从诞生到全... 你有没有想过,那个无处不在的谷歌安卓系统,究竟在全球有多少用户呢?它就像一个神秘的数字,每天都在悄悄...
fc黄金传说安卓系统,畅享复古... 你有没有听说最近安卓系统上的一款超酷的游戏——《FC黄金传说》?这款游戏可是让不少玩家都沉迷其中,今...
变小的我安卓系统,安卓系统演变... 你有没有发现,最近你的手机好像变轻了?没错,说的就是你,那个陪伴你多年的安卓系统。它悄无声息地进行了...
vivo安卓系统小彩蛋,体验科... 你知道吗?在vivo的安卓系统中,竟然隐藏着一些超有趣的小彩蛋!这些小彩蛋就像是在手机里埋下的宝藏,...
安卓系统如何强制重启,安卓系统... 手机突然卡壳了,是不是又该给它来个“大保健”了?没错,今天就来聊聊安卓系统如何强制重启。别小看这个看...