2022-07-10 第七小组 闫馨月 学习笔记

CSS

CSS:层叠样式表,相当于整个网页的美化。

如何显示html元素?

样式通常存储在样式表中(先定义样式表),再把样式表添加到html元素中

定义CSS样式的方式:

1.行内样式(内联样式)

                                        

2.内页样式(嵌入样式)

声明一个样式:在head标签中style中声明

给样式起名:

A:标签选择器(根据标签命名)

                        ​​​​    

B:类选择器

                

声明样式的时候需要用一个英文的“.”,选择样式通过class属性,class属性里不写“.”

C:id选择器(id:在当前页面的唯一标识,不能重复)

                        

声明样式需要一个“#”,对应的元素的id要匹配。

 3.外部样式(推荐)

CSS选择器

1.标签选择器

2.类选择器

3.ID选择器

4.选中页面上所有的标签(div,p)

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

5.选中div里面的p(无论嵌套多少层,都可以找到)(div p)

        ​​​​​​​                                ​​​​​​​

6.选中div里面的直接子标签(div>p)

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​

选中紧跟着div的p(div+p)

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​   

选中页面上所有带有type属性的标签([type])

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​

选中页面上所有带有type=text属性的标签([type=name])

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

选中页面上type属性包含某个单词的所有元素([type~=t])

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​       

伪类选择器(link,hover,active,visited

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

选中第几个对应的元素(nth:child())

        ​​​​​​​        ​​​​​​​        

选中所有被选中的元素(:checked)

        ​​​​​​​        ​​​​​​​        ​​​​​​​      

CSS层叠样式表

层叠式:如果样式冲突,遵循就近原则,哪个样式离结构近就执行哪个样式;如果样式不冲突,就不层叠,直接用。

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

继承性:子标签会继承父标签的某些样式,(文本的颜色、字号、背景颜色等)

权重(优先级)

优先级:类>标签>id

(1)继承的权重最低

(2)行内样式的权重最高

(3)如果权重相同,就近原则

(4)!Important改变权重(无限大)

        ​​​​​​​        ​​​​​​​        

CSS常用的单位

  1. px 像素(绝对单位)一个像素代表一个点。
  2. em (相对单位)会参考它的父级元素,设计字体时用的较多。父级元素的字体是16px,要设置元素的字体大小为2em,当前元素的字体大小就是32px。
  3. rem (相对单位)由页面决定。当我们改变了浏览器的字号设置时,页面的字号也会随之发生变化。应用在老人版电子设备。
  4. % 百分比(相对单位) 相对于父级元素的比例。

 总结

标签选择器、类选择器、ID选择器:⭐⭐⭐

伪类选择器:⭐⭐⭐

层叠样式表、单位:⭐⭐⭐

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值