ife2018 零基础学院 day 4
第四天,背景边框列表链接和更复杂的选择器
背景,边框,列表,链接相关属性
背景
元素的背景是指,在元素内容、内边距和边界下层的区域。
属性 | 描述 |
---|---|
background-color | 为背景设置一个纯色。 |
background-image | 把图像设置为背景。线性渐变是通过linear-gradient()函数传入的,它是一个background-image属性的值。 |
background-position | 指定背景应该出现在元素背景中的位置。 |
background-repeat | 指定背景是否应该被重复(平铺)。 |
background-attachment | 当内容滚动时,指定元素背景的行为 |
background | 在一行中指定以上五个属性的缩写。 简写属性,作用是将背景属性设置在一个声明中。 |
background-size | 允许动态调整背景图像的大小。 |
边框
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度(border-width)、样式(border-style),以及颜色(border-color)。
列表
列表有三种:无序列表、有序列表、描述列表
可以在 <ul>
或 <ol>
元素上设置的三个属性:
- list-style-type :设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。
- list-style-position :设置在每个项目开始之前,项目符号是出现在列表项内,还是出现在其外。
- list-style-image :允许您为项目符号使用自定义图片,而不是简单的方形或圆形。
链接
链接存在时处于不同的状态,每一个状态都可以用对应的 伪类 来应用样式:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- a:focus - 链接被选中。一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候,或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
CSS 各种选择器的概念,使用方法及使用场景
简单选择器(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)跟伪类很像,但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (:
最新文章
- mac下配置openCV
- 实现a标签中的各种点击(onclick)事件的方法
- 端口被占用的解决方案 sql server 10048 错误
- Response 对象
- MongoDB 副本集的相关概念【转】
- C# 热敏打印机 Socket 网络链接 打印 图片
- Sprint第三个冲刺(第五天)
- 函数的重载与 泛型(generic)有什么不同?
- Ubuntu上架设PPPoE Server
- 减少GC开销的5个编码技巧
- getReadableDatabase 和 getWritableDatabase的区别
- WinForm中控件位置不随窗体大小的变化而改变
- 在C#中,Windows Console控制台 设置控制台标题、禁用关闭按钮、关闭快速编辑模式、插入模式
- 洗礼灵魂,修炼python(68)--爬虫篇—番外篇之webbrowser模块
- IE报错:[vuex] vuex requires a Promise polyfill in this browser.
- The each() function is deprecated报错的解决方法
- 实现两个Mysql数据库同步
- 解决win10不显示coreldraw x4/5/6菜单栏
- YYYY-mm-dd HH:MM:SS 时间格式
- 初识angularJS的基本概念
热门文章
- SqlServer 连接 相关。
- retrofit+rxjava封装
- 在windows上安装VTK
- <;笔记>;三码合一
- hadoop2.7集群安装
- 熟悉常用的Linux操作
- API网关-Ocelot概述
- Postman+Newman+jenkins实现API自动化测试
- pip 安装模块时出现error: Microsoft Visual C++ 14.0 is required. Get it with ";Microsoft Visual C++ Build Tools";:
- 一分钟理解 HTTPS 到底解决了什么问题