这是我参与「第四届青训营」笔记创作活动的的第2天

一、CSS简介

1.css是层叠样式表，是一种标记语言

2. a.内联样式；直接写在标签中的
b.内部样式；写在<head>里面
c.外部样式；写在<head>里面<link rel="stylesheet"  href="css的名字.css" type="text/css">

二、字体属性

1.font-family：“宋体”“微软雅黑”，arial；（设置字体系列）

2.font-size：20px；（定义字体大小默认是16px）

3.font-weight：normal（默认）；【bold/bolder/】{定义字体粗细}

4.font-style：normal(默认);（italic；加入这个属性字体会倾斜）

5.字体复合属性；font:font-style font-weight font-siae font-family;(不能随意更改顺序 /font-size font-family 这两个属性必须要有)

三、文本属性

1.color：pink；（设置文本的字体颜色）

2.text-align：center；（设置文本的对其方式【center；居中对齐/left；左对齐默认/right；右对齐】）

3.text-decoration：none；（给文本添加下划线【underline】/上划线【overline】/删除线【line-through】）

4.text-indent：2em；（让文本缩进几个像素）【em=16px】

5.line-height：20px；（设置行与行之间的高度）

四、伪类选择器（按照这个顺序写代码）

1.a：link{}（选择没有被访问的时候）

2.a:visited{}(选择访问过后的时候)

3.a：hover{}（鼠标经过时div的style变为hover中的规格样式）

4.a:active{}(选择鼠标按下未弹起的时候)

5.input：focus{}（一般情况是input表单元素获得焦点是才能执行的代码可以用于更该样式）

五、元素显示模式

1.块级元素；一行内只能放入一个元素的就是块级元素
    【<h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>】
a.独占一行/高度，宽度，内外边距可以控制
b.宽度默认100%/  里面可以放入行内或者块级元素

2.行内元素；一行内可以放入多个元素的就是行内元素【<a>/<span>】
a.一行内可以显示多个元素/高度，宽度直接设置是无效的
b.默认宽度是内容本身的宽度/他只能容纳文本或其他行内元素

3.行内块元素<img>/<input>/<td>(他们同时具有块级元素和行内元素的特点)
a.相邻行内元素在同一行，但是他们之间会有空白缝隙
b.高度，宽度，内外边距都可以控制
    
4.显示模式的转换

a.display:block;(将行内元素转换为快级元素)
b.display：inline；（将块级元素转换为行内元素）
c.display：inline-block；（转换为行内块元素【开发中最常用】）
d.文字垂直居中技巧【line-height：；=盒子的高度】

六、背景样式【如果同时设置颜色和图片则图片会在颜色上面】

1.背景颜色；background-color：；（定义元素的背景颜色）

2.背景图片；background-image：url（图片的地址）；（定义背景图片）

3.背景平铺；background-repeat：no-repeat；（定义背景图片的样式；【repeat是平铺/repeat-x是按x方向平铺/repeat-y是按y方向平铺】）

4.背景图片位置；background-position：x y；（改变图片在背景中的位置///xy也可以是方位名词//也能使用混合单位但是第一个是x，第二个是y）

5.背景图像的固定；background-attachment：scroll（默认随对象内容滚动）；【fixed背景图像固定不动】

6.背景的复合写法；background：背景颜色背景图片背景平铺背景滚动背景位置；

7.背景颜色的透明效果：background：rgba（0，0，0，0.3）；（背景颜色半透明，内容不受影响） opacity: 0.8;设置背景图片的透明度

8.背景色渐变；语法：background：-webkit-linear-gradient（起始方向，颜色1，颜色2）；【默认从上向下】 background-image: linear-gradient(red,pink);

background-image: linear-gradient(transparent,rgba(0,0,0,.5)); 渐变到黑色加上透明色

在盒子里面加入img标签，在里面添加一个大小一样的盒子，定位到一起然后，帮盒子添加渐变就是现在企业的做法

七，CSS的三大特性

1.层叠行；如果给相同的选择器设置相同的样式此时一个样式就会覆盖另一个样式原则；样式冲突，遵循的原则是就近原则，那个样式离结构近就执行那个样式// 如果样式不冲突，不会层叠

2.继承性；子标签会继承父级标签的某些样式，如文本颜色和字号原则；子元素可以继承父元素的样式【text-/font-/line-这些元素开头可以继承，以及color属性】

行规的继承；行高可以不更单位// 如果子元素没有设置行高则会继承父元素的行高// 此时子元素的行高是当前子元素的文字大小的1.5倍

3.优先级；行内样式style=“”》 id选择器》类选择器和伪类选择器》元素选择器》继承或者*

css入门|青训营笔记