课程目标

初步了解什么是CSS,掌握基本的CSS概念,语法,针对选择器特殊性的计算处理,以及学习如何设置一些简单的样式

任务一:回答问题

1.什么是CSS,CSS是如何工作的?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

2.CSS的基本语法是怎样的?

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

3.CSS选择器是什么概念,简单选择器和属性选择器是什么?

选择器通常是您需要改变样式的 HTML 元素。

简单选择器:

属性选择器:

  • 简单属性选择:选择有某个或多个属性的元素
a[href][title] {color:red;}
  • 根据具体属性值选择:选择有一个或者多个特定属性值的
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
  • 根据部分属性值选择:根据属性值中的某个词进行选择,需要使用波浪号(~)
p[class~="important"] {color: red;}
img[title~="Figure"] {border: 1px solid gray;}
  • 子串匹配属性选择器
类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
  • 特定属性选择类型
*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

4.文本样式都有哪些相关属性,对应哪些值?

CSS 文本属性

属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。left、right 和 center、justify(两端对齐)
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母大小写。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

CSS 字体属性

属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

任务二:选择器特殊性的计算方法

选择器的特殊性由选择器本身的组件确定。特殊性值表述为 4 个部分,如:0, 0, 0, 0。一个选择器的具体特殊性如下确定:

  • 对于选择器中给定的各个 ID 属性值,加 0, 1, 0, 0。
  • 对于选择器中给定的各个类属性值、属性选择或伪类,加 0, 0, 1, 0。
  • 对于选择器中给定的各个元素和伪元素,加 0, 0, 0, 1。伪元素是否有特殊性?在这方面 CSS2 有些自相矛盾,不过 CSS2.1很清楚地指出,伪元素有特殊性,百且特殊性为 0, 0, 0, 1。
  • 结合符和通配符选择器对特殊性没有任何贡献(后面还会更多地介绍这些值)。
div ul li              /* 0,0,0,3    3个元素选择器 */

div.aside ol li        /* 0,0,1,3    1个类选择器,3个元素选择器 */

a:hover                /* 0,0,1,1    1个伪类选择器,1个元素选择器 */

div.navlinks a:hover   /* 0,0,2,2    1个类选择器,1个伪类选择器,2个元素选择器 */

.affix.top             /* 0,0,2,0    多类选择器 注 */

input[type="text"]     /* 0,0,1,1    1个属性选择器,1个元素选择器 */

input[name="sex"][type="radio"]
/* 0,0,2,1 2个属性选择器,1个元素选择器 */ #title em /* 0,1,0,1 1个 ID 选择器,1个元素选择器 */ h1#title em /* 0,1,0,2 1个 ID 选择器,2个元素选择器 */ * /* 0,0,0,0 1个通用选择器 */

参考链接:http://www.mybbchina.net/zhongyaoxing/172482.html

任务三:修改第二天的简历,添加一些样式

https://codepen.io/cttv2/pen/gObvBrv?editors=1100

Day3前端学习之路——CSS基本知识的更多相关文章

  1. 前端学习之路-CSS介绍,Html介绍,JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

  2. Day2前端学习之路——HTML基本知识

    课程目标: 通过制作自己的简历,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念 任务一:回答问题 1.HTML是什么,HTML5是什么? HTML是一种 ...

  3. 前端学习之路CSS基础学习二

    CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height ...

  4. 前端学习之路CSS基础学习一

    CSS CSS定义如何显示HTML元素,当浏览器读到一个样式表,它就按照这个样式表来对文档进行格式化. CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括包括属性和属性值.每个声明之后 ...

  5. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  7. web前端学习之HTML CSS/javascript之一

    前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...

  8. 前端学习-基础部分-css(一)

    开始今日份整理 1.CSS的导入方式 CSS的导入方式主要是有内联模式,行内模式,外部样式表 1.1 内联模式 内联模式:直接在<head>中直接写css,例如 p{ color:rgb( ...

  9. Web学习篇之---css基础知识(一)

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

随机推荐

  1. NPOI导出Excel生成多个sheet

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  2. Django自定义状态码

    class BaseResponse: def __init__(self): self.code = 1000 self.data = None self.error = None @propert ...

  3. ORM执行原生SQL语句

    # 1.connectionfrom django.db import connection, connections cursor = connection.cursor() # cursor = ...

  4. 【中文乱码】深入分析 Java Web 中的中文编码问题

    深入分析 Java Web 中的中文编码问题 1.几种常见的编码格式 1.1 为什么要编码 在计算机中存储信息的最小单元是 1 个字节,即 8 个 bit, 所以能表示的字符范围是 0 ~ 255 个 ...

  5. mysql数据库的备份与数据恢复

    一.定时备份数据库  前段时间工作中搭建了HttpRunnerManager的接口自动化测试平台,由于平台中没有提供用例下载的功能及权限管理功能,自己也不会写前端,于是就想了办法,那就是备份数据库,如 ...

  6. Django 2.2

    Django 2.2 LTS 发布,长期支持版来了 django中文网:https://www.django.cn/course/course-3.html Django 2.2 已正式发布,这是一个 ...

  7. HTTP核心模块(HTTP Core)

    alias 语法:alias file-path|directory-path;默认值:no使用字段:location这个指令指定一个路径使用某个某个,注意它可能类似于root,但是document ...

  8. 自定义BeanDefinitionRegistryPostProcessor

    自定义BeanDefinitionRegistryPostProcessor 概述 BeanDefinitionRegistryPostProcessor继承自BeanFactoryPostProce ...

  9. http1.0、http1.x、http 2和https梳理

    http1.0.http1.x.http 2和https梳理 Http1.x 线程阻塞,在同一时间,同一域名的请求有一定数量限制,超过限制数目的请求会被阻塞 http1.0 缺陷:浏览器与服务器只保持 ...

  10. Python使用requests发送post请求的三种方式

    1.我们使用postman进行接口测试的时候,发现POST请求方式的编码有3种,具体的编码方式如下: A:application/x-www-form-urlencoded ==最常见的post提交数 ...