css层叠样式表第二天css02

这里写目录标题

css层叠样式表第二天css02
- ==元素背景样式==(重点)
- ==height==
- ==width==
- ==overflow==
- ==文本样式==(重点，通常可继承父元素)
- ==知识点应用1==
- ==效果图1==
- ==知识点应用2==
- ==效果图2==

元素背景样式(重点)

1. 背景颜色 background-color

支持颜色名称red,blue,white,black
rgb模式rgb(0, 0, 255)
颜色代码 #ffffff
rgba(0, 0,
255,0)，在rgb的基础上多一个透明度的变化，a的变化是0-1之间，0是全透明，1是不透明。可以实现颜色透明度的变化。
transparent 背景透明，默认值。

background-color: rgba(0, 0, 255,0.5); /*元素背景颜色,css的所有颜色的值写法一致*/

2. 背景图片background-image
url()引入一个图片地址，可以是本地路径或者网络路径(网址不存在了，图片就不能显示),图片路径不加""

函数: css里面带有()的，不同的函数有不同的功能

background-image: url(./imgs/shop_15.jpg);

3.背景重复 background-repeat

repeat 垂直水平平铺(默认)
no-repeat 不平铺，只显示1张背景图
repeat-x 水平方向平铺
repeat-y 垂直方向平

4.背景图片定位，改变图片的位置 background-position
background-position: x y; x是水平方向的距离，y是垂直方向的距离，参考点(圆点)是左上角，如果x，y的值一样，可以简写为1个。

background-position: 30% -100px;

可以给位置关键词:水平位置(x) center居中 left居左 right居右垂直方向(y) top 顶部 center 居中
bottom底部
具体单位或百分比,可以给负数，负数是往圆点的反方向。
5. 多背景图background-image
多背景图,可以添加多个背景图。多个背景图用，分割。背景样式都可以用 , 号分割多组样式。

background-image:url(),url();

6. background-clip 背景裁剪

border-box (默认)按边框裁剪(边框以内背景可见)
padding-box 内边距裁剪(内边距内的背景可见)
content-box 内容裁剪(内容部分的背景可见）

background-clip：padding-box

7. background-origin 图片定位

border-box (默认)图片从border开始定位
padding-box 从padding边缘开始定位
content-box 从内容开始定位

8. background-size 控制图片的大小
background-size:width height;
可以有多组值给多个背景图片。如果省略第二个参数，height则是auto自动计算

可以给像素和百分比(可以设置宽高 100%100% 强制拉伸图片铺满背景区域)
cover 把背景图片扩展至足够大，使图片铺满背景区域(会放大图片，保证图片比例)。
contain 把图片放到最大，使其宽度或者高度铺满背景区域。

9. background 背景属性的简写。

建议书写顺序: background-color,background-image,background-position/[background-size],repeat,origin,clip
background-position与background-size同时存在，则只需要加/区分。可以给多组值，background-color 不能写为多组值

height

可以是具体的单位(如px)百分比(80%),是父元素高度的百分比(父元素的高度乘以百分比)，如果父元素没有高度，则高度无效。

行内元素的width和height无效(行内元素的尺寸随内容)

width

元素的宽度，默认块级元素随父元素的宽度，修改宽度后，不会影响块级元素的特性。
可以是具体的单位（px）和百分比(80%),是父元素宽度的百分比(父元素的宽度度乘以百分比)

overflow

元素内容超出的显示方案，默认是溢出显示

auto 超出的方向出现滚动条，可以滚动显示完数据(x方向超出则x方向显示滚动条，y方向超出，则y方向显示滚动条)overflow:auto;
hidden 溢出隐藏，超出的元素，隐藏显示。 overflow: hidden;

文本样式(重点，通常可继承父元素)

1. 首行缩进text-indent
浏览器默认字体是16px大小，缩进两个中文字符的宽度是32px,可以给负数，往左边移动。

2. 字体大小font-size
可以给具体单位。font-size的尺寸一般是字符的高度。一般浏览器最小字体是12px,小于12px则会显示12px的大小。

px 固定的物理像素点
em 相对于父元素font-size的尺寸(1em=父元素字体尺寸)
百分比，相对于父元素font-size的百分比尺寸。

3. 字体颜色color
字体颜色，和背景颜色写法一致,可以用rgb(),rgba()可以实现字体颜色透明,颜色代码，颜色名称等

4. 文本对齐方式：text-align
left左对齐，center居中对齐，right居右，

text-align:left;

5. 单词间距，默认是以空格区分单词。 word-spacing

 word-spacing: 10px;

6. 字间距，字母之间的距离，letter-spacing

letter-spacing: 10px;

7. 字母转换：text-transform

none 默认，不做任何处理
uppercase 全转大写
lowercase 全转小写
capitalize 首字母转大写

text-transform:capitalize

8. 文本装饰,可以给文本添加线条text-decoration

none 没有任何装饰
underline 下划线,在底部添加线条
overline 上划线，在顶部添加线条
line-through 删除线，在中部添加线条

text-decoration:underline

9. 文本空格和换行处理white-space

normal默认，空格会被浏览器忽略，长单词超出元素不会换行 nowrap 文本不会换行，在同一行显示
pre-wrap 保留输入的空格，会按单词换行
pre 类似于pre标签，保留输入的格式
pre-line 合并空白符号，保留换行符号
inherit 继承父元素的white-space

white-space:pre-line

10. direction 文本方向
ltr 默认从左往右, 需要配合 unicode-bidi:bidioverride 改变字符方向。
rtl 从右往左
inherit 继承父元素

direction: rtl;unicode-bidi: bidi-override;

11.文本行间距:两行文本直接的距离。line-height

顶线到底线的距离是font-size的大小
line-height 减去font-size就是行间距的距离
文本的上边和下边的距离是行间距/2 。
line-height = font-size + 半行间距*2
当line-height =元素的高度，单行文本可以垂直居中

line-height:20px

12. 调整文本垂直对齐方式，vertical-align
主要是调整该元素和其他文本元素的对齐线

baseline 基线对齐(默认)
top 顶线对齐
middle 中线对齐
bottom 底线对齐
text-top 元素与父元素文本顶部对齐
text-bottom 元素与父元素的底部对齐
% 百分百，可以给负数。
sub 下标元素，类似sub标签
super 上标元素，类似sup标签

vertical-align:middle

13. 字体加粗:font-weight

数组是100 - 900
normal 是400粗度
bold 类似于700粗度
bolder 类似于900粗度

14. 字体系列 font-family
字体系列，可以用逗号分割，指定多种字体，会按顺序查找字体，找到位置，没有找到则显示默认字体。

 font-family: 余繁新语,微软雅黑,'Cambria Math';

字体没有特殊符号和空格，不加双引号或单引号。
双引号""和单引号’'是一样的，表示字符。双引号里面只能用单引号，单引号里面只能用双引号。

15. 字体样式 font-style
normal普通样式(默认),
italic 文本倾斜显示

font-style: italic;

知识点应用1

效果图1

知识点应用2

效果图2

CSS层叠样式表——元素背景和文本样式相关推荐

CSS基础-03-字体和文本样式
文章目录前言一.字体样式大小粗细是否倾斜字体类型拓展:层叠性字体font相关属性的连写二.文本样式文本缩进文本水平对齐方式文本修饰行高前言字体和文本样式一.字体样式大 ...
CSS学习Day2-字体和文本样式
-字体和文本样式目标:使用字体和文本相关样式修改元素外观样式 <style>p{font-size: 30px;}</style> </head> <bod ...
CSS定位元素--背景
2019独角兽企业重金招聘Python工程师标准>>> CSS 里也一样,每个元素盒子都可以想象成由两个图层组成.元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填 ...
css伪元素实现小圆点样式——css基础积累
最近在做后台管理系统,遇到一个需求,需要在菜单中添加一个小圆点样式.此时可以通过css伪元素样式来实现. .parent-node {font-size: 14px;color:#999999;&am ...
阿ken的HTML、CSS的学习笔记_文本样式属性（笔记三）
前段时间国庆中秋那会儿学校放八天假几乎所有人都选择回家或者是出去玩儿而我选择留在学校这边儿找一个晚七到早七的兼职去警醒一下浑浑噩噩的自己整栋宿舍楼就剩下我和我的一个舍友虽不过十月深秋却让人 ...
css 设置元素背景为透明
要设置某一元素的背景为透明,在 chrome .firefox.opera 下是这样的: background-color: rgba(0, 0, 0, 0.4); rgba 中的最后一个参数 0.4 ...
CSS给元素添加边框（样式、颜色、宽度）
给元素添加边框 CSS边框属性允许你指定一个元素边框的样式和颜色, 和边框宽度. 可以使用 border 属性将边框样式,颜色,和宽度一起设置. 如果不设置其中的某个值,也不会出问题,比如 bord ...
CSS学习笔记4：文本样式
首行缩进 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
文本样式，CSS字体和背景
文本样式,CSS字体和背景一.文本样式二.字体三.背景一.文本样式 CSS的文本属性可以定义文本的外观.通过这些属性我们可以改变文本的颜色和字符间距等. 在设定样式之前我们需要了 ...

CSS层叠样式表——元素背景和文本样式