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

背景,边框,列表,链接相关属性

背景

MDN 背景

W3School 背景

元素的背景是指,在元素内容、内边距和边界下层的区域。

属性 描述
background-color 为背景设置一个纯色。
background-image 把图像设置为背景。线性渐变是通过linear-gradient()函数传入的,它是一个background-image属性的值。
background-position 指定背景应该出现在元素背景中的位置。
background-repeat 指定背景是否应该被重复(平铺)。
background-attachment 当内容滚动时,指定元素背景的行为
background 在一行中指定以上五个属性的缩写。 简写属性,作用是将背景属性设置在一个声明中。
background-size 允许动态调整背景图像的大小。

边框

W3School 边框

MDN 边框

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面:宽度(border-width)、样式(border-style),以及颜色(border-color)。

列表

W3SChool 列表

MDN 列表

列表有三种:无序列表、有序列表、描述列表

可以在 <ul><ol> 元素上设置的三个属性:

  • list-style-type :设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。
  • list-style-position :设置在每个项目开始之前,项目符号是出现在列表项内,还是出现在其外。
  • list-style-image :允许您为项目符号使用自定义图片,而不是简单的方形或圆形。

链接

W3School 链接

MDN 链接

链接存在时处于不同的状态,每一个状态都可以用对应的 伪类 来应用样式:

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻
  • a:focus - 链接被选中。一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候,或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。

CSS 各种选择器的概念,使用方法及使用场景

MDN 选择器

W3C 选择器

简单选择器(Simple selectors)

通过元素类型、class 或 id 匹配一个或多个元素。

类型选择器(又名元素选择器)

在 W3C 标准中,元素选择器又称为类型选择器(type selector)。

此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。

针对某个HTML元素设置样式

html {color:black;}
h1 {color:blue;}

类选择器

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是,文档中的多个元素可以具有相同的类名,而单个元素可以有多个类名(以空格分开多个类名的形式书写)。

.类型名A{},对类型名为A的元素设置样式,一个HTML文档中可以匹配多个元素

ID选择器

ID选择器由哈希/磅符号 (#)组成,后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。

#ID名A{},对ID名为A的元素设置样式,一个HTML文档中只能匹配一个元素

属性选择器(Attribute selectors)

通过 属性 / 属性值 匹配一个或多个元素。

CSS 2 引入了属性选择器。

  • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。

把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}

伪类(Pseudo-classes)

伪类和伪元素

概念:

匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。

使用方法:

一个 CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(pseudo-class)。

伪元素(Pseudo-elements)

概念:

匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。

使用方法:

伪元素(Pseudo-element)跟伪类很像,但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (:

ife2018 零基础学院 day 4的更多相关文章

  1. ife2018 零基础学院 day 3

    ife2018 零基础学院 第三天:让简历有点色彩 什么是CSS,CSS是如何工作的! 摘自CSS如何工作 什么是CSS CSS是一种用于向用户指定文档如何呈现的语言 - 它们如何被指定样式.布局等. ...

  2. 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端

    在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...

  3. ife 零基础学院 day 1 - 我为什么想学前端

    与前端结缘   我是后端研发,毕业四年,用了四年C#,一开始写ASP.NET,有时会在asp页面写简单的js和html,做点css样式调整.当时的感触是前端调试太费劲了,因为没有js.html.css ...

  4. ife 零基础学院 day 2

    第二天:给自己做一个在线简历吧 最后的验证,提出了几个问题,尝试解答一下 HTML是什么,HTML5是什么 HTML的定义摘抄自w3school的HTML 简介 HTML 是用来描述网页的一种语言. ...

  5. 辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装

    辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早独自一个人沉睡到天亮你无怨无悔的梦着那副本我知道你根本就不想上班你总是起不早,起不早放假总是短暂,上班太难请个病 ...

  6. IM开发者的零基础通信技术入门(二):通信交换技术的百年发展史(下)

    1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...

  7. 从零基础到拿到网易Java实习offer,谈谈我的学习经验

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  8. 《iOS开发指南:从零基础到App Store上架(第2版)》

    <iOS开发指南:从零基础到App Store上架(第2版)> 基本信息 作者: 关东升 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115348029 上架时间:201 ...

  9. 任务五:零基础HTML及CSS编码(二)

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

随机推荐

  1. android:动态申请权限(一)

    环境: android版本6.0 对应SDK版本23 动态申请权限说明:所有动态申请的权限,必须在AndroidManifest.xml中进行声明 步骤 1.新建一个android工程 默认创建即可 ...

  2. python 单例模式的四种实现方法及注意事项

    一.模块单例 Python 的模块就是天然的单例模式,因为模块在第一次导入时,会生成 .pyc 文件,当第二次导入时,就会直接加载 .pyc 文件,而不会再次执行模块代码. #foo1.py clas ...

  3. springboot 不同环境切换不同的配置文件

    开发的流程是本地>测试>预发布>正式,所以不同的环境,肯定是不同的配置文件,所以我们需要针对不同的环境做不同的配置切换. 下面我们来说说 springboot 是怎么来切换的: 1. ...

  4. Shell编写字符菜单管理-8

    第8章 Shell编写字符菜单管理 一.shell函数定义function menu(){ echo 'this is a func!!';} 二.shell函数使用menu 三.cat命令的here ...

  5. 在CentOS 7上安装和使用GlusterFS

    GlusterFS aggregates various storage servers over Ethernet or Infiniband RDMA interconnect into one ...

  6. Android中监控home键

    一.需求 在应用开发过程中,启动服务开启线程锁等待服务返回解锁,为了避免点击home键使线程锁卡死的bug,需要监控home键,解锁线程. 二.实现 在应用时,需要register和unregiste ...

  7. PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充

    荒废了一个多月了,重新捡起来,手生了不少.发现在<4.1下>的文章里没有 提到pcap库,实在是不应该. 在网络数据分析的工具中,tcpdump绝对是大名鼎鼎,tcpdump底层是libp ...

  8. 在ASP.NET MVC里对Web Page网页进行权限控制

    我们在ASP.NET MVC开发时,有时候还是得设计ASP.NET的Web Page网页(.aspx和.aspx.cs),来实现一些ASP.NET MVC无法实现的功能,如此篇<Visual S ...

  9. IDEA环境下GIT操作浅析之二-idea下分支操作相关命令

    上次写到<idea下仓库初始化与文件提交涉及到的基本命令>,今天我们继续写IDEA环境下GIT操作之二--idea下分支操作相关命令以及分支创建与合并. 1.idea 下分支操作相关命令 ...

  10. Javascript高级编程学习笔记(22)—— 对象继承

    继承是所有面向对象的语言最让人津津乐道的概念 许多面向对象的语言都支持两种实现继承的方式: 1.接口继承 2.实现继承 由于ECMAScript中没有函数签名,所以自然也是不支持接口继承 所以JS中能 ...