权重字体.docx
《权重字体.docx》由会员分享，可在线阅读，更多相关《权重字体.docx（10页珍藏版）》请在冰豆网上搜索。
权重字体
复习：
1、
type:
buttonsubmit
2、
src要链接到哪个地址
frameborder边框
3、CSS选择器
选择器{
属性：
值;
属性：
值;
}
选择器{属性：
值;属性：
值}
在上网的时候你会发现所有的CSS都在一行上面。
这个是因为它经过压缩了。
4、使用的方法：
1、在HTML标签中使用style属性。
2、内嵌方式
在head头里面写
3、外部导入
5_选择器：
id#
class.
标签选择器
组合选择器
EF
E>F
E+F
E~F选择匹配的F元素，且位于匹配的E元素的后面的所有匹配的元素
:
link
:
visited
:
hover
:
active
你要掌握一个“爱/恨原则”LoVe/HAte（Link->Visited->Hover->Active）
E:
first-child
E:
last-child
E:
nth-child（n）
E:
nth-of-type（n）
E:
nth-last-child（n）
E:
nth-last-of-type（n）
E[attr]
E[attr='val']
E[attr*='val']
E[attr^='val']
E[attr$='val']
今日课程：
1、教你学数学，权重问题
1、一个标签选择器1
2、类选择器10
3、id选择器100
4、一个内联方式的值是1000
5、伪类选择器10
6、属性选择器10
8、层次选择器拆开来相加着分
a>b
注意：
1、数值越大，权重越高
2、权重值相同的情况下最后一个样式胜出
2、上网的时候，经常会看到网页中内容有不同的大小、颜色、字体。
这样能够更好的让用户知道要看到的内容。
1）字体的属性
font-family:
指定想要的字体
格式：
font-family:
字体1,字体2,字体3.....
注意：
1、如果font-family里面的字体都没有那么将使用web浏览器默认的字体显示。
2、font-family将会使用参数表中第一个找到的字体。
3、有写字体有空格，如果字体有空格可以使用引号引起来
4、这个字体是必须在在用户的电脑上面有，才会有效
font-size:
修改字体的大小
格式：
font-size：
字体的大小
单位：
px：
像素。
百分比：
按照基准的文本尺寸（大部分的浏览器的基准文本尺寸大小为16px）的百分比来进行计算
em：
按照基准文本尺寸来进行计算（1em=16px）
font-style:
定义字体的风格
格式：
font-style:
风格
值：
normal，默认值
italic，显示成斜体
font-weight:
定义字体的粗细
格式：
font-weight：
粗细的值
值：
normal，默认值
bold，定义粗体
bolder，定义更粗的字体
lighter，定义更细的字体
line-hight:
定义行高
值：
px
em
%
数值，没有任何单位。
表示以数值乘以文本的大小来进行计算
font的连写方式：
font：
font-sytlefont-weightfont-size/line-heightfont-family
必须指定：
字体的大小和使用哪个字体
2）、文本属性
color:
颜色
text-transform:
定义字母大小写
值：
none，默认，标准
capitalize，每个单词以大写字母开头
uppercase，仅大写
lowercase，仅小写
3）、text-decoration：
修饰文本
格式：
text-decoration：
修饰的值
值：
none，标准的文本
underline，文本下有一条线
overline，文本上有一条线
line-through:
中间有一条线
HTML和CSS好学，好学在哪里？
这个东西，好处在与一个标签或者一个属性就是这个意思，你就只管用就行了。
注意：
可以使用多个值text-decoration：
underlineoverlineline-through
4）、letter-spacing：
文字间距
格式：
letter-spacing：
间距大小
值：
px
em
负值
5）、text-shadow：
文本阴影
格式：
text-shadow：
左右阴影上下阴影模糊度颜色
注意：
１、左右阴影，为负数表示放在文本的左侧，整数表示放在文本的右侧。
２、上下阴影，负数，放在文本的上方，整数放在下边
3、模糊度的值越大表示越模糊，0px表示完全不模糊
4、IE9之前不支持文本阴影
6）、text-align：
对齐文本（用于块状元素）
格式：
text-align：
对齐方式
值：
left，默认值，文字放在左边
right，右边
center，中间
7）、text-indent：
首行文本的缩进
格式：
text-indent：
值
值：
px
em
问题：
1、注意，font-family的时候有可能出不来拿很大的原因就是因为你的字体不支持导致的。
C:
\WINDOWS\Fonts
2、注意看笔记。
用在块状元素里面，div标签里面
width：
px
height：
px
边框：
border:
1pxsolidyellow;
8）、overflow：
规定内容溢出元素框时候发生的事情
格式：
overflow：
值
visible：
默认值，内容不会修改，会呈现在元素框以外
hidden:
直接超出的部分被隐藏。
没结婚之前我就是越野车，现在我就是个火车。
结婚为什么要选个好日子，因为结了婚之后就没有好日子了。
一般情况下，设置了一个div的宽度，如果内容是英文将会超出容器，如果是中文将会根据浏览器规则自动换行
9）、word-break:
用于设置对象内文本的字的换行行为。
格式：
word-break：
值
值：
normal，默认值，根据语言自己的规则确定换行方式
break-all:
自动进行换行
10）、有序列表和无序列表
1）、list-style-type：
列表项的标志
值：
none，无标记
disc，实心圆，默认
circle，空心圆
你得看手册。
2）、使用自定义的图像替换列表项的标记list-style-image:
值：
none，无图像被设置
url，图像的路径，格式为url（‘图像地址’）
问题：
1、选择器的事，先确保选择器选择的是你想要的。
span{
}
2、类和ID选择器起名的时候不要用数字开头。
定义类和ID选择器的时候一定要给他一个比较合适的名字abc
3）、list-style-position：
设置列表项中标记的位置
值：
inside，放置在文本内
outside,默认值，保持标记位于文本的左侧
firebug瓢虫
11）、表格选项
1）、border-collapse，设置表格的边框是否为单一的边框
值：
separate:
默认值，边框会被分开。
collapse：
边框合并为一个单一的边框
注意：
通常给table标签设置border-collapse
2）、border-spacing，设置相邻单元格之间的距离
border-spacing:
值
值：
一个值，表示水平和垂直的距离
两个值的时候，第一个值表示水平距离，第二个值表示垂直距离
注意：
如果border-collapse的值为默认值的，那么可以使用border-spacing
3）、标题的位置caption-side:
设置表格标题的位置
caption-side:
值
值：
top：
默认值，把表格标题定位在表格以上
bottom：
表表格标题定位在表格之下
注意：
直接操纵的
4）、vertical-align：
设置垂直对齐方式
格式：
vertical-align:
值
值：
top：
上对齐
bottom：
低端对齐
middle：
垂直居中（默认值）
12）、盒子模型
浏览器把每个元素看作一个盒子模型，任何标签都是里面装有东西的一个盒子。
包括文本或者是别的东西。
每一个盒子模型是由宽度、高度、内边距、边框、外边距构成
1）、width：
定义元素内容的宽度、行内元素会忽略这个属性。
格式：
width：
值
值：
auto：
默认，浏览器会计算出实际的宽度
px
%，包含他的块级（父元素）的百分比
一定要明白什么是盒子模型。
明天咱们会把盒子模型说完。
升级会员 