权重字体.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:
左右阴影上下阴影模糊度颜色
注意:
1、左右阴影,为负数表示放在文本的左侧,整数表示放在文本的右侧。
2、上下阴影,负数,放在文本的上方,整数放在下边
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
%,包含他的块级(父元素)的百分比
一定要明白什么是盒子模型。
明天咱们会把盒子模型说完。