黑马跟学CSS--day2笔记

Emmet语法

使用缩写来提高速度

快速生成快速生成语法

div*10然后按Tab键

div>span然后按Tab键（包含是>）

兄弟关系用+

.是class

#是id

默认是div

.demo&*5

自增符号￥

div{}

div{}*5

div{$}*5

CSS的复合选择器

后代选择器

包含选择器

元素一 空格 元素二{ 样式声明}

元素二是元素一的后代

只改元素二

元素1和元素2可以是任意的基础选择器

子选择器

选亲儿子元素

元素1>元素2{样式声明}

并集选择器

可以选择多组标签，同时为他们定义多种样式

元素一，元素二 {选择样式}

并集选择器 竖着写

最后一个不需要加，

伪类选择器

前面用：表示

链接伪类

a:link 未访问的

a:visited 访问过的

a:hover 鼠标经过选择

a:active 活动的

正在按下还没有弹起的那个链接

注意事项

按照顺序进行声明LAHA

要给a单独指定样式

结构伪类

：focus

input：

元素的显示模式

what

元素以什么方式进行显示

<div>占一行

<span> 一行可以有多个

块元素

典型

一行

<h1-6><p><div><ul><ol><li>

特点

1.自己独占一行

2.高度宽度外边距和内边距都可以控制

3.默认宽度是容器的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注意

文字类元素内不能使用块级元素

<p>主要用于存放文字 在里面不能放块级元素（<div>）

行内元素

内联元素

典型

<span>

<a> <strong><b><em><i>

特点

1.一行可以有多个

2.宽度和高度直接设置没有效果

3.默认的宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注意

链接里面不能放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

典型

<img/>

<input/>

<td>

同时具有块元素和行内元素的特点

特点

1.和在一行上，但是有空白缝隙。一行可以显示多个

2.默认宽度就是它本身内容的宽度

3.高度，行高，外边距和内边距都可以控制

元素显示模式的转换

<a>

转换为块元素

display:block;

转换为行内元素

display:inline;

转换为行内块

display:inline-block;

单行文字垂直居中

line-height=div的高度

背景

背景颜色

background-color

默认的：transparent(透明的)

背景图片

background-image

常用于logo或者装饰性的小图片或者是超大的背景图片（精灵图）

优点：非常便于控制位置

background-image:none/url(url)

none 无背景图（默认的）

url

背景平铺

background-repeat

repeat(默认的)

no-repeat

repeat-x

repeat-y

页面元素既可以添加背景图片又可以设置背景颜色

背景图片位置

background-position: x y;

可以跟方位名词或者精确单位

方位名词

1.两个都是 顺序无关紧要

2.可以省略一个 另一个默认值（居中对齐）

center right

position top/center/bottom/left/center/right

精确值

第一个是x坐标，第二个是y坐标

如果只指定一个数值，那该数值是x坐标，另一个默认垂直居中

混合单位

混合使用第一个值一定是x坐标，第二个值一定是y坐标

背景图像固定

背景附着

background-attachment

scroll 滚动

fixed 固定

背景复合写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url() no-repeat fixed top left

背景色半透明

background: rgba(0,0,0,0.3)

最后一个参数是alpha透明度，取值范围在0~1之间