前端第二天

基础选择器：
1.标签选择器 直接在style里面写标签{} 括号里面加属性
2.类选择器 定义一个类{ } 括号里写属性 需要的就在html里调用 调用class=
口诀：样式点定义 结构类（class）调用
3.id选择器 定义一个类用#开头调用id=
口诀：样式#定义，结构id调用，只能调用一次，切勿被人使用
2和3的区别：类可以被多个使用 id只能被一个使用（使用次数的区别）
4.通配符选择器：*选择所有的标签

字体：
font-style：样式 1
font-weight:字体粗细 2
font-size:字体大小（需要加px单位） 3
font-family:字体类型 4
复合属性：font：1234顺序书写
必须保留font-size和font-family属性，否则将不起作用

文本：
text-align:center right left(实现文本对齐）
text-decoration:none underline overline line-through
text-indent:20px 2em（2个文字大小的距离）(文本缩进)
line-height：20px (行高)

css引入方式：
外部样式表:
1.新建.css为后缀的样式文件
2.在html页面 <link rel=“stylesheet” href=“css文件路径”
行内样式表：
标签里加style="color:red;

修改css样式技巧：先写全文都有的再按照上下顺序逐个修改

Emmet语法：
父子关系a>b
兄弟关系a+b
类名.demo
id名#two
生成div类名有顺序的情况用自增符号$

复合选择器：
1.后代选择器 选择所有的子元素 元素1 元素2 元素之间用空格隔开（样式声明） 前者是后者的父级
给父级定义一个类 .类名 元素2 元素3
2.子元素选择器 选择最近一级子元素 元素1>元素2
.类名>元素2>元素3
3.并集选择器 元素1，元素2（样式声明）竖着写 最后一个选择器不需要逗号
4.链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
5.focus伪类选择器
选择获得光标的input表单元素
input:focus {
}

元素显示模式：
块元素：标题标签、

、

、

• 、
  1. 、
  2. 
     1.独占一行
     2.高度、宽度、外边距、内边距可以控制
     3.宽度默认是父级宽度100%
     4.是一个容器及盒子，里面可以放行内或者块级元素
     5.文字类的元素不可以使用块级元素
     6.

     标签和标题标签只能存放文字，不能放块级元素，尤其是不能放

行内元素：、、、、、、、、、
1.相邻行内元素在一行上，一行可以显示多个
2.宽高无效
3.默认宽度是它本身内容的宽度
4.只能容纳文本和其他行内元素
5.链接里面不能再放了解

行内块元素：、、
1.相邻行内块可以在一行显示，但是会有空白缝隙，一行可以显示多个
2.默认宽度是它本身内容的宽度
3.高度、宽度、外边距、内边距可以控制

转换模式：
转换为块：display:block
转换为行内：display:inline
转换为行内块：display:inline-block

单行文字垂直居中：文字的行高=盒子的高度

背景：
background-color:transparent（透明）| 背景颜色
background-image：none | url（）
background-repeat：no-repeat（不平铺） repeat-x（沿着x轴平铺）
background-position:x y（控制图片在背景中的位置）
x和y可以为百分数或者方位名词（top、center、bottom、left、center、right）
background-attachment：scroll（背景图像随对象内容滚动）| fixed（背景图像固定）
background：rgba（0,0,0,0.3）必须是四个值
复合写法：background：transparent url（image.jpg） repeat-y fixed top;