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 %,包含他的块级(父元素)的百分比 一定要明白什么是盒子模型。明天咱们会把盒子模型说完。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1