权重字体.docx

1、权重字体复习： 1、 type: button submit 2、 src 要链接到哪个地址 frameborder 边框 3、CSS选择器 选择器 属性：值; 属性：值; 选择器属性：值;属性：值 在上网的时候你会发现所有的CSS都在一行上面。这个是因为它经过压缩了。 4、使用的方法： 1、在HTML标签中使用style属性。 2、内嵌方式 在head头里面写 选择器 /*属性：值;*/ 属性：值； 3、外部导入 5_选择器： id # class . 标签选择器 组合选择器 E F E F E + F E F 选择匹配的F元素，且位于匹配的E元素的后面的所有匹配的元素 :link :vis

2、ited :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) Eattr Eattr=val Eattr*=val Eattr=val Eattr$=val今日课程： 1、教你学数学 ，权重问题 1、一个标签选择器 1 2、类选择器 10 3、id选择器 100 4、一个内联方式的值是 1000 5、

3、伪类选择器 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、这个字体是必须在在用户

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-high

5、t:定义行高 值： px em % 数值，没有任何单位。表示以数值乘以文本的大小来进行计算 font的连写方式：font：font-sytle font-weight font-size/line-height font-family 必须指定：字体的大小和使用哪个字体 2）、文本属性 color:颜色 text-transform:定义字母大小写 值： none，默认，标准 capitalize，每个单词以大写字母开头 uppercase，仅大写 lowercase，仅小写 3）、text-decoration：修饰文本 格式：text-decoration：修饰的值 值： none，标准的

6、文本 underline，文本下有一条线 overline，文本上有一条线 line-through:中间有一条线 HTML和CSS好学，好学在哪里？这个东西，好处在与一个标签或者一个属性就是这个意思，你就只管用就行了。 注意：可以使用多个值text-decoration：underline overline line-through 4）、letter-spacing：文字间距 格式：letter-spacing：间距大小 值： px em 负值 5）、text-shadow：文本阴影 格式：text-shadow：左右阴影 上下阴影 模糊度 颜色 注意： 、左右阴影，为负数表示放在文本的左

7、侧，整数表示放在文本的右侧。 、上下阴影，负数，放在文本的上方，整数放在下边 3、模糊度的值越大表示越模糊，0px表示完全不模糊 4、IE9之前不支持文本阴影 6）、 text-align：对齐文本（用于块状元素） 格式：text-align：对齐方式 值： left，默认值，文字放在左边 right，右边 center，中间 7）、text-indent：首行文本的缩进 格式：text-indent：值 值： px em 问题： 1、注意，font-family的时候有可能出不来拿很大的原因就是因为你的字体不支持导致的。 C:WINDOWSFonts 2、注意看笔记。 用在块状元素里面，di

8、v标签里面 width：px height：px 边框：border:1px solid yellow; 8）、overflow：规定内容溢出元素框时候发生的事情 格式：overflow：值 visible：默认值，内容不会修改，会呈现在元素框以外 hidden:直接超出的部分被隐藏。 没结婚之前我就是越野车，现在我就是个火车。 结婚为什么要选个好日子，因为结了婚之后就没有好日子了。 一般情况下，设置了一个div的宽度，如果内容是英文将会超出容器，如果是中文将会根据浏览器规则自动换行 9）、word-break:用于设置对象内文本的字的换行行为。 格式：word-break：值 值： norm

9、al，默认值，根据语言自己的规则确定换行方式 break-all:自动进行换行 10）、有序列表和无序列表 1）、list-style-type：列表项的标志 值： none，无标记 disc，实心圆，默认 circle，空心圆 你得看手册。 2）、使用自定义的图像替换列表项的标记 list-style-image: 值： none，无图像被设置 url，图像的路径，格式为url(图像地址) 问题： 1、选择器的事，先确保选择器选择的是你想要的。 span 2、类和ID选择器起名的时候不要用数字开头。 定义类和ID选择器的时候一定要给他一个比较合适的名字 a b c 3）、list-style

10、-position：设置列表项中标记的位置 值： inside，放置在文本内 outside,默认值，保持标记位于文本的左侧 firebug 瓢虫 11）、表格选项 1）、border-collapse ，设置表格的边框是否为单一的边框 值： separate:默认值，边框会被分开。 collapse：边框合并为一个单一的边框 注意：通常给table标签设置border-collapse 2）、border-spacing，设置相邻单元格之间的距离 border-spacing:值 值： 一个值，表示水平和垂直的距离 两个值的时候，第一个值表示水平距离，第二个值表示垂直距离 注意：如果bord

11、er-collapse的值为默认值的，那么可以使用border-spacing 3）、标题的位置 caption-side:设置表格标题的位置 caption-side:值 值： top：默认值，把表格标题定位在表格以上 bottom：表表格标题定位在表格之下 注意：直接操纵的 4）、vertical-align：设置垂直对齐方式 格式：vertical-align:值 值： top：上对齐 bottom：低端对齐 middle：垂直居中(默认值) 12）、盒子模型 浏览器把每个元素看作一个盒子模型，任何标签都是里面装有东西的一个盒子。包括文本或者是别的东西。 每一个盒子模型是由宽度、高度、内边距、边框、外边距构成 1）、width：定义元素内容的宽度、行内元素会忽略这个属性。 格式：width：值 值： auto：默认，浏览器会计算出实际的宽度 px %，包含他的块级（父元素）的百分比 一定要明白什么是盒子模型。明天咱们会把盒子模型说完。