CSS基础知识第二篇

CSS基础知识

  • 复合选择器
    • 后代选择器
    • 子元素选择器
    • 交集选择器
    • 并集选择器
    • 伪类选择器
  • 行高
    • 单行文本垂直居中
      • 行高和高度的三种关系
  • 标签显示模式
    • 什么是标签显示模式
      • 块级元素
      • 行内元素
    • 行内块级元素
    • 标签显示模式转换
  • CSS特性
    • 层叠性
    • 继承性
    • 优先级
  • CSS背景
    • 背景颜色
    • 背景图片
    • 背景平铺
    • 背景位置
    • 背景附着
    • 背景简写
    • 背景透明
  • CSS注释

复合选择器

后代选择器

概念
后代选择器又称为包含选择器

语法

.class h3{color:red;font-size:16px;}

作用
用来选择元素或元素组的子孙后代
把外层标签写在前面,内层标签写在后面,中间用空格分隔

子元素选择器

语法

.class>h3{color:red;font-size:14px;}

作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素
把父级标签写在前面子级标签写在后面中间跟一个>连接

交集选择器

条件
由两个选择器构成,找到的标签必须满足:既有标签一的特点也有标签二的特点

语法
CSS基础知识第二篇_第1张图片

第一个为标签选择器第二个为class选择器,二者间不能有空格

并集选择器

并集选择器是各个选择器通过 , 连接而成的,通常用于集体声明

应用
某些选择器定义的相同样式可利用并集选择器,让代码更简洁

语法
CSS基础知识第二篇_第2张图片
并集选择器用逗号隔开的,所有选择器都会执行后面样式

伪类选择器

作用
用于向某些选择器添加特殊的效果。如给链接添加特殊效果

链接伪类
a:link /* 未访问的链接 /
a:visited /
已访问的链接 /
a:hover /
鼠标移动到链接上 /
a:active /
选定的链接 */

行高

基线和基线的距离为行高

单行文本垂直居中

文字的行高等于盒子的高度,行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系

如果行高等于高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上

标签显示模式

什么是标签显示模式

标签以什么方式进行显示,比如div自己占一行, span一行多个

作用
网页标签非常多不同地方用不同类型的标签以便更好的完成网页

分类

块级元素

特点
一行只能放一个块
高度,宽度、外边距以及内边距都可以控制
宽度默认是容器(父级宽度)的100%
是一个容器及盒子,里面可以放行内或者块级元素

行内元素

特点
相邻行内元素在一行上,一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素
注意
链接里面不能再放链接
特殊情况a里面可以放块级元素

行内块级元素

特点
和相邻行内元素在一行上,但是之间有空白缝隙,一行可显示多个
默认宽度就是它本身内容的宽度
高度,行高、外边距以及内边距都可以控制

标签显示模式转换

块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;

CSS特性

层叠性

概念
层叠性是指多种CSS样式的叠加

原则
样式冲突,遵循的原则是就近原则
样式不冲突,不会层叠

继承性

概念
子标签会继承父标签的某些样式,如文本颜色和字号

优先级

概念
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时
选择器相同,则执行层叠性
选择器不同,就会出现优先级的问题

权重计算公式
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity

权重叠加
交集选择器后代选择器是有多个基础选择器组合而成,会出现权重叠加

继承的权重是0
修改样式要看该标签是否被选中
如果选中以上面公式计权重
如果没有选中,那么权重是0

CSS背景

背景颜色

语法

background-color:颜色值;  默认的值是 transparent 透明的

背景图片

语法

background-image : none | url(地址文件名)

背景平铺

语法

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数
repeat(背景图像在纵向和横向上平铺)no-repeat(背景图像不平铺)
repeat-x(背景图像在横向上平铺)repeat-y(背景图像在纵向平铺)

背景位置

语法

background-position : length || length

background-position : position || position

参数
length
百分数 | 由浮点数字和单位标识符组成的长度值
position
top | center | bottom | left | center | right 方位名词

背景附着

背景附着就是解释背景是滚动的还是固定的

语法

background-attachment : scroll | fixed

参数
scroll(背景图像是随对象内容滚动)fixed(背景图像固定)

背景简写

background:属性的值的书写顺序官方并没有强制标准的

语法

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景透明

语法

background: rgba(0, 0, 0, 0.3);

CSS注释

规则
/* 需要注释的内容 */ 进行注释的

你可能感兴趣的:(大学学习记录,css)