CSS摘要

css类型

• 嵌入式
• 内联式
• 外部式
  • 优先级：内联式 > 嵌入式 > 外部式

css格式

选择器{
    样式;
}

选择器种类

• 标签选择器：html标签{样式；}
• 类选择器：.class{样式；}。多个元素可以同属于一个class
• ID选择器：#id{样式；}。每个元素id是唯一的
• 子选择器：>:于选择指定标签元素的第一代子元素
• 后代选择器：(空格)：用于选择指定标签元素下的后辈元素
• 通用选择器：*(样式；)：作用于html内所有标签
• 伪类选择器：a:hover{color:red;}
• 分组选择器：选择器1,选择器2{样式;}

css特性

• 继承：css允许样式不仅应用于某个特定html标签元素，而且应用于其后代
• 权值：不同选择器有不同权值，css使用权值较高的样式
  • 标签权值1
  • 类权值10
  • ID权值100
• 层叠：当选择器样式相同时，css据先后顺序应用样式，靠后的样式会被应用
• 强调：!important使某个样式具有最高权重。p{color:red!important;}

css字体排版

字体属性

• font-family
• font-size
• color
• font-weight:字体粗细
• font-style:字体样式

文本属性

• text-decoration：字体装饰，下划线，删除线等
• text-indent:文本缩进
• text-align:文本对齐
• line-height:行间距
• letter-spacing:字母汉字间距
• word-spacing:单词间距

html元素分类

块状元素

特点：

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行
• 元素的高度、宽度、行高以及顶和底边距都可设置
• 元素宽度在不设置的情况下，是它本身父容器的100%

主要有：

• <div>
• <p>
• <h1-6>
• <ul>
• <ol>
• <table>
• …

内联元素

特点：

• 和其他元素都在一行上；
• 元素的高度、宽度及顶部和底部边距不可设置；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变。

主要有：

• <a>
• <span>
• <br>
• <strong>
• <code>
• …

内联块元素

特点：

• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置

主要有：

• <img>
• <input>
• …

盒子模型

• padding：填充（盒子与内容距离）
• border：盒子边框
• margin：边界（盒子间距离）

块状标签具有盒子模型特征

border

属性

• border-width
• border-style
• border-color
• border可换成border-top/buttom等为某一边设置样式
• border-top:1px solid red;简洁写法

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

padding

• div{padding:20px 10px 15px 30px;}填充也可分为上、右、下、左(顺时针)顺序一定不要搞混

margin

• div{margin:20px 10px 15px 30px;}填充也可分为上、右、下、左(顺时针)

css布局模型

流动模型flow

默认布局模式

特征

• 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
• 内联元素都会在所处的包含元素内从左到右水平分布显示

浮动模型float

让块状元素并排显示

div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

层模型layer

布局模型类似PhotoShop中非行的图层编辑功能。

三种定位形式：

• 绝对定位
  • 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位
  • div{
       width:200px;
       height:200px;
       border:2px red solid;
       position:absolute;
       left:100px;
       top:50px;
    }
    <div id=”div1″></div>
• 相对定位
  • 相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
  • div1{
       width:200px;
       height:200px;
       border:2px red solid;
       position:relative;
       left:100px;
       top:50px;
    }
    ​
    <div id=”div1″></div>
• 固定定位
  • 它的相对移动的坐标是视图（屏幕内的网页窗口）本身。它不会随浏览器窗口的滚动条滚动而变化 。