外链论坛

 找回密码
 立即注册
搜索
查看: 93|回复: 3

CSS基本语法(一)

[复制链接]

2968

主题

144

回帖

9912万

积分

论坛元老

Rank: 8Rank: 8

积分
99129176
发表于 2024-6-30 10:59:23 | 显示全部楼层 |阅读模式

1 CSS基本语法

1.1 基本特性

选取器、属性、属性值三部分形成 selector {property: value}

1.2 引用办法

行内样式 <div style="color: red;"... 内部样式表 <head> <style type="text/css"> </style> ... </head> 外边样式表(页面加载的同期加载css样式表,倘若多个页面引用同一个css样式,则需重复加载) <link href="./css/1.css" rel="stylesheet" type="text/css"/> 导入式(1.页面加载慢的时候可能会有问题 2.存在浏览器兼容性问题) <style type="text/css"> @import url("./css/1.css"); </style>

1.3 引用优先级

行内样式 > 内部样式(内部定义 > @import引入) > 外边样式 注:链入外边样式和内部样式的优先级取决于离渲染的标签的位置,越近优先级越高(就近原则)

2 CSS选取

2.1 选取器(标签选取器和类选取器)

标签选取器:标签名为选取器,引用该样式的页面的对应标签都会运用该样式 类选取器: 1.标签中的class属性值为选取器,以点开头,并且在html页面中能够被多次调用 2.一个标签能够加载多个类选取器,用空格隔开。不一样式进行叠加,冲突样式属性已最下面的样式的属性为准(就近原则)

2.2 选取器(ID选取器)

同一个id值不可赋给多个标签,但同一个ID选取器在CSS样式设置时,能够被多次运用。 <style type="text/css"> #diTest{ font-size: 60px; } #diTest{ color: blueviolet; } </style>

2.3 群组选取器和全局选取

群组选取器(能够将任意多个选取器分组在一块例如元素选取器、类选取器、ID选取器等) p.classChoose,#diTest{text-decoration: underline} 全局选取器 *{text-decoration: underline}

2.4 后代选取

1.写法(用空格隔开): h5.class em{color: blueviolet} #id em{color: blueviolet} 2.优先级高于类选取

2.5 伪类选取

1.语法:选取器:伪类标识{} 2.应用场景:区别状态下表示一样式 3.链接伪类的书写次序::link > :visited > :hover > :active a:hover必要置于a:link和a:visited之后,才有效,a:active必要在a:hover之后,才有效。而link、visited两个伪类之间次序所说,谁在前都能够

3 CSS继承、层叠和优先级

3.1 继承和层叠

1.继承:子元素能够从父元素处继承部分样式 字体体积、颜色能够继承,border法继承 兼容性问题:IE6以下版本预览器继承特性 默认样式与继承样式冲突时,默认运用默认样式。针对有默认样式的元素,例如h1标签的默认字体体积为2倍于预览器的默认字体(16px),倘若设置body标签选取器的字体大小为12px,则h1的体积就为24px 2.层叠 可定义多个样式 不冲突时,多个样式层叠为一个 冲突时,按照样式的优先级来应用样式

3.2 选取器优先级

id选取器 > class选取器(class属性有多个样式时,按样式的定义就近原则,与引用的次序关系) > 标签选取

3.3 权值

权值相同




上一篇:大数据研发基本之CSS基本知识
下一篇:CSS(一)
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-5 15:25:50 | 显示全部楼层
论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。
回复

使用道具 举报

3065

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139036
发表于 2024-10-3 18:18:39 | 显示全部楼层
期待楼主的下一次分享!”
回复

使用道具 举报

3000

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109180
发表于 2024-10-12 14:32:51 | 显示全部楼层
外链论坛的成功举办,是与各位领导、同仁们的关怀和支持分不开的。在此,我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-24 06:41 , Processed in 0.101868 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.