CSS基础(1)

css的分类

css选择器

作用：选择标签用的，选出来想用的标签

基础选择器：

• 标签选择器：选出来某一类标签。缺点是不能差异化样式。
  不使用无具体语义定义的标签选择器 div span。
• 类选择器：谁用谁调用class=“类名” .类名{ …}
  在一个标签内部只能有一个class属性，多个style写在同一个class中
• id 选择器：#idname { }
• 通配符选择器： * { } 匹配页面所有元素，会降低页面响应速度

id选择器和类选择器的区别：
类选择器可以多次使用
id选择器不能重复，只能使用一次

字体

1. 大小: font-size
   浏览器中默认字号16px
   body{
   font-size:80px
   } <!—首先给body设置字体大小可以防止不同浏览器中的大小差异–>

2. 字体: font-family
   如果使用多个字体，用逗号隔开
   p{ font-family: Arial, “Microsoft YaHei”, “微软雅黑” }
   先去找Arial，如果电脑上没有Arial就去找英文版微软雅黑，如果再没找到就继续找，如果都没有，就按照电脑上默认的字体显示。

对于一些中文字体（如"微软雅黑"）还可以用Unicode编码配置字体，避免浏览器解析中文字体时乱码

3. 字体粗细
   font-weight:bold 加粗 (等价于font-weight:700 注意这个700没有单位)
   font-weight:normal 让粗体的不加粗 (等价于font-weight:400)

4. font-style
   font-style:italic 字体倾斜
   font-style:normal 默认 标准字体样式 让倾斜的字体变成正常字体

综合性写法
必须严格按照顺序来，多个属性用空格隔开, font-size 和font-family必须要写，其他可以省略。
.title{
font: italic 700 20px “微软雅黑”
}

CSS外观属性

1.颜色 color
#红黄蓝
如果颜色两两相同可以简写，例如#ff0000简写成#f00，#ffffff简写成#fff

2.text-align：设置文本内容水平对齐
3.line-height: 行间距
技巧：一般行距比字号大7,8像素左右就可以了
4.text-indent 设置首行文本的缩进
建议用em作为设置单位，1em就是一个字的宽度
4.text-decoration 用于给链接修改装饰效果

CSS复合选择器

1.后代选择器 .nav ul li {} 儿子 孙子 重孙子都可以选出来
2.子元素选择器 div>strong 只选最近的子元素（亲儿子）元素
3. 交集选择器 p.red{} 既是p标签 又是.red类的选择器关系
4. 并集选择器 p, span, .red {color:red;} 逗号隔开，通常用于集体声明，因为这些选择器里的样式相同。
5. 链接伪类选择器用于向某些选择器添加特殊的效果
a:link{
color:#333;
text-decoration:none;
} 未访问过的状态
a:visited 已访问的链接
a:hover 鼠标经过链接的状态
a:active 当点击时（按下鼠标别松开的时候）
写的时候，他们的顺序尽量不要颠倒，按照lvha的顺序，否则可能引起错误
记忆法：lvhao

因为 a选择器有默认的样式，所以实际开发中都需要给链接单独指定样式。实际开发中很少写全四个状态，一般写法如下：
a{
font-weight:700;
font-size:16px;
color:gray;
}
a:hover {
color:red;
}

6.:focus伪类选择器
用于选取获得焦点的表单元素,一般input类表单元素才能获取
input:focus { //把获得光标的input表单元素选取出来
background-color:red;
}

标签显示模式（display）

标签以什么方式显示,比如div独占一行，span一行可以放多个

1.块元素：

• 自己独占一行
• 高度、宽度、内边距和外边距都可以控制
• 宽度默认是容器(父级宽度)的100%
• 是一个容器及盒子，里面可以放行内元素或块元素
• 常见的有h1~h6,p,ul,ol,li,div

文字类块级标签（p, h1~h6, dt）里面尽量不要放块级元素,特别是p里不能放div

2.行内元素

• 相邻元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默 认的宽度是本身内容的宽度
• 只能容纳文本或其他行内元素
• 常见的有span a strong em

3.行内块元素
img input td

• 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个
• 默认宽度就是它本身的宽度
• 高度、行高、外边距以及内边距都可以控制

4.标签显示模式转换
块转行内： display:inline;
行内转块： display:block;
块、行内元素转换为行内块 display: inline-block