前端学习笔记：（ CSS (二) ）

字体样式

1、字体类型：

font-family:字体类型可多个（都是计算机中已经安装好的）

font-size：字体大小，

font-style:

-normal:正常,默认

-italic：倾斜

-oblique：斜体

计算机显示效果不加区分

font-weight:字体加粗

         -属性提供了100-900多个值，但是浏览器没这么多的设置，需要数字之间存在较大的间隔才能看出来

-bold:加粗

-lighter：细

简写

font:字体属性

字体属性的顺序

字体风格 > 字体粗细 > 字体大小 > 字体类型

设置行内块：display: inline-block;

设置宽高：width: 50px;

height: 50px;

设置背景： background-color: #aaaccc;

去下划线： text-decoration: none;

字体大小：font-size: 25px;

字体加粗：font-weight: 900;

水平居中：text-align: center;

垂直居中：line-height: 50px;

设置圆角：border-radius: 5px;

单位：

px:像素

-屏幕中的一个个发光的小点可以理解为一个像素

-不同屏幕中的物理像素大小不同

-比如：屏幕中的1600*900表示横向1600个点，纵向900个点

-显示越清晰像素越小

-我们平时设置的CSS像素是逻辑像素

-默认物理像素和逻辑像素1：1

百分比：

-设置百分比以父元素的样式进行计算

-能够随父元素进行同比例变化，创建自适应页面开始使用

em：

-em和百分比类似，只是按照相当于当前字体大小计算

-一个em=1个font-size

-默认字体大小为16px

如果设置的样式和字体相关，则可使用em单位

rem:根据html标签中设置的font-size为标准进行换算，一般使用在移动端

文本样式;

文本颜色：color

颜色单位

1、颜色单词：比如red green

2、RGB表示法

-通过red、green、blue三种颜色，通过不同比例混合表示不同颜色。

-语法：rgb（红色值，绿色值，蓝色值）

取值范围：0~255，也可以使用百分比

最后一位为透明度，取值范围0~1.0表示全透明，1表示不透明

3、使用16进制

原理和rgb基本相同，只不过用16进制进行表示

使用三组，两位的十六进制数组表示

语法：#红色值 绿色值 蓝，色值

十六进制：0，1，2，3，4，5，6，7，8，9，A,B,C,D,E,F,逢十六进一，每个一组表示一个颜色

每组取值范围：00~FF

00表示没有值，相当于RGB中的0，FF表示最大值，相当于RGB中的255

两两重复的颜色可以简写：#FF00FF简写#F0F

#CCCCCC简写#CCC

水平对齐方式：

标签中的文本，图片（行内元素），链接

text-align：left默认左对齐

text-align：right右对齐

text-align：center居中

text-align：justify两端对齐

text-indent：首行缩进

line-height：行高

文本修饰：text-decoration

可选值：

text-decoration：none默认效果，经常用来去掉a标签的下划线

text-decoration：underline下划线

text-decoration：overline上划线

line-throught中划线

垂直对齐方式：vertical-align

可选值：

top：顶部

bottom：底部

middle：中间对齐

文本阴影效果：

text-shadow：color x-offset y-offset blue-radius

color：阴影颜色

x-offset：X轴偏移量，左移为负，右移为正

y-offse：Y轴偏移量，上移为负，下移为正

blue-radius：阴影模糊半径

设置鼠标形状

cursor：

pointer：手

crosshair：十字架

作用：增加交互性

5、伪类：

描述：

-a标签存在状态

-伪类：表示元素存在的状态

未访问状态(链接状态)：a： link{}

鼠标悬浮状态：a： hover{}

激活状态（鼠标点击，没有松开）：a ：active{}

访问后状态：a： visited{}

hover和active可以用于其他标签

伪类顺序：

-4个伪类的优先级相同

-悬浮状态（hover）和点击状态（active）不能互换，如果互换，active失效

-link、visited整体和hover、active不能互换，如果互换后，则hover和active样式消失

默认顺序：link > visited > hover > active

6、列表样式

list-style-type类型

list-style-type：none

list-style-type：disc实心圆圈

list-style-type：circle空心圆

list-style-type：square实体正方形

list-style-type：decimal数字

list-style-image：url（图片地址）

list-style-position(图片位置)：inside 默认值（在li内）

                                                outside（在列表外）

简写：list-style 类型 图片 位置

常用：list-style:none

背景样式

背景颜色：background：color

transparent：透明

背景图片：background：image：url(图片路径)

默认图片平铺效果，

如果背景图片大于元素本身，则默认显示左上角的内容。

背景平铺方式

background-repeat：

可选值：

no-repeat：不平铺

repeat-x：沿着x轴平铺

repeat-y：沿着y轴平铺

图片背景位置：

background-position：（x，y）

百分比

像素px

关键字：left right top bottom center

简写：

颜色 背景 定位 不重复

background：url（路径 ）

背景尺寸大小：

background-size (x,y)

width height

background-size：auto默认值（）图片原始大小

px 和百分比

background-size：contain：按比例占满元素

background-size：cover填充整个元素

渐变

线性渐变：

background-image：linear-gradient(position,color 1, color2)

background-image：linear-gradient(to 方向，颜色)

径向渐变：

-径向渐变由中心点定义，由中心向外扩散

background-image：radial-gradient（形状 color1，color2，color3）

形状：

默认中心椭圆，ellipse

circle：指定圆形的径向渐变

位置：

center

top

bottom