百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第四天的笔记

作者俞綮源课程第四天,背景边框列表链接和更复杂的选择器1525次浏览552018-04-27 20:42

day4 2018.4.27

背景 background

背景指的是元素内容、内边距和边界下层的区域
(可用background-clip修改)
属性 说明 备注
background-color 背景色 建议加上,作为后备,以防背景图像无法加载
background-image 背景图像 url(...)、渐变: linear-gradient(to 渐变的方向,开始的颜色,结尾的颜色) 渐变可以在中途选择其他的点
background-repeat 背景重复 repeat(默认)、repeat-x、repeat-y、no-repeat
background-position 背景定位 关键字、百分数值、长度值 坐标系为x坐标从左到右,y坐标从上到下;可以用于雪碧图
background-attachment 背景附着 scroll(默认)、fixed
background-size 背景图像大小 长度值、百分数值、cover、contain
background 背景简写 可按任意顺序放置

边框 border

属性 说明 备注
border 边框简写 [border-width border-style border-color /inherit] 三角形和梯形可以使用border+transparent来做
border-style 边框样式 none、hidden、dotted、dashed、solid、double、(groove、ridge、inset、outset、)inherit 样式预览
border-width 边框宽度 不支持百分比、默认为medium(3px)
border-color 边框颜色 透明:transparent 默认颜色同color
border-radius 边界圆角

列表 list

属性 说明 备注
list-style-type 列表标志 标志值
list-style-image 列表项图像 url() 可用background代替
list-style-position 列表项位置 inside(文本内文本环绕)、outside(默认)、inherit
list-style 列表简写 顺序:list-style-type list-style-position list-style-image(可省略某个值)

连接 a

根据所处状态决定样式

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */

注意: 一定要按照LVHA的顺序指定!

可用background为连接增加小图标

制作导航条的方法


选择器(2)

选择器参考手册

分组和继承
分组: 选择器用逗号分开,被分组的选择器可以分享相同的声明
继承: 正常情况下,子元素从父元素继承属性
但也会出现特殊情况,只能通过组选择器来对待
派生选择器
/* 根据文档的上下文关系来确定某个标签的样式 */
li p {

}
伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

两者区别在于: 伪类的效果可以通过添加一个实际的来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到

伪类

伪类

p:first-child指的是p元素是某元素的第一个子元素

伪元素

伪元素

组合器
Combinators Select
A,B 匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器).
A B 匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)
A > B 匹配任意元素,满足条件:B是A的直接子节点
A + B 匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)
A ~ B 匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)
层叠

①找出所有相关的规则,这些规则包含于一个给定元素匹配的选择器
②对显式权重对所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。创作人员的样式>读者的样式。有!important的读者样式强于其他所有样式(读者的重要声明>创作人员的重要声明>创作人员的普通声明>读者的普通声明>用户代理声明)
③按特殊性排序,特殊性高的优先
④按出现顺序排序,越后出现的权重就越大。

重要性:

!important总是优先于其他规则

特殊性:
内联样式1000;
ID属性100;
类属性/属性选择/伪类010;
元素/伪元素001
5条评论