国外电商网站建设,.net网站吃内存,网站是否被k,做宣传册从哪个网站找素材文章目录 1 CSS选择器(Selectors)8. 后代(包含)选择器9. 直接子代选择器10. 兄弟选择器11. 相邻兄弟选择器12. 属性选择器 2 伪元素3 CSS样式优先级1. 相同选择器不同样式2. 相同选择器相同样式3. 继承现象4. 选择器不同权值的计算 4 CSS中的值和单位1. 颜色表示法2. 尺寸表示法… 文章目录 1 CSS选择器(Selectors)8. 后代(包含)选择器9. 直接子代选择器10. 兄弟选择器11. 相邻兄弟选择器12. 属性选择器 2 伪元素3 CSS样式优先级1. 相同选择器不同样式2. 相同选择器相同样式3. 继承现象4. 选择器不同权值的计算 4 CSS中的值和单位1. 颜色表示法2. 尺寸表示法 5 页面元素的显示模式6 流与文档流7 CSS盒子模型拓展作业 1 CSS选择器(Selectors)
8. 后代(包含)选择器
接续第四天的 DAY04CSS… 选中某个元素内的儿子、孙子、重孙子…元素 祖先选择器 后代选择器 { } 例如 div span { } 选中div下的所有span 易错点:空格别忘记写 使用场景: 内容结构比较简单没有那么多相同标签
9. 直接子代选择器
选中元素下面的直接儿子元素 divspan { } 选中div下的所有儿子span 直接子代选择器也可以多层逐级向下选择需要的元素
10. 兄弟选择器
选中元素后面的所有兄弟元素——不要前面的兄弟也不要子代 p~span { } 选中p后面的所有的span兄弟元素
11. 相邻兄弟选择器
选中元素后面紧挨着的相邻兄弟元素——不要前面的也不要有间隔的最多选中1个 pspan { } 选中p元素后面的紧挨着的那一个span兄弟元素
12. 属性选择器
[html标签的属性名]{ } 选中包含指定属性名的元素 [html标签的属性名值]{ } 选中包含指定属性名与属性值的元素
2 伪元素
伪元素就是我们给指定元素内部的前面/后面添加的内容我们还可以对添加的内容进行样式设置 ::before { } 表示在元素内部的最前面位置插入内容 ::after { } 表示在元素内部的最后面位置插入内容 注意content属性必须写如果暂时没有具体内容可以写成content:;
3 CSS样式优先级
1. 相同选择器不同样式
当多个选择器选中了同一个元素想要渲染不同的样式会叠加效果 p { color: red; } .txt { background-color: yellow; }
2. 相同选择器相同样式
相同选择器选中同一个元素而且要设置相同的属性会采用顺序读取的原则后面覆盖前面的 .txt {background-color: yellow;} .txt {background-color: green;}
3. 继承现象
在CSS中有一些属性是具有继承特性的也就是父元素的CSS属性会传递给子元素 最近的祖先样式比其他祖先样式优先级高就近原则 指定样式的优先级大于继承样式
4. 选择器不同权值的计算 原则 权值大的优先渲染 !important 行内样式 ID选择器类选择器伪类选择器标签名选择器通用选择器继承 权值会累加但是不会越级 比如11个类选择器值不是10*11110而是99.9不会越级到下一级 选择器优先级诀窍:控制范围越大的优先级越低
4 CSS中的值和单位
1. 颜色表示法 注意:rgba(255,0,0,1)表示红色 最后一位的含义 1是完全不透明 0是完全透明 0.5半透明如果是小数可以简写为 .小数部分。如0.5可以简写为 .5。
2. 尺寸表示法 5 页面元素的显示模式
一个HTML元素可以有多种显示模式 块级元素——display:block; 常见标签div h1~h6 p form table ul li… 排列方式按照书写的顺序从上往下依次排列 独占一行(一行指的是占父级元素宽度的100%)还可以自设宽高
行内元素——display:inline; 常见标签span a i b … 排列方式按照书写顺序从左往右依次排列可以和其他内容同行一行放不下才显示在下一行无法设置宽度和高度行内元素的大小是靠内容撑起来的 img元素是特殊的行内元素它自己有宽高还可以修改宽高
行内块元素——display:inline-block; 常见标签input button 既有行内元素的特点也有块级元素的特点 可以与其他元素共处一行(行内) 可以设置宽度与高度(块级)
6 流与文档流 7 CSS盒子模型 一个HTML元素需要占用页面的空间内容、边框、内容与边框之间的距离、不同元素之间的距离都需要占用页面空间所以我们需要了解具体的计算方式。 content: 内容区域 padding内间距—指的是内容与边框之间的距离 border: 边框 margin外间距——指的是元素与元素之间的距离 涉及到四个方向:lef左 right右 top上 bottom下
一个元素在水平方向上占用的总空间中英文都要 一个元素在竖直方向上占用的总空间中英文都要
拓展
面试题如果两张图片中间想要留一点空白可以有哪些实现方案?哪种好为什么
作业
1.自行总结并记忆HTML元素的三种显示模式和他们的特点 2.自行总结归纳 默认盒子模型总大小的计算公式 3.面试题还未讲完先总结好刚刚讲到的3种方案 4.完成汉唐首页导航栏 5.完成华硕无双商品卡片 尽量做到高仿不一样没关系明天会讲先尝试自己解决问题
