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

第四天,背景边框列表链接和更复杂的选择器

作者李博课程第四天,背景边框列表链接和更复杂的选择器740次浏览32019-05-24 14:28

CSS背景

为元素设置背景颜色

p {background-color: red;}

为元素设置背景图片

p {background-image: url(/i/eg_bg_04.gif);}

背景重复平铺

p {background-repeat: repeat-x;}
p {background-repeat: repeat-y;}

背景定位

p {background-position: top;}
p {background-posotion: center;}

背景关联

p {background-attachment: scroll;}
p {background-attachment: fixed;}

CSS 边框

边框样式

p {border-style: solid;}
p {border-style: dashed;}

边框的宽度

p {border-width: 1px;}

边框的颜色

p {border-color: blue;}

CSS 列表

列表样式

ul {list-style-type: square;}

列表项图像

ul {list-style-image: url(XX.jpg);}

列表标志位置

ul {list-style-position: inside;}

CSS 链接

链接的四种状态

a:link------未被访问的链接

a:visited-----已访问的链接

a:hover-----标指针位于链接的上方

a:active----链接被点击的时刻

去掉链接中的下划线

a:line {texe-decoration: none;}

选择器

多选选择器

h1,h2,h3,h4,h5,h6 {color: green;}

派生选择器

根据上下文关系来选择

li strong {color: blue;}

伪类

以冒号作为前缀,添加到选择器的末尾,在特定状态下才被呈现到指定的元素时,就可以往元素的选择器后面加上对应的伪类

例:

a:link------未被访问的链接

a:visited-----已访问的链接

a:hover-----标指针位于链接的上方

a:active----链接被点击的时刻

子元素选择器

h1 > strong {color: red;}

相邻兄弟选择器

h1 + p {margin-top: 50px;}

优先级

多重样式优先级顺序

继承,通用选择器(*)----0000

元素(类型)选择器------------0001

类选择器,伪类--------------0010

id选择器-----------------------0100

行内样式----------------------1000

!important-----最高权重

权重计算:

数位之间没有进制

CSS 优先级法则:

1.选择器都有一个权值,权值越大越优先;

2.当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

3.创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

4.继承的CSS 样式不如后来指定的CSS 样式;

5.在同一组属性设置中标有"!important"规则的优先级最大;

0条评论