标签：10 07 样式 张鑫 元素 标签 div 选择器 css

实训第三天：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，还有无限的挑战等着我，我要继续努力.

标签：10,07,样式,张鑫,元素,标签,div,选择器,css
来源： https://www.cnblogs.com/zxscj/p/16471779.html

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