【百度前端学院 Day4】背景边框列表链接和更复杂的选择器
1. 背景
背景指的是元素内容、内边距和边界下层的区域
(可用background-clip修改)
- background-color 背景色
- background-image 背景图片(url)
- background-repeat 背景重复
- repeat 在水平垂直方向上都平铺
- repeat-x / repeat-y 只在水平/垂直方向上重复
- no-repeat 不允许图像在任何方向上平铺
- background-position 背景定位
- top、bottom、left、right 和 center(可以一水平一垂直成对出现,只出现一个默认center)
- 长度值,如 100px 或 5cm(只应用于元素,偏移点是图像的左上角) 先水平再垂直
- 百分数值(百分数值同时应用于元素和图像,左上角为0% 0%)
- background-attachment 相对于可视区是固定的(fixed)/默认值滚动(scroll)
2. 边框
样式
solid、dotted、dashed、double、groove、ridge、inset、outset、none、inherit
实线上边框、点线右边框、虚线下边框和一个双线左边框:
border-style: solid dotted dashed double; //top-right-bottom-left 的顺序
宽度
border-width:指定长度值,比如 2px 或 0.1em/3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick
"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。
颜色
border-color
可以所有边框属性在一个声明中:border: medium double rgb(250,0,255);
3. 列表
要修改用于列表项的标志类型,可以使用属性 list-style-type
想对各标志使用一个图像,这可以利用 list-style-image 属性(url)
4. 链接
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
次序规则:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
5. 选择器
选择器的分组与继承
分组:逗号隔开
继承:特殊规则就可以摆脱继承
派生选择器
通过依据元素在其位置的上下文关系来定义样式(上下文选择器)
伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
两者区别在于: 伪类的效果可以通过添加一个实际的类
来达到,而伪元素的效果则需要通过添加一个实际的元素
才能达到
用于选择处于特定状态的元素,例如,它们是其类型的第一个元素,或者它们被鼠标指针悬停。(因为行为被定义为一个类)
1. 简单伪类
:last-child
:only-child
:invalid
- :first-child
2. 用户操作伪类
:hover
- 上文提到的; 仅当用户将指针移动到元素(通常是链接)上时才适用。:focus
- 仅在用户使用键盘控件聚焦元素时适用。
伪元素:::before和::after
伪元素与content
属性一起使用称为“生成的内容”
组合
1. 后代组合器 有共同的祖先(直接空格)
2. 子组合器 第一个选择器的直接子元素(用>连接) //比如选择的是ul>li 那么ul-span-li就不能算了
3. 相邻同级组合器 与第一个选择器同级的第一个选择器2元素(用+连接)
4. 通用同级组合器 与第一个选择器同级的所有选择器2元素(用~连接)
6. 选择器的优先级
层叠
①按特殊性排序,特殊性高的优先
②按出现顺序排序,越后出现的权重就越大。
③!important总是优先于其他规则
特殊性:
内联样式1000;
ID属性100;
类属性/属性选择/伪类010;
元素/伪元素001
通用选择(*
),组合子(+
,>
,~
,'“),以及否定伪类(:not
)对特异性没有影响。
继承控制:
inherit
将应用于选定元素的属性值设置为其父元素的属性值。实际上,这“继承”。
initial
将应用于选定元素的属性值设置为该属性的初始值。
unset
将属性重置为其自然值,这意味着,如果该属性是自然继承的,则其行为类似于inherit
,否则,其行为类似于initial
。
重置所有属性值: all: unset;
【百度前端学院 Day4】背景边框列表链接和更复杂的选择器的更多相关文章
- Day4前端学习之路——背景边框列表链接和更复杂的选择器
课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性 主要内容: 背景属性 边框 列表 链接 其他选择器 选择器概览:https://www.w3school.com. ...
- 百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 百度前端学院-基础学院-第20到21天之setTimeOut与setInterval
setTimeout()可以使用clearTimeout()关闭 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 注意:setInterv ...
- 百度前端学院-基础学院-第七天到第八天之BFC
1.BFC简介 BFC全称"block formatting context",中文为“块级格式化上下文”.特征总之记住一句话: BFC元素特征表现原则就是:内部元素无论怎么翻江倒 ...
- 百度前端学院task33源码及总结——听指令的小方块
任务描述 如图,实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框 在输入框中允许输入如下指令,按下按钮 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 百度前端技术学院(IFE)2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 百度前端技术学院task1.10
任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
随机推荐
- kudu_遇到的一些问题
最近在研究,自己搭建kudu遇到的一些问题,及解决方法,供大家参考. 1.java连接kudu,出现超时的问题,是因为kudu开启了认证模式: 通过查找 ...
- 文本分类—day00_导读
新公司有文本分类的服务,看上去很高级,想探究一下里面的东东.并且最近人工智能,深度学习实在是太火了,出去聊天,不会点cnn算法,都不好意思搭话.后面会出文本分类相关的内容,希望能做到类似实验楼一样的实 ...
- Java的集合(一)
转载:https://blog.csdn.net/hacker_zhidian/article/details/80590428 Java集合概况就三个:List.set和map list(Array ...
- SpringCloud异常处理统一封装我来做-使用篇
SpringCloud异常处理统一封装我来做-使用篇 简介 重复功能我来写.在 SpringBoot 项目里都有全局异常处理以及返回包装等,返回前端是带上succ.code.msg.data等字段.单 ...
- 蓝桥杯 试题 历届试题 填字母游戏 博弈+dfs剪枝
问题描述 小明经常玩 LOL 游戏上瘾,一次他想挑战K大师,不料K大师说: “我们先来玩个空格填字母的游戏,要是你不能赢我,就再别玩LOL了”. K大师在纸上画了一行n个格子,要小明和他交替往其中填入 ...
- web项目——javax.servlet.ServletException: Circular view path [registerForm]
报错: 控制台输出: 三月 21, 2019 10:12:32 上午 org.springframework.web.servlet.PageNotFound noHandlerFound 警告: N ...
- PHP 调用qq邮箱接口
html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 快服务常见TOP3审核雷区,再不过审就要崩溃啦!
仰天大笑出门去,审核提交很神气. 垂死病中惊坐起,突然驳回伤不起. 江州司马青衫湿,重新修改苦自知. 梦里花落知多少,回复马上就改好. 审批被驳回可能是最常见的令开发者头大的问题了,明明看起来&quo ...
- 2.Linux系统之硬盘与分区基础知识
我们是在虚拟机上安装的Linux系统.在安装的过程中,可能会遇到磁盘分区的问题,我们下面简单介绍一下分区的原理. 1.硬盘的基础知识 下面是一块空白的硬盘: 这是一块格式化后的硬盘: 格式化就是,在空 ...
- eatwhatApp开发实战(五)
上次我们为eatwhat添加了了删除功能和dialog对话框的介绍,今天我们来使用SQLite进行本地数据存储. 首先,我们定义一个SQL辅助类ShopInfoOpenHelper继承SQLiteOp ...