IFE 基础学院 第三天:让简历有点色彩

2018/08/29 FrontEnd

学习目标:初步了解什么是 CSS,掌握基本的 CSS 概念,语法,学习如何设置一些简单的样式。

第三天:让简历有点色彩

MDN CSS 知识点列表

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

  • 2018.08.30
  • 零碎的几段时间,大概 2 小时吧
  • 作业地址:https://codepen.io/shixinzhang/pen/gdwBbP

学习笔记

  • 需要记住的是,CSS 的属性和属性值都是区分大小写的。
  • CSS声明 按块分组,每一组声明都用一对大括号包裹,用 ({) 开始,用 (}) 结束。
  • 声明块里的每一个声明必须用半角分号(;)分隔,否则代码会不生效(至少不会按预期结果生效)。
  • 我们需要告知声明块,哪些元素是它应用的对象。
  • 通过在每个声明块前加上选择器(selector)来完成这一动作,选择器是一种模式,它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。
  • 选择器加上声明块被称为规则集(ruleset),通常简称规则(rule)
  • CSS 规则是样式表的主要组成块,但不是全部,还有其他类型的块,比如 @规则, 嵌套语句
/* 在padding和margin这样的简写属性中,值赋值的顺序是top、right、bottom、left。 
   它们还有其他简写方式,例如给padding两个值,则第一个值表示top/bottom,第二个值表示left/right */
padding: 10px 15px 15px 5px;

选择器用于定位我们想要样式化的网页HTML 元素。各种各样可用的CSS选择器允许我们精确选择要样式化的元素。

选择器文章概览

选择器分类:

  1. 简单选择器
  2. 属性选择器:
  3. 伪类
  4. 伪元素
  5. 组合选择器
  6. 多重选择器

简单选择器

通过元素类型、id 或者 class 匹配一到多个元素(文档中,多个元素可以用相同的类名,一个元素也可以有多个类名(以空格分割每个类名))。

一个ID名称必须在文件中是唯一的。

id 选择器是选择单个元素的最佳选择;class 选择器是为了选择多个元素

属性选择器

属性选择器可以根据其匹配属性值的方式分为两类:

  1. 存在和值(Presence and value)属性选择器
  2. 子串值(Substring value)属性选择器

存在和值(Presence and value)属性选择器

  • [attr]
  • [attr = val]

子串值(Substring value)属性选择器

  • [attr =val]: attr 的值是 val 或者以 val- 开头的元素

例子:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<meta name="keywords" content="HTML,ASP,PHP,SQL">
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<!-- <meta http-equiv="Refresh" content="5;url=http://www.baidu.com"> -->
	<style type="text/css">
		/*属性选择器
			所有具有 data-vegetable 属性的元素,不论值是什么
		*/
		[data-vegetable]{
			color:green;
		}

		[data-meat]{
			color: red;
		}

		/**
			data-vegetable 属性的值为 liquid 的元素
		*/
		[data-vegetable="liquid"]{
			background-color: goldenrod;
		}

		/**
			~= data-vegetable 属性值中包含 spicy 的元素
		*/
		[data-vegetable~="spicy"]{
			color: gray;
		}
	</style>
</head>
<body>
	我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>
</body>
</html>

验证问题

Search

    Table of Contents