08 - hover初讲与文字属性初讲

鼠标悬浮伪类hover

状态是什么,页面中的元素的状态会变化吗?

状态是在不同的情况下,页面的元素表现出现不同的效果,可以理解为简单的交互

页面的元素会发生常见的状态的变化就是:鼠标悬浮效果叫做hover伪类

页面都是存在某种状态

hover的使用方法

1.在选择器中选择某些元素

2.并添加状态判断,满足条件就能加载样式

p{/* 满足某种条件的元素 */
    color: red; 
}

伪类的重点:

伪类:一个状态,如果去掉伪类,它必然会选中某些元素(变成正常的选择器),如果我把伪类加上去,选中元素样式生效

当悬浮之后样式会生效覆盖没有悬浮的样式,有优先级关系

伪类能设置什么样式?

改变的样式:

/* 下面这是列举一些出来而已 */
background-image
color
width/height
transition: .5s;
/*样式发生改变的时候会花时间,不是给hover,而是针对某个元素,要有针对性,不是针对某种状态*/

transition在哪里加,变化方式,不是给hover里面加,而是给盒子加,盒子的变化状态一直存在

文字font属性

字体font-family

字体:字体是页面元素的属性,不同的字体以逗号分隔开

font-family: "Microsoft yahei","宋体"

自定义字体的写法:

/*在css中写下面的代码*/
/* 先定义字体,后使用 */
@font-face{
    font-family: "定义字体的名字";
    src: url("资源路径");
}
选择器{
    font-family: "定义字体名字";
}

文字大小font-size

• px: 相对于分辨率的单位大小,相当于绝对长度单位
• %: 相对于父级容器字体大小的百分比
• em: 相对于父元素字体的大小设置
• rem: 相对于html标签的字体大小设置,常用于移动端
• font最小的字体大小是12px,默认16px

font-size: 16px;

文字粗细font-weight

如果字体可以写成变细或变粗,要求本来有粗细程度

整数	描述性词语
100	thin
300	lighter
400	normal
700	bold
900	bolder

文字属性font-style

• normal: 正常默认
• italic: 文字斜体
• oblique: 文字倾斜

行高line-height

line-height控制文字上下之间的距离

line-height减去文字大小就是行间距

单行文字的垂直居中，只要将行高与容器高设为相等即可。

行高重点

小型大写字母:font-variant: small-caps

文字属性:复合型写法

font: font-style font-variant font-weight font-size line-height font-family; 
/* font:font-size font-family必须要写 */
/* font-size/line-height两个属性之间要加斜杠 */

文本的特性

文本大小写text-transform

• uppercase 字母大写
• lowercase 字母小写
• capitalize 单词首字母大写

文本水平对齐方式text-align

• left: 文本左对齐(默认)
• right: 文本右对齐
• center: 文本居中对齐
• justify: 两端对齐,文字均分空隙

文本缩进text-indent

段落首行文本缩进

单位可以是px/em/rem

/* 常用 */
text-indent: 2em;/* em相对于父元素的文字的大小 */

文本修饰text-decoration

• underline 下划线
• line-through 中划线
• overline 上划线

字间距letter-spacing

每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！

• normal 默认值
• 数字 + 单位(允许负值)

词间距word-spacing

word-spacing定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。 调整空格的间距

• normal 默认值
• 数字 + 单位(允许负值)

空白方式white-space

• normal 默认值
• nowrap 不会换行,文本在同一行继续直到遇到标签为止

换行方式word-break

• break-all 强制换行

文本溢出text-overflow

• ellipsis 溢出省略

单行溢出显示省略号(…)

/* 文字不允许换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 溢出省略 */
text-overflow: ellipsis;

多行文本溢出显示省略号（…）

/* CSS3 盒子属性,兼容写法 */
display: -webkit-box;
/* 超出隐藏 */
overflow: hidden;
/* 溢出省略 */
text-overflow: ellipsis;
/* 从上往下换行 */
-webkit-box-orient: vertical;
/* 多余第二行的省略 */
-webkit-line-clamp: 2;