2022-07-10 第二小组 张鑫 学习笔记

实训第三天：css

1.知识点

定义css样式的方式（理解）

1.行内样式

如果当前的样式不需要复用，可以使用行内样式

优先级

2.内页样式（嵌入样式）

①标签选择器

②类选择器，声明样式的时候需要用一个英文的，选择样式通过class属性，不需要写.

③id选择器，声明样式的时候需要用一个#，对应的元素id要匹配

3.外部样式（推荐）

css选择器（理解）

1.标签选择器*

2.类选择器*：一个标签元素是可以选择多个样式，样式名中间用空格隔开

3.id选择器 

css层叠样式表

层叠性（了解）

1.如果样式冲突，遵循就近原则，哪个样式距离就执行哪个样式

​2.如果样式不冲突，就不层叠

继承性：子标签会继承父标签的某些样式：文本颜色，字号，背景颜色...

优先级：类>标签>id

权重（了解）

 1.继承的样式权重最低

​ 2.行内样式权重最高

​ 3.如果权重相同，就近原则

​ 4.！important 无限大

css常用单位（基本了解）

1.px像素：绝对单位，一个像素代表一个点

2.em:相对单位，参考父级元素。父级元素的字体是10px，要设置元素的字体大小为2em，当前元素的字体就是32px

3.rem：相对单位，参考页面。当我们改变了浏览器的字号设置，页面的字号也会随之发生改变。应用老人版

4.百分比：相对于父级元素的比例。

基础标签（基本了解）

style 标签(div)，类(.bg)，id(#spring)

link:引入外部css

div,p：选择页面上所有的div和p

div p*：选中div里面的p，无论嵌套多少层，都可以找到

div>p*：选中div里的直接子元素p

div+p：选中紧跟着div的p

link:默认样式

hover:悬停样式

active：激活样式

visited:点过的元素

nth-child()：选中第几个对应元素

font-size：字体大小

background:背景

list-style-type:列表类型

list-style-position:列表位置

border:边框

radius:半径；collapse：折叠；

display：区块

inline：行级；block:块级；inline-block：内联块

 

盒子模型（基本理解）

width.height：表示内容区的宽和高

margin:外边距，元素距离上一个元素的位置

padding:内边距，本元素内部空出的距离

border：边框线

absolute:绝对定位
当前的文档流可以理解为上天了参照物是已经定位的父级元素

relative:相对定位
参照物是已经定位的父级元素占有原位置，不会上天 父相子绝

static:文档流 (默认）

fixed:浮动

visibility: hidden：元素隐藏 ；scroll ：滚动条 ；visible ：溢出

2.截图

总结：结合昨天所学的html，加上老师的指导，最终我成功将表单页面美化成功！在写代码的时候也遇到了很多问题，比如嵌套的方式，还有对盒子模型的深度理解还需要加强，感觉学的好多啊，两天时间几乎讲了学校一个学期学的内容，每天都太充实了。我一定要一直坚持努力，把每个部分都慢慢理解透彻，可能一开始让我自己想怎么做还不是那么容易，但是我不会放弃，积少成多吧。1/40，还有无限的挑战等着我，我要继续努力.