行间样式表1
<div style="..."></div>
内部样式表1
<style>...</style>
外部样式表1
<link rel="stylesheet" href="..." />
常见样式
边框的语法规则、边框的单一方向/条件设置
边框组成:边框粗细、边框样式、边框颜色
- border-width
- border-style
solid 实线 | dashed 虚线 | dotted 点线（IE6不兼容） - border-color
边框的方向:top right bottom left - border-top
border-top-width | border-top-style | border-top-color - border-right
border-right-width | border-right-style | border-right-color - border-bottom
border-bottom-width | border-bottom-style | border-bottom-color - border-left
border-left-width | border-left-style | border-left-color
边框的特性、使用边框实现三角形
- 边框的特征:
边框的形状:非矩形 - 边框三角形
1
2
3
4width:0;
height:0;
border:10px solid #fff;
border-top-color:#ccc;
边框练习的步骤及要求
1.先分析设计图的结构
2.根据所分析的结构，进行结构编码
3.根据所书写的结构，进行css编码
4.利用ps工具，对设计图上的模块进行测量以及颜色的拾取
5.样式添加
background
内容是会撑开容器宽高，背景不会占用容器宽高，默认铺满整个容器大小
- background-color 背景颜色
颜色英文关键字 rgb 十六进制 - background-image 背景图片
- background-repeat 背景图是否重复
- no-repeat 不重复 repeat-x x轴重复 repeat-y y轴重复 repeat x/y都重复
- background-position 背景图位置
1）具体数值
2）方向关键字- left right center
- top bottom center
当第二个属性没有填写，默认居中。
- background-attachment 背景是否滚动
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动 - background复合样式 不分属性值书写顺序
背景练习的要求
1.头部区域（第一个块）直接切一张完整的图片
2.内容区域里的每一个小块需要有ico并且还有背景颜色
文字着重、文字倾斜、文字大小、字体、行高
- font-wight 文字着重
- blod 加粗 normal 正常
- font-style 文字样式
- italic 斜体
- font-size 文字大小
- font-family 字体
- line-height 行高 文字在一行里面所占用的位置
注意：line-height 为奇数时，上面比下面少一像素 - font-variant 设置小型大写字母的字体显示文本
- small-caps 浏览器会显示小型大写字母的字体. normal 默认值 标准字体 css3属性
行高的特性、行高的测量方式
当行高的值与容器高度一致时，文字会垂直居中显示
多行文字测量行高的方法:
- 1.确认文字大小
- 2.确认两行文字之间的 空隙大小
- 3.空隙大小除以2，得出来的值就是每行文字的上下的空隙大小
3.1 当行高为奇数时，那么文字的上方要比下方少一个像素
3.2 当行高为偶数时，那么文字上下空隙值一致 - 4.通过辅助线测量多行文字的行高
- font复合样式 需要注意书写顺序
font:font-style | font-variant（设置小型大写字母的字体显示文本） | font-weight | font-size/line-height | font-family;
文本设置 文字颜色、文本对齐方式、首行缩进、文本修饰、字母间距、单词间距
- color 文字颜色
- text-align 文字对齐（显示）方式 left right center
- text-indent 首行缩进
- 使用em单位 em是根据字体大小来进行计算的 1em=当前字体大小
- text-decoration 文本修饰
- underline 下划线 none
- letter-spacing 字母间距
- word-spacing 单词间距（以空格为解析单位）
强制不换行、空格大小的测量 - white-space 强制不换行
- nowarp 不换行 normal 正常
（text无复合样式）
一个空格有多大？
空格的大小:宋体字体下文字大小的一半;字体格式不一样时，空格大小也不一样。
文字其实是一张张的图片，并非刚好是正正方方的，每个文字的右侧会留有一个间隙
测量文字大小时，最好是使用从上到下的方式去测量文字大小，从左到右不确定文字之间留有的间隙大小
文本（font）属性练习 要求
1.模块、单词间距、文字行高要与设计图统一
2.思考题:每一行的前方粉色带三角的区域该如何实现？
padding 内填充
margin 外边距
标签与标签之间的间隔（距离）
margin的问题
- 1.margin-top传递 :父子级包含的时候子级的margin-top会传递给父级
解决方法:仅用已学知识点可以使用border解决（父级加边框） - 2.margin上下叠压:上下边距会叠压（相邻元素）
解决技巧:
1.还是使用margin，可以将某一个元素方向设置成预想的值。margin叠压会取最大的margin值。
2.如果元素没有特殊特征，也可以用padding代替。
盒模型
- 盒模型大小:
border + padding + width/height - 盒模型的宽度:
border-left-width + padding-left + width + padding-right + border-right-width - 盒模型的高度:
border-top-width + padding-top + height + padding-bottom + border-bottom-width
常见复合属性:
- background
- border
- padding
- margin
- font:font-style|font-weight|font-size/line-height|font-family;
盒模型线框图（marign_padding）练习
1.两个线框图都得做
2.利用margin完成
3.利用padding完成
4.混合使用margin和padding同时完成
注意:不管是结构还是样式的编码 从外往里（从大往小）进行编码
网易产品模块练习
1.利用第一章所学的所有知识点完成
2.思考:能否统一对该模块所有的文字进行行高统一的设置？
常见标签
a标签，超链接，伪类是什么，a标签的伪类，伪类的顺序
a 超链接
伪类 给元素添加特殊的效果
link 未访问过的链接初始颜色
visited 访问过后的链接颜色
hover 鼠标移入（悬停）
active 鼠标按下时链接的颜色
css reset
原则
但凡是浏览器默认的样式，都不要使用。因为每个浏览器下标签的默认样式可能会出现不一致的情况。
人为的将所有样式全部统一（清除），再根据实际情况（设计稿）进行设置。
哪些样式是需要重置的？
与盒模型相关的样式
border | margin | padding
标签特有的样式
il>li
ol>li
书写原则
- 用到什么标签就清除所用标签的默认样式
- 建议不要直接将所有标签全部加上。
- 不要将所有标签全部统一设置一致的reset，需根据标签默认样式特征来分类设置。
1
2
3
4body,h1,h2,h3,h4,h5,h6,p,dl,dd｛margin:0;｝
ul，ol｛margin:0;padding:0;list-style:none;｝
img｛border:none;vertacial-align:top;｝/*当a标签包裹img时，IE6下会有缝隙和蓝边*/
a｛text-decoration:none;｝
常用选择器
- id选择器 当前页面唯一的
- 类选择器 可以是多个class加在同一个元素上
.class名称 - 标签选择器 当前页面上所有标签名为xxx的元素
- 群组选择器 用逗号分隔，被逗号分隔的元素（选择器）全部执行统一的代码片段
- 包含选择器
目标父级元素 目标元素
空格-代表下一级（语法） - 通配符 找到页面上符合规则的所有元素
！！！不建议使用通配符
选择器优先级
优先级 代码执行生效的顺序
行间样式 > id选择器 > 类选择器 > 标签选择器
行间样式 1000
id选择器 100
类选择器 10
标签选择器 1
块元素和内联元素
块元素的特征
- 1.默认独占一行
- 2.没有宽度时，默认撑满一行
- 3.支持所有css命令
内联（内嵌、行内）元素的特征 - 1.同排可以继续跟同类的标签
- 2.内容撑开宽度
- 3.不支持宽高
- 4.不支持上下的margin
- 5.代码换行被解析
display:inline 显示为内联
使行块属性标签具备内联元素的特性
display:block 显示为块
使内联元素具备块属性标签的特性
display是将标签转换为页面中显示的类型
display不会改变标签本质