ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2022-07-10 第四小组 孙翰章 学习笔记

2022-07-12 19:35:04  阅读:94  来源: 互联网

标签:10 07 样式 标签 元素 孙翰章 选中 div 选择器


CSS

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

 

  1. 如何嵌入?(样式如何显示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)

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

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

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

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

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

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

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

CSS层叠样式表

  1. 层叠性:如果样式冲突,遵循就近原则,哪个样式离结构近就执行哪个样式;如果样式不冲突,就不层叠,直接用
  2. 继承性:子标签会继承父标签的某些样式,(文本的颜色、字号、背景颜色等)
  3. 权重(优先级)

优先级:类>标签>id

(1)继承的权重最低

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

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

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

CSS常用的单位

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

标签:10,07,样式,标签,元素,孙翰章,选中,div,选择器
来源: https://www.cnblogs.com/lionelsunhz/p/16471360.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有