伪类和伪元素(二) 伪类和伪元素(二)选择第一个子元素使用另外一个静态伪类:first-child来选择元素的第一个子元素。(之前所说的:link和:visited也是静态伪类) 先看下面的代码: 12345<div> <p> 这是p层<em>这是em</em> </p></div> 12/*这里的含义是当p作为第一个子元素的时候 1970-01-01 CSS #CSS
CSS继承 继承🧑🏻💻写在前面:关于继承,在面试中只有一家公司提到了CSS的继承,记忆很深刻,整理下笔记如下: 基于继承机制,样式不仅会运用到指定元素,也会运用到其后代元素,🌰: 1<h1>这是标题<em>标题</em></h1> 12/*这里给元素h1指定样式,那么h1的后代元素em也会相应的改变样式,继承对于无需列表ul也是一样起作用的*/h 1970-01-01 CSS #CSS
伪元素选择器 伪元素选择器设置首字母的样式:first-letter设置了块级元素首字母的样式,并且仅仅对这首字母设置样式: 1p:first-letter { color: red; } 设置第一行的样式:first-line设置影响文本中第一行的样式: 1p:first-line { font-size: 200%; } ⚠️:在CSS2中(以前):first 1970-01-01 CSS #CSS
CSS字体 CSS字体字体系列 — font-family 初始值:用户代理指定的值 应用于:所有元素 继承性:有 CSS定义了5种通用的字体系列: 分别是Serif, Sans-serif, Monspace, Cursive, Fantasy: 当我们制定了一个元素的字体,用户代理会去寻找是否存在这个字体,如果存在这个字体那么就会显示;如果不存在这个字体,只会显示用户代理默认字体。 1970-01-01 CSS #CSS
基本元素框 基本元素框宽度和高度一个元素的wdith定义是左内边界到右内边界的距离;height定义的事上内边界到下内边界的距离。 ⚠️: 这个高度和宽度不能用到行内非替换元素中!!行内非替换元素的宽度与高度与其内容有关!! width 值: [length], [percentage(百分数)], inherit, auto 初始值: auto 应用于: 块级元素和替换元素 继承 1970-01-01 CSS #CSS
字间距、字母间距和文本修饰 字间距、字母间距和文本修饰字间距 — word-spacing 值: [length], normal, inherit 初始值: normal 应用于: 所有元素 继承性: 有 计算值: 对于normal,为绝对长度0,否则,是绝对长度 ⚠️: 在word-spacing中同时提供了负值, 负责把字间距拉近。CSS定义字:字可以是任何非空字符串组成的串,并且由某种非空白符 1970-01-01 CSS #CSS
文本对齐 文本对齐缩进和文本对齐首行缩进 --- text-indent 值: [length], [percentage(百分数)], inherit 初始值: 0 应用于: 块级元素(不可用在行内元素中,即使是img这种替换元素,但是块级元素中包含img元素是可以的) 继承性: 有 百分数: 相对于块级元素的宽度 这个属性是指块级元素的第一行缩进一个给定的长度, 值也可以为负 1970-01-01 CSS #CSS
基本视觉格式化(二) 基本视觉格式化(二)行内元素和行布局在《CSS权威指南》中,指出了em, a ,image这些标签都是行内元素。 基本术语 匿名文本 未包含在行内标签中的文本。 12<!--“这是p”和“又是p”就属于匿名文本,空格也算--><p>这是p<em>em</em>又是p</p> em框 之前文章font-size这一章节中,讲 1970-01-01 CSS #CSS
改变元素显示 改变元素显示display 常见的块级元素 div, p, h1-h6, table, form, ol, ul 常见的行内元素 span, strong, em, a, input, label, imp, br, select 值: none, inline, block, inline-block, list-item, run-in, table, inline-table 1970-01-01 CSS #CSS
基本视觉格式化(一) 基本视觉格式化(一)基本框(盒子模型) 块级元素 块级元素中,width一般指的是左内边界到右内边界的距离,height同理。 水平格式化1234567<!--在width中,指的是内容的宽度,而不是整个盒子的宽度;--><p style="width: 200px">展示内容</p><!--如果还指定了内边距(padding)和外边 1970-01-01 CSS #CSS