1.选择器
1.1 写法
选择器{属性:值;}
width,height,background-color,font-size,text-align,text-indent:2em(首行缩进2个字符)
1.2
基础选择器:标签选择器,类选择器(重点),ID选择器,通配符选择器
复合选择器:
标签选择器
一打一大片
标签{属性:值;}
div{
font-size: 20px;
color: red;
background-color: black;
}
<div>
盛开的骄傲的开放和
</div>
颜色的显示方式:
直接写颜色的名称,
十六进制像是颜色#ff00ff,
rgb(120,120,120)
rgba(102,106,180,0.4)
类选择器:
谁调用谁生效,一个标签可以调用多个选择器,多个标签也可以调用同一个选择器
类选择器的命名规则:不能用纯数字,或者数字开头
不建议使用汉字命名
不推荐使用属性或属性的值定义
不能使用特殊符号或者特殊符号(_)开头定义
.box{
font-size: 20px;
color: red;
background-color: black;
}
.miss
{
height: 50px;
}
<p class="box">盛开的骄傲的开放和</p>
<div class="box">
盛开的骄傲的开放和
</div>
<div class="box miss">
盛开的骄傲的开放和
</div>
ID选择器(只能用一次)
一个ID选择器在一个页面只能使用一次,如果使用2次或者使用2次以上不符合位w3c规范,js调用会出错误
一个标签只能调用一个ID选择器
一个标签可以同时调用类选择器和ID选择器
box{
font-size: 40px;
color: rgb(34,56,76);
background-color: green;
}
#miss{
text-align: center;
}
.box{
text-indent: 2em;
}
<div id="box" class="box"> lalalalalalala</div>
<div > lalalalalalala</div>
<p>sdjflskdjfalkdgjakdk</p>
<p>skdjgadigjdfkgjadkfgjk</p>
通配符选择器
*{属性:值;}
所有的标签都是用相同的样式
不推荐使用
*{
font-size:100px;
}
<div>蓝色短裤赶快</div>
复合选择器
两个或两个以上的选择器通过不同的方式链接在一起
交集选择器,后代选择器,子代选择器,并集选择器
交集选择器
div.box{
color:red;
}
div#miss{
color:green;
}
<div class="box">sdlkgjaskg</div>
<div id="miss">lskdjgalksgj</div>
后代选择器
选择器+空格+选择器{属性:值;}
无限制隔代
只要能代表标签,标签,类选择器,ID选择器自由选择
div p span{
color:red;
}
<div>
<p><span>sdkjgakd</span></p>
</div>
div span{
color:red;
}
<div>
<p><span>sdkjgakd</span></p>
</div>//可以隔代选择
.box span{
color:red;
}
<div class="box">
<p><span>sdkjgakd</span></p>
</div>
子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素,不能隔代
div>span{
color:red;
}
<div>
<p><span></span></p>
<span></span>{
</div>
并集选择器
选择器+,+选择器+,选择器{属性:值;}
.box,#miss,span,h1{
color:red;
}
<div class="box">lsdkjg</div>
<p id="miss">dkjga</p>
<span>lkdgja</span>
<h1>ldkgjal</h1>
2文字
font-size:16px; 文字大小
font-weight:700;文字粗细(bold)不推荐使用,值得范围100-900,>700开始加粗
font-family:字体
font-style:normal默认值,italic斜体
line-height:行高
文字属性连写
font:italic 700 16px/40px 微软雅黑;
连写一定要有文字大小和字体
顺序:style,weight,size/line-height,family
family直接写中文名称
Css书写位置
◆内嵌
<head>
<style type=”text/css”>
样式表内容
</style>
</head>
◆外链
<link rel=”stylesheet” href=”1.css”>
◆行内样式表
<div style=”font-size:20px;”></div>
4标签分类(显示方式)
4.1块元素
典型代表
div,h1-h6,p,ul,li
特点:独占一行,可以设置宽高,子块元素默认情况下和父级元素一样
行内元素:
典型代表:span,a,strong,em,del,ins
在一行上显示,不能直接设置元素
行内块元素
典型代表:img,input
特点:在一行显示,可以设置宽度
块元素,行内元素
块元素转换为行内元素:
display:inline
行内元素转换为块元素:
display:block;
块和行内元素转行内块元素
5.css三大特性
层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
优先级 默认样式<标签选择器<类选择器<id选择器<行内样式<!important
◆优先级特点
★继承的权重为0
★权重会叠加
链接伪类
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态
：focus{属性:值；} 获取焦点
文本修饰
text-decoration: none | underline | line-through
背景
background-color 背景颜色
background-image:url(“1.png”); 背景图片
background-repeat: repeat | no-repeat | repeat-x | repeat-y
background-position left | right | center | top | bottom
Background -attachment scroll | fixed
行高
◆浏览器默认文字大小
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。
行高的单位
行高 单位 文字大小 值
20px 20px 20px
2em 20px 40px
150% 20px 30px
2 20px 40px
总结:单位除了像素以为，行高都是与文字大小乘积。
行高单位 父元素文字大小 子元素文字大小 行高
40px 20px 30px 40px
2em 20px 30px 40px
150% 20px 30px 30px
2 20px 30px 60px
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
◆推荐行高使用像素为单位。
盒子模型
边框border
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
◆边框属性的连写
特点：没有顺序要求，线型为必写项。
◆四个边框值相同的写法
特点：没有顺序要求，线型为必写项。
边框合并 border-collapse:collapse;
label for id
<label for="username">用户名:</label> <input type="text" name="username" id="username" value="" class="username" />
.username:focus{
background-color: red;
}
内边距
◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆内边距撑大盒子的问题
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
外边距
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2给父盒子overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
fireworks的基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
清楚辅助线:视图-辅助线-清除
放大镜:z ctrl++
缩小:ctl+alt
放大镜状态下alt+鼠标左键 缩小
抓手
