Day3前端学习之路——CSS基本知识
课程目标
初步了解什么是CSS,掌握基本的CSS概念,语法,针对选择器特殊性的计算处理,以及学习如何设置一些简单的样式
任务一:回答问题
1.什么是CSS,CSS是如何工作的?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
2.CSS的基本语法是怎样的?
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
3.CSS选择器是什么概念,简单选择器和属性选择器是什么?
选择器通常是您需要改变样式的 HTML 元素。
简单选择器:
- 类型选择弃(p,div)
- 类选择器(.)
- ID选择器(#)
- 通用选择器(*)
- https://www.w3school.com.cn/cssref/css_selectors.asp
属性选择器:
- 简单属性选择:选择有某个或多个属性的元素
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基本知识的更多相关文章
- 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- Day2前端学习之路——HTML基本知识
课程目标: 通过制作自己的简历,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念 任务一:回答问题 1.HTML是什么,HTML5是什么? HTML是一种 ...
- 前端学习之路CSS基础学习二
CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height ...
- 前端学习之路CSS基础学习一
CSS CSS定义如何显示HTML元素,当浏览器读到一个样式表,它就按照这个样式表来对文档进行格式化. CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括包括属性和属性值.每个声明之后 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- web前端学习之HTML CSS/javascript之一
前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...
- 前端学习-基础部分-css(一)
开始今日份整理 1.CSS的导入方式 CSS的导入方式主要是有内联模式,行内模式,外部样式表 1.1 内联模式 内联模式:直接在<head>中直接写css,例如 p{ color:rgb( ...
- Web学习篇之---css基础知识(一)
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
随机推荐
- 网络流 - 最大流构图入门 bzoj 1305
一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢”).每个男孩 ...
- 定时器之Quart.net(2)
第一步:Install-Package Quartz namespace ProjectEdb { class Program { static void Main(string[] args) { ...
- mybatis in查询
原文地址:https://blog.csdn.net/u012427355/article/details/79580561 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集 ...
- VSCODE更改文件时,提示EACCES permission denied的解决办法(mac电脑系统)
permission denied:权限问题 具体解决办法: 1.在项目文件夹右键-显示简介-点击右下角解锁 2.权限全部设置为读与写 3.最关键一步:点击"应用到包含的项目",这 ...
- [新详细]让Keil5续签到2032年的办法,不可商用
# 使用方法和以前的版本一样,MDK 或者C51等均适用,供学习与参考.更多需要到这里购买→ → Keil官网:[http://www.keil.com/](http://www.keil.com/) ...
- airtest启用本地python环境的方法
实现目标,air如果想引用第三方python库,则需要在本地python欢迎执行运行 1.打开设置,红色箭头处,选择本地python路径 2.安装air的两个核心库airtest和pocoui 安装方 ...
- Redis 中的数据持久化策略(AOF)
上一篇文章,我们讲的是 Redis 的一种基于内存快照的持久化存储策略 RDB,本质上他就是让 redis fork 出一个子进程遍历我们所有数据库中的字典,进行磁盘文件的写入. 但其实这种方式是有缺 ...
- 深入并发锁,解析Synchronized锁升级
这篇文章分为六个部分,不同特性的锁分类,并发锁的不同设计,Synchronized中的锁升级,ReentrantLock和ReadWriteLock的应用,帮助你梳理 Java 并发锁及相关的操作. ...
- ATL窗口
标准的Windows应用程序框架: /*------------------------------------------------------------ HELLOWIN.C -- Displ ...
- FMPEG结构体分析:AVStream
注:写了一系列的结构体的分析的文章,在这里列一个列表: FFMPEG结构体分析:AVFrame FFMPEG结构体分析:AVFormatContext FFMPEG结构体分析:AVCodecConte ...