CSS

元素背景样式background

背景颜色

background-color: rgba(0, 0, 255,0.5);

/*元素背景颜色 ,css 的所有颜色的值写法一致*/

支持颜色名称 red,blue,white,black

rgb 模式 rgb(0, 0, 255)

颜色代码 #ffffff

rgba(0, 0, 255,0) ，在 rgb 的基础上多一个透明度的变化， a 的变化是 0-1 之间， 0 是全透明，1 是不透明。可以实现颜色透明度的变化。

transparent 背景透明，默认值。

背景图片: 引入一张图片平铺满元素。

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

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

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

背景重复

background-repeat: repeat-y;

repeat 垂直水平平铺 ( 默认 )

no-repeat 不平铺，只显示 1 张背景图

repeat-x 水平方向平铺

repeat-y 垂直方向平铺

背景图片定位，改变图片的位置 background-position: 30% -100px;

background-position: x y; x 是水平方向的距离，y 是垂直方向的距离，参考点 ( 圆点 ) 是左上角，如果x ， y 的值一样，可以简写为 1 个。

1. 可以给位置关键词 : 水平位置 (x) center 居中 left 居左 right 居右垂直方向 (y) top 顶部 center 居中 bottom 底部

2. 具体单位或百分比 , 可以给负数，负数是往圆点的反方向。

height

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

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

width

元素的宽度，默认块级元素随父元素的宽度，修改宽度后，不会影响块级元素的特性。

百分比(80%), 是父元素宽度的百分比 ( 父元素的宽度度乘以百分比) 。

overflow

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

auto 超出的方向出现滚动条，可以滚动显示完数据(x 方向超出则 x 方向显示滚动条， y 方向超出，则y 方向显示滚动条 ) ： overflow: auto;

hidden 溢出隐藏，超出的元素，隐藏显示。 overflow: hidden;

文本样式

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

字体大小font-size: 可以给具体单位 , 可继承。

font-size的尺寸一般是字符的高度。

px 固定的物理像素点

em 相对于父元素 font-size 的尺寸 (1em= 父元素字体尺寸 )

百分比，相对于父元素 font-size 的百分比尺寸。

一般浏览器最小字体是 12px, 小于 12px 则会显示 12px 的大小。

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

文本对齐方式： text-align: left;

left 左对齐， center 居中对齐， right 居右，可继承

单词间距，默认是以空格区分单词。 word-spacing: 10px;

字间距，字母之间的距离，可继承， letter-spacing: 10px;

字母转换： text-transform: capitalize;

none 默认，不做任何处理

u ppercase 全转大写

l owercase 全转小写

capitalize 首字母转大写

文本装饰, 可以给文本添加线条 text-decoration: line-through;

none 没有任何装饰

underline 下划线 , 在底部添加线条

overline 上划线，在顶部添加线条

line-through 删除线，在中部添加线条

文本空格和换行处理 white-space: pre-line;

normal默认，空格会被浏览器忽略，长单词超出元素不会换行

nowrap 文本不会换行，在同一行显示

pre-wrap 保留输入的空格，会按单词换行

pre 类似于 pre 标签，保留输入的格式

pre-line 合并空白符号，保留换行符号

inherit 继承父元素的 white-space

direction 文本方向

direction: rtl;

unicode-bidi: bidi-override;

ltr 默认从左往右 , 需要配合 unicode-bidi:bidi-override 改变字符方向。

rtl 从右往左

inherit 继承父元素

文本行间距: 两行文本直接的距离。 line-height: 30px;

顶线到底线的距离是font-size 的大小， line-height 减去 font-size 就是行间距的距离，然后文本的上边和下边的距离是行间距 /2 。

line-height = font-size + 半行间距 *2

当line-height = 元素的高度，单行文本可以垂直居中。

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

baselin 基线对齐 ( 默认 )

top 顶线对齐

middle 中线对齐

bottom 底线对齐

text-top 元素与父元素文本顶部对齐

text-bottom 元素与父元素的底部对齐

% 百分百，可以给负数。

sub 下标元素，类似 sub 标签

super 上标元素，类似 sup 标签

字体加粗 :font-weight: 400;

数组是100 - 900

normal 是 400 粗度

bold 类似于 700 粗度

bolder 类似于900 粗度

字体系列，可以用逗号分割，指定多种字体，会按顺序查找字体，找到位置，没有找到则显示默认字体。格式 font-family: 余繁新语 , 微软雅黑 ,' Cambria Math';

字体没有特殊符号和空格，不加双引号或单引号。

双引号""和单引号 '' 是一样的，表示字符。双引号里面只能用单引号，单引号里面只能用双引号。

字体样式， mormal 普通样式 ( 默认 ),italic 文本倾斜显示。如: font-style: italic;

10.22css基础02相关推荐

java 01 02_Java知识系统回顾整理01基础02面向对象01类和对象
一.面向对象实例--设计英雄这个类 LOL有很多英雄,比如盲僧,团战可以输,提莫必须死,盖伦,琴女所有这些英雄,都有一些共同的状态比如,他们都有名字,hp,护甲,移动速度等等这样我们就可以设计一 ...
电大计算机应用技术基础形考二,贵州电大2020年春季《计算机应用技术基础》计算机应用技术基础02任务满分...
2020年春季<计算机应用技术基础>计算机应用技术基础02任务8 e0 T4 M9 X5 Z! l' ? 1.[判断题] 存储器容量的基本单位是字节.( ) # n( _/ [' R ...
MySQL数据库基础02 韩顺平自学笔记
MySQL数据库基础02 sql表查询增强分页查询分组函数和分组子句数据分组的总结多表查询问题的引出多表查询的练习自连接子查询子查询当作临时表使用在多行子查询中使用all操作符在 ...
Java基础-02（基础语法）
Java基础-02(基础语法) 一注释加粗样式注释用来解释和说明程序的文字,注释是不会被执行的. 1.1单行注释 //这是一条单行注释 public int i; 1.2多行注释 /* 这是 * ...
Java/Android基础-02
Java基础-02 概念面向对象编程将某一类事物抽象化,确定如何操作数据然后再考虑如何操作数据.然后再考虑下如何组织数据特点属性: 用来描述对象的数据元素称为对象的属性. 方法: 对象的属性进 ...
产品经理10大基础技能（5）：读透神经网络和机器学习
本篇先介绍许多热门的行业均在产生AI产品经理岗位的需求,再详细介绍AI产品经理必懂的AI技能,接着撰写什么是神经网络?什么是机器学习?最后用一个案例详细拆解AI产品经理如何用机器视觉识别手写字体的整体 ...
1.10 编程基础之简单排序 06 整数奇偶排序 python
http://noi.openjudge.cn/ch0110/06/ """ 1.10 编程基础之简单排序 06 整数奇偶排序 http://noi.openjudge. ...
1.10 编程基础之简单排序 04 奖学金 7分 python
http://noi.openjudge.cn/ch0110/04/ """ 1.10 编程基础之简单排序 04 奖学金 7分 http://noi.openjudge. ...
1.10 编程基础之简单排序 03 成绩排序 3分 python
http://noi.openjudge.cn/ch0110/03/ """ 1.10 编程基础之简单排序 03 成绩排序 3分 http://noi.openjudge ...

10.22css基础02

CSS