仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点,敲一遍加深下印象也方便以后复习。
- CSS背景
- 背景色
- 使用background-color属性为元素设置背景色
- 背景色
例如:
p{background-color: gray}
增加内边距使背景色使背景色从元素中的文本向外延伸
p{background-color: gray; padding: 20px;}
- background-color不能继承
- background-color默认值为transparent(透明)
- 背景图像
- 使用background-image属性为元素设置背景图片
- 例如:应用于body
body {background-image :url(/i/eg_bg_04.gif);}
或应用于段落
p.flower{background-image: rul(a.jpg);}
- background-image也不能继承
- background-image默认值为none
- 背景重复
- 使用background-repeat属性对背景图像平铺
- 默认值为repeat表示垂直水平方向重复
- repeat-x或repeat-y可以设置平铺方向
- no-repeat不允许图像在任何方向上平铺
- 背景定位
- 使用background-position改变图像在背景中的位置
- 属性值可以用不同类型
- 关键字:center,top,right等
例如 background-position:center;
- 百分数值
例如 background-position:50% 50%;
百分数值同时应用于元素和图像,它使得图像中心和元素50% 50%(中心)对齐
- 长度值
长度值指的是元素内边距区左上角的偏移,偏移点是图像的左上角。
- 背景关联
- 使用background-attachment设置背景是否随内容滚动
- 例如:背景不随内容滚动
background-attachment :fixed;
- 默认值:scroll即背景随内容滚动
- CSS文本
- 缩进文本
- 使用text-indent属性使得段落首行缩进
- 例如 p{text-indent: 2em}
- 该属性只对块级元素有效,对行级元素无效
- 缩进文本
行级元素可以通过左内边距实现相同效果
- 使用负值
该属性可以设置为负值形成悬挂缩进的效果
为了避免超出浏览器窗口左边界,建议同时设置一个内或外边距
- 使用百分比值
该百分比值是相对于父元素的相应属性值
- 继承
text-indent属性可以被子元素继承
- 水平对齐
- text-align属性可以影响元素在文本行相互之间的对齐方式
- left,right,center会导致文本左对齐、右对齐和居中
- justify可以实现水平对齐
- text-align属性可以影响元素在文本行相互之间的对齐方式
- 字间隔
- 使用word-spacing属性改变字(单词)之间的标准间隔
- 默认值为normal即 0
- 值可以是 px,em,可以使负值
- 字母间隔
- 使用letter-spacing属性修改字符或字母之间的间隔
- 默认值为normal即 0
- 值可以是px,em,可以使用负值
- 字符转换
- 使用text-transform属性处理文本的大小写
- 属性包括四个值
- none
- uppercase
- lowercase
- capitalize:对首字母大写
- 例如:h1{text-transform:uppercase}
- 文本装饰
- 使用text-decoration属性装饰文本
- none:关闭应用到元素上的所有装饰,例如去除超链接的下划线
- underline:下划线
- overline:上划线
- line-through:中划线(删除线)
- blink:闪烁?
- 处理空白符
- 使用white-space属性影响用户代理对空格、换行和tab字符处理
- 默认属性normal即把所有空格合并为一个功课,忽略元素中的换行
- pre:浏览器会注意额外的空格,甚至回车
- nowrap:防止元素除了使用br元素以外的换行
- pre-wrap:保留空白符序列,正常换行
- pre-line:合并空白符序列,正常换行
- 文本方向
- 使用direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向
- 默认值ltr:显示从左到右的文本
- rtl:显示从右到做的元素
- CSS字体
- CSS字体系列
- 通用字体系列-拥有相似外观的字体系统组合(共5种)
- Serif字体
- Sans-serif字体
- Monospace字体
- Cursive字体
- Fantasy字体
- 特定字体系列-具体的字体系列(比如"Times"或"Courier")
- 通用字体系列-拥有相似外观的字体系统组合(共5种)
- 指定字体系列
- 使用font-family属性定义文本的字体系列
- 使用通用字体系列(不关心哪一种具体字体)
- 例如:body {font-family: sans-serif;}
- 用户代理会从sans-serif字体系列中选择一个字体,并将其应用到body元素中。(包括body的继承)
- 使用特定字体系列(设置更具体的字体)
- 例如:h1{font-family: Georgia}
- 如果用户代理没有相应字体,会使用其默认字体显示
- 组合使用
- 例如:h1{font-family: Georgia,serif}
- 如果用户没有指定的具体字体,但安装了该系列中的一种字体,用户代理就会使用同系列字体
- 指定一系列字体
- 例如:p{ font-family: Times, TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}
- 用户代理会根据该列表顺序查找,如果都不可用,则使用最后指定的通用字体中的某一个
- 使用引号
- 当字体名中有空格、#或$之类的符号是,需要在声明中加引号
- 单引号和双引号皆可,但在style中不能和style本身的引号冲突
- 使用通用字体系列(不关心哪一种具体字体)
- 字体风格
- 使用font-style规定斜体文本
- normal -文本正常显示
- italic -文本斜体显示
- oblique -文本倾斜显示
- italic和 oblique的区别
- italic对每个字母的结构改动来反映外观变化
- oblique则是对正常数值的文本进行倾向
- 通常在浏览器中看不出区别
- 使用font-style规定斜体文本
- 字体变形
- font-variant设定小型大写字母
- 小型大写字母不是一般的大写字母,也不是小写字母
- 例如:p{font-variant:small-caps;}
- 字体加粗
- font-weight属性设置文本的粗细
- 使用bold关键字将文本设置为粗体
- 使用100~900为字体指定9级加粗都
- 100对应最细
- 900对应最粗
- 400对应normal
- 700对应bold
- bolder会比继承值更粗
- lighter会比继承值更细
- 例如:
- p.normal{font-weight: normal;}
- p.thick{font-weight: bold;}
- p.thicker{font-weight:900}
- 字体大小
- font-size属性设置文本的大小
- 使用绝对值
- 将文本设置为指定的大小
- 不允许用户在浏览器中改变文本大小(不利于可用性)
- 绝对大小在确定了输出的物理尺寸时很有用
- 使用相对值
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文本大小
- 若未规定大小,普通文本的默认大小为16px,即1em
- 使用像素设置文本大小,例如:
- h1{font-size:60px;}
- h2{font-size:40px;}
- p{font-size:14px}
- 使用em来设置字体大小(W3C推荐)
- 1em等于当前字体的尺寸
- 例如:h1{font-size:3.75em}
- 结合使用百分比和EM
- 在所有浏览器中均有效的方案是为body元素(父元素)以百分比设置默认的font-size值
- 例如:
- 使用font-family属性定义文本的字体系列
- CSS字体系列
body{font-size:100%;}
h1{font-size:3.75em;}
h2{font-size:2.5em;}
p{font-size:0.875em;}
- CSS背景