IFE 基础学院 第四天:背景、边框、列表、链接和更复杂的选择器

2018/08/31 FrontEnd

学习目标:掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性。

w3school HTML 知识点列表

MDN CSS 知识点列表

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

日期,今天的学习总用时,今天学习的收获是什么

  • 2018.08.31 - 2018.09.15
  • 零碎的几段时间,大概三四小时吧
  • 把相对复杂的几种选择器学了一下,感觉理解的不够深刻,后面用到了再巩固吧
  • 作业地址:https://codepen.io/shixinzhang/pen/gdwBbP

学习笔记

背景

  • background-color
  • background-image
  • background-repeat
  • background-position (值为两个,第一个表示水平位置,第二个表示垂直位置,第二个默认是 center
  • background-attachment (fixed 图像相对于可视区是固定的,不会随着滚动)

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。

background-color 不能继承,其默认值是 transparenttransparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

事实上,所有背景属性都 不能 继承!

边框

http://www.w3school.com.cn/css/css_border.asp

边框绘制在元素的背景之上,所以不连续的边框,会露出背景。

边框样式 border-style:

四个值表示上右下左,顺时针;三个值表示上右下;两个值表示上下和左右;一个值表示全部样式。

具体的 11 个边框样式值在 这里

为元素框的某一个方向设置边框样式,可以用:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。

边框宽度 border-width:

只有当边框样式不为 none 时设置宽度才生效。

可选的值:

  • thin(细的)
  • medium
  • thick(粗的)
  • 10px(具体数值)
  • inherit (从父元素继承)

类似 border-style,也可以有多个值,不同个数的值表示的位置也不一样。

border-width: thin medium thick 10px;

当然也可以单独为某一条边框设置宽度:border-top-width, border-right-width

边框颜色 border-color

值可以是命名颜色,也可以是十六进制和 RGB 值:

p {
	border-style: solid;
	border-color: blue rgb(25%, 35%, 45%) #909090 red;
}

和前面一样,可以有多个值,也可以单独为某一条边指定颜色。

透明边框:border-color: transparent

链接

设置链接的几种状态对应的属性:

  1. a:link 普通的、未被访问的
  2. a:visited 用户已访问过的
  3. a:hover 鼠标浮在上面
  4. a:active 被点击时
a:link{
  color: #00ff00;
}
a:visited{
  color: #ffffff;
  text-decoration: none;
}
a:hover{
  color: #ff0000;
  text-decoration: underline;
}
a:active{
  color: #000000;
}

选择器

选择器的分组是指给许多标签用同样的样式:

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

上下文选择器/派生选择器

根据上下文关系设置指定标签的样式,比如设置某个 li 中的 strong 元素的样式:

//css
li strong{
  font-style: italic;
  font-weight: normal;
}
//HTML
<li> <strong>测试上下文选择器/派生选择器</strong></li>

伪类选择器

我理解的“伪类”就是状态

表示标签元素在某种状态下的样式,在标签后加一个冒号 :` 和状态,比如前面链接的几种状态就是:

a:link{
  color: #00ff00;
}
a:visited{
  color: #ffffff;
  text-decoration: none;
}

标签 冒号 状态

先学一个根据规则 选择第几个同类元素 的伪类:nth-of-type:


<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		/*奇数行*/
		p:nth-of-type(2n+1){
			color: red;
		}
		/*偶数行*/
		p:nth-of-type(2n){
			color: green;
		}
		/*第一行*/
		p:nth-of-type(1){
			font-size: 20px;
		}
	</style>
</head>
<body>
	<a href="https://shixinzhang.top/">张拭心的博客</a>

	<div>这段不参与计数</div>
	<p>第 1 段</p>
	<p>第 2 段</p>
	<p>第 3 段</p>
	<div>这段不参与计数</div>
	<p>第 4 段</p>
	<p>第 5 段</p>
</body>
</html>

伪类有很多,后面用到了再一个个学吧,MDN 伪类链接

伪元素

伪元素和伪类不同在于它使用时是两个冒号:

p::after{
	content: 'add content';
}

它的作用是:选择某个元素的某个部分,而不是伪类那样满足某种状态。

常见是 使用 ::before::after 配合 content 给某个元素的前面或者后面添加元素。

还有 ::first-letter ::first-line 等选择第一个字母或者第一行等等,见 MDN 伪元素页面

组合选择器

MDN 组合选择器

看的有点懵啊,不太明白…

大概明白的是,使用加号链接的两个选择器,表示紧挨着第一个连接器的第二个连接器。

举个例子,下面的 HTMl 中有两个段落,但如果只想修改紧挨着 h1 标题标签的段落的样式,可以这样:

HTML:


<h1>Welcome to my website</h1>

<p>Hello, and welcome! I hope you enjoy your time here.</p>

<h2>My philosophy</h2>

<p>I am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and <a href="#">drink green tea</a>.</p>

CSS:

h1 + p {
  font-style: bold;
  color: blue;
}

选择器的优先级

MDN 层叠和继承

这一部分也容易搞混,需要重复看!

  • 重要性:!important > id > class > element 选择器
  • 专用性越强优先级越高,单独写在元素的 <style> 属性中的样式最高
  • 相同重要性和专用性,就看在源代码中的顺序

不建议使用 !important ,这回导致调试复杂 CSS 变得困难。

验证问题

  • 背景,边框,列表,链接相关属性
  • CSS 各种选择器的概念,使用方法及使用场景
  • CSS 选择器的优先级

派生/上下文选择器、伪类、伪元素选择器、组合选择器

优先级

覆盖、去除继承的样式

Search

    Table of Contents