尧图网页设计 
三.否定伪类1.使用not(选择器) 排除满足括号中条件的元素。e.g.style /* 选中的是div的儿子p元素但是排除类名为fail的元素 */ divp:not(.fail) { color: red; } /* 选中的是div的儿子p元素但是排除title属性值以“你要加油”开头的 */ divp:not([title^你要加油]) { color: red; } /* 选中的是div的儿子p元素但排除第一个儿子p元素 */ divp:not(:first-child) { color: red; } /style四.UI伪类1.使用: :checked 被选中的复选框或单选按钮。e.g.style /* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /style2.:disabled 不可用的表单元素有 disabled 属性。e.g.style /* 选中的是被禁用的input元素 */ input:disabled { background-color: gray; } /style3. :enable 可用的表单元素没有 disabled 属性。/* 选中的是可用的input元素 */ input:enabled { background-color: green; }三、目标伪类1.使用: :target 选中锚点指向的元素。e.g.div:target { background-color: green; }四、语言伪类1.使用: :lang()根据指定的语言选择元素本质是看lang 属性的值)。e.g.div:lang(en) { color: red; } /*整体*/ :lang(zh-CN) { color: green; }五.伪元素选择器1.作用选中元素中的一些特殊位置。1).常用伪元素a. ::first-letter 选中元素中的第一个文字。e.g./* 什么是伪元素 —— 很像元素但不是元素element是元素中的一些特殊位置 */ /* 选中的是div中的第一个文字 */ div::first-letter { color: red; font-size: 40px; }b. ::first-line 选中元素中的第一行文字。e.g./* 选中的是div中的第一行文字 */ div::first-line { background-color: yellow; }c. ::selection 选中被鼠标选中的内容。e.g./* 选中的是div中被鼠标选择的文字 */ div::selection { background-color: green; color: orange; }d. ::placeholder 选中输入框的提示文字。e.g./* 选中的是input元素中的提示文字 */ input::placeholder { color: skyblue; }f. ::before 在元素最开始的位置创建一个子元素必须用 content 属性指定内容。e.g./* 选中的是p元素最开始的位置随后创建一个子元素 */ p::before { content:; }g. ::after 在元素最后的位置创建一个子元素必须用 content 属性指定内容。e.g./* 选中的是p元素最后的位置随后创建一个子元素 */ p::after { content:.00 }9.CSS选择器优先级(权重)1).如下图e.g.#atguigu { color: red; } h2 { color: orange; } .slogan { color: green; } h2 { color: gray; } * { color: purple; }e.g.#atguigu { color: orange; } .container span.slogan { color: red; } divpspan:nth-child(1) { color: green; } .slogan { color: purple !important; }三.CSS三大特性1. 层叠性1).概念如果发生了样式冲突那就会根据一定的规则选择器优先级进行样式的层叠覆 盖。2. 继承性1).概念元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。2).规则优先继承离得近的。3. 优先级1).简单聊 !important 行内样式 ID选择器 类选择器 元素选择器 * 继承的样2).详细聊需要计算权重。e.g.h2 { color: green; } div { color: red; font-size: 40px; background-color: skyblue; /* 透过 */ } p { color: purple; background-color: inherit; } * { color: gray; } /* div {} p {} span {} */3).计算权重时需要注意并集选择器的每一个部分是分开算的(鼠标悬停比值)四、CSS常用属性1. 像素的概念1).概念我们的电脑屏幕是是由一个一个“小点”组成的每个“小点”就是一个像素px。2).规律像素点越小呈现的内容就越清晰、越细腻。e.g..atguigu1 { width: 1cm; height: 1cm; background-color: red; } .atguigu2 { width: 1mm; height: 1mm; background-color: green; } .atguigu3 { width: 100px; height: 100px; background-color: blue; }2. 颜色的表示1). 表示方式一颜色名e.g.h2 { color:red; }2). 表示方式二rgb 或 rgba编写方式使用 红、黄、蓝 这三种光的三原色进行组合。r 表示 红色g 表示 绿色b 表示 蓝色a 表示 透明度e.g..atguigu1 { color: rgb(255,0,0); } .atguigu2 { color: rgb(0,255,0); } .atguigu3 { color: rgb(0,0,255); } .atguigu4 { color: rgb(138,43,226); } .atguigu5 { color: rgb(100%,0%,0%); } .atguigu6 { color: rgba(255,0,0,0.5); /* 透明度最后一位可数或百分比 */ } .atguigu7 { color: rgba(59, 79, 189, 0.505) }3). 表示方式三HEX 或 HEXAHEX 的原理同与 0~255 的数字要么都是 rgb 一样依然是通过红、绿、蓝色 进行组合只不过要用 6位分成3组 来表达 格式为#rrggbb.atguigu1 { color: #ff0000; } .atguigu2 { color: #00ff00; } .atguigu3 { color: #0000ff; } .atguigu4 { color: #87ceebff; /* 最后两位为透明色 */ } .atguigu5 { color: #D41504; }4). 表示方式四HSL 或 HSLAa.HSL 是通过色相、饱和度、亮度来表示一个颜色的。b.格式为 色相取值范围是 0~360 度具体度数对应的颜色如下图 hsl(色相,饱和度,亮度)如图c.饱和度取值范围是 0%~100% 。向色相中对应颜色中添加灰色 灰d.亮度取值范围是 0%~100% 。 0% 全灰 100% 没有 0% 亮度没了所以就是黑色。 100% 亮度太强所以就是 白色了e.g..atguigu1 { color: hsl(0, 100%, 50%); } .atguigu2 { color: hsl(60, 100%, 50%); } .atguigu3 { color: hsl(120, 100%, 50%); } .atguigu4 { color: hsl(180, 100%, 50%); } .atguigu5 { color: hsl(0, 100%, 50%); } .atguigu6 { color: hsla(0, 100%, 50%, 67.8%); }3.CSS字体属性1).字体大小a.属性名 font-sizeb.作用控制字体的大小。e.g./* body { font-size: 20px; } */ .atguigu1 { font-size: 40px; } .atguigu2 { font-size: 30px; } .atguigu3 { font-size: 20px; } .atguigu4 { font-size: 12px; } .atguigu5 { /* 浏览器能够接受的最小字体是12px */ font-size: 3px; } .atguigu7 { font-size: 30px; }2). 字体族a.属性名 font-familyb.作用控制字体类型e.g..atguigu1 { font-size: 100px; font-family: 微软雅黑; } .atguigu2 { font-size: 100px; font-family: 楷体; } .atguigu3 { font-size: 100px; font-family: 宋体; } .atguigu4 { font-size: 100px; font-family: 华文彩云; } .atguigu5 { font-size: 100px; font-family: 翩翩体-简,华文彩云,华文琥珀,微软雅黑; } .atguigu6 { font-size: 100px; font-family: HanziPen SC,STCaiyun,STHupo,Microsoft YaHei,sans-serif; /* 最后一个是非衬线 */ }注意事项1. 使用字体的英文名字兼容性会更好具体的英文名可以自行查询或在电脑的设置里 去寻找。2. 如果字体名包含空格必须使用引号包裹起来。3. 可以设置多个字体按照从左到右的顺序逐个查找找到就用没有找到就使用后面的且通常在最后写上 serif 衬线字体或sans-serif 非衬线字体。4. windows 系统中默认的字体就是微软雅黑。3).字体风格a.属性名 font-styleb.作用控制字体是否为斜体。c.常用值1. normal 正常默认值2. italic 斜体使用字体自带的斜体效果3. oblique 斜体强制倾斜产生的斜体效果e.g..atguigu1 { font-size: 100px; font-style: normal; } .atguigu2 { font-size: 100px; font-style: italic; } .atguigu3 { font-size: 100px; font-style: oblique; } em { font-size: 100px; font-style: normal; }4). 字体粗细a.属性名 font-weightb.作用控制字体的粗细。c.常用值1. lighter 细2. normal 正常3. bold 粗4. bolder 很粗 多数字体不支持d.数值1. 100~300 等同于 100~1000 且无单位数值越大字体越粗 或一样粗具体得看字体设计时的 精确程度。2. lighter :400~500 等同于 normal ,600 及以上等同于 bold 。e.g.div { font-size: 100px; } .atguigu1 { font-weight: lighter; } .atguigu2 { font-weight: normal; } .atguigu3 { font-weight: bold; } .atguigu4 { font-weight: bolder; } .atguigu5 { font-weight: 600; }5).字体复合写法a.属性名 font ,可以把上述字体样式合并成一个属性。b.作用将上述所有字体相关的属性复合在一起编写。c.编写规则1. 字体大小、字体族必须都写上。2. 字体族必须是最后一位、字体大小必须是倒数第二位。3. 各个属性间用空格隔开。e.g..atguigu { font: bold italic 100px STCaiyun,STHupo,sans-serif; }4. CSS文本属性1).文本颜色 属性名a.color 作用控制文字的颜色。b.可选值1. 颜色名2. rgb或 rgba3. HEX或 HEXA 十六进制4. HSL或 HSLAe.g.div { font-size: 90px; } .atguigu1 { color: red; } .atguigu2 { color: rgb(255, 0, 0); } .atguigu3 { color: rgba(255, 0, 0, .5); } .atguigu4 { color: #00f; } .atguigu5 { color: #00f8; } .atguigu6 { color: hsl(0, 100%, 50%); } .atguigu7 { color: hsla(0, 100%, 50%, .5); background-color: orange; }2).文本间距a.字母间距 letter-spacingb.单词间距 word-spacing 通过空格识别词 属性值为像素px 正值让间距增大负值让间距缩小。e.g.div { font-size: 30px; } .atguigu2 { /* 字母间距 */ letter-spacing: 20px; } .atguigu3 { /* 单词间距 */ word-spacing: 20px; }3).文本修饰a.属性名 text-decorationb.作用控制文本的各种装饰线。c.可选值1. none 无装饰线常用2. underline 下划线常用3. overline 上划线4. line-through 删除线 可搭配如下值使用1. dotted 虚线2. wavy 波浪线3.也可以指定颜色e.g.div { font-size: 40px; } .atguigu1 { /* 上划的绿色虚线 */ text-decoration:overline dotted green; } .atguigu2 { /* 下划的红色波浪线 */ text-decoration: underline wavy red; } .atguigu3 { /* 删除线 */ text-decoration: line-through; } .atguigu4,ins,del { font-size: 40px; /* 没有各种线 */ text-decoration: none; }4).文本缩进a.属性名 text-indent 。b.作用控制文本首字母的缩进。c.属性值css中的长度单位例如pxe.g.div { font-size: 60px; text-indent: 120px; }5).文本对齐_水平a.属性名 text-align 。b.作用控制文本的水平对齐方式。c.常用值1. left 左对齐默认值2. right 右对齐3. center 居中对齐e.g.div { font-size: 40px; background-color: orange; text-align: right; }6).细说 font-sizea. 由于字体设计原因文字最终呈现的大小并不一定与 font-size 的值一致可能大也可能小。b. 通常情况下文字相对字体设计框并不是垂直居中的通常都靠下 一些。e.g.div { font-size: 40px; background-color: skyblue; font-family: 翩翩体-简; }7). 行高属性名 line-heightc.作用控制一行文字的高度。d.可选值1. normal 由浏览器根据文字大小决定的一个默认值。2. 像素(px)。3. 数字参考自身 font-size 的倍数很常用。4. 百分比参考自身 font-size 的百分比。e.g.#d1 { font-size: 40px; background-color: skyblue; /* 第一种写法值为像素 */ line-height: 40px; /* 第二种写法值为normal */ line-height: normal; /* 第三种写法值为数值 —— 用的比较多倍数1.5-2 */ line-height: 1.5; /* 第四种写法值为百分比 */ line-height: 150%; }e.g./* 注意点1行高过小会怎样 —— 文字重叠且最小值是0不能为负数。 */ #d1 { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 注意点2行高是可以继承的 */ #d2 { font-size: 40px; background-color: orange; line-height: 1.5; } span { font-size: 200px; color: red; } /* 注意点3line-height和height是什么关系 设置了height高度就是height的值。 没有设置height高度就是line-height*行数 */ #d3 { font-size: 40px; background-color: yellowgreen; line-height: 100px; height: 300; } #d4 { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 行高的应用场景1调整多行文字的间距 */ #d5 { font-size: 40px; background-color: skyblue; line-height: 100px; } /* 行高的应用场景2单行文字的垂直居中 */ #d6 { font-size: 40px; background-color: skyblue; height: 300px; line-height: 300px; }8). 文本对齐_垂直a.顶部无需任何属性在垂直方向上默认就是顶部对齐。b.居中对于单行文字让 height line-height 即可。c.底部对于单行文字目前一个临时的方式让l ine-height ( height × 2) - font-size - x。备注x是根据字体族动态决定的一个值。e.g.div { font-size: 40px; height: 400px; line-height: 745px; background-color: skyblue; }9).vertical-aligna.属性名:vertical-align 。b.作用:用于指定同一行元素之间或 表格单元格 内文字的 垂直对齐方式。c.常用值1. baseline 默认值使元素的基线与父元素的基线对齐。2. top使元素的顶部与其所在行的顶部对齐。3. middle 使元素的中部与父元素的基线加上父元素字母x的一半对齐。4. bottom 使元素的底部与其所在行的底部对齐。特别注意 vertical-align 不能控制块元素。e.g.div { font-size: 100px; height: 300px; background-color: skyblue; } span { font-size: 40px; background-color: orange; vertical-align: middle; /* baseline默认 */ } img { height: 30px; vertical-align: top; } .san { vertical-align: bottom; }作业10.4html:!doctype html html langzh-CN head meta charsetUTF-8 / title欢度国庆/title link relstylesheet hrefindex.css /head body h3 classtitle欢度国庆/h3 div classbox1 p classc1锦绣中华盛世华诞举国同庆共祝祖国繁荣昌盛。/p /div div classbox2 p classc2 山河万里红旗飘扬 a href#了解国庆由来/a 我们共同祝福伟大祖国。 /p /div p classc3生在红旗下长在春风里目光所至皆为华夏。/p p classc4愿山河无恙国泰民安岁岁年年家国永安。/p p classc5 img src./红旗.jpg alt国旗 / 红旗图片与文字垂直居中对齐 /p /body /htmlCSS:.box1 { font-family: Microsoft Yahei; font-size: 16px; font-style: normal; font-weight: bold; line-height: 26px; text-align: center; } .box2 { font: bold 16px Microsoft Yahei; text-align: center; line-height: 26px; } .c1 {color: red; } .c2 { color: rgba(180, 0, 0, 0.6); } .c3 { color: #cc220080; } .c4 { color: hsla(8, 100%, 45%, 0.7); } .c5 { color: hsl(8, 100%, 45%); } .box2 a { text-decoration: none; color: #000; } .box2 a:hover { color: red; text-decoration: underline; } img { vertical-align: middle; height: 20px; width: 50px; } body{ text-align: center; } DAY4 CSS学习2
三.否定伪类1.使用not(选择器) 排除满足括号中条件的元素。e.g.style /* 选中的是div的儿子p元素但是排除类名为fail的元素 */ divp:not(.fail) { color: red; } /* 选中的是div的儿子p元素但是排除title属性值以“你要加油”开头的 */ divp:not([title^你要加油]) { color: red; } /* 选中的是div的儿子p元素但排除第一个儿子p元素 */ divp:not(:first-child) { color: red; } /style四.UI伪类1.使用: :checked 被选中的复选框或单选按钮。e.g.style /* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /style2.:disabled 不可用的表单元素有 disabled 属性。e.g.style /* 选中的是被禁用的input元素 */ input:disabled { background-color: gray; } /style3. :enable 可用的表单元素没有 disabled 属性。/* 选中的是可用的input元素 */ input:enabled { background-color: green; }三、目标伪类1.使用: :target 选中锚点指向的元素。e.g.div:target { background-color: green; }四、语言伪类1.使用: :lang()根据指定的语言选择元素本质是看lang 属性的值)。e.g.div:lang(en) { color: red; } /*整体*/ :lang(zh-CN) { color: green; }五.伪元素选择器1.作用选中元素中的一些特殊位置。1).常用伪元素a. ::first-letter 选中元素中的第一个文字。e.g./* 什么是伪元素 —— 很像元素但不是元素element是元素中的一些特殊位置 */ /* 选中的是div中的第一个文字 */ div::first-letter { color: red; font-size: 40px; }b. ::first-line 选中元素中的第一行文字。e.g./* 选中的是div中的第一行文字 */ div::first-line { background-color: yellow; }c. ::selection 选中被鼠标选中的内容。e.g./* 选中的是div中被鼠标选择的文字 */ div::selection { background-color: green; color: orange; }d. ::placeholder 选中输入框的提示文字。e.g./* 选中的是input元素中的提示文字 */ input::placeholder { color: skyblue; }f. ::before 在元素最开始的位置创建一个子元素必须用 content 属性指定内容。e.g./* 选中的是p元素最开始的位置随后创建一个子元素 */ p::before { content:; }g. ::after 在元素最后的位置创建一个子元素必须用 content 属性指定内容。e.g./* 选中的是p元素最后的位置随后创建一个子元素 */ p::after { content:.00 }9.CSS选择器优先级(权重)1).如下图e.g.#atguigu { color: red; } h2 { color: orange; } .slogan { color: green; } h2 { color: gray; } * { color: purple; }e.g.#atguigu { color: orange; } .container span.slogan { color: red; } divpspan:nth-child(1) { color: green; } .slogan { color: purple !important; }三.CSS三大特性1. 层叠性1).概念如果发生了样式冲突那就会根据一定的规则选择器优先级进行样式的层叠覆 盖。2. 继承性1).概念元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。2).规则优先继承离得近的。3. 优先级1).简单聊 !important 行内样式 ID选择器 类选择器 元素选择器 * 继承的样2).详细聊需要计算权重。e.g.h2 { color: green; } div { color: red; font-size: 40px; background-color: skyblue; /* 透过 */ } p { color: purple; background-color: inherit; } * { color: gray; } /* div {} p {} span {} */3).计算权重时需要注意并集选择器的每一个部分是分开算的(鼠标悬停比值)四、CSS常用属性1. 像素的概念1).概念我们的电脑屏幕是是由一个一个“小点”组成的每个“小点”就是一个像素px。2).规律像素点越小呈现的内容就越清晰、越细腻。e.g..atguigu1 { width: 1cm; height: 1cm; background-color: red; } .atguigu2 { width: 1mm; height: 1mm; background-color: green; } .atguigu3 { width: 100px; height: 100px; background-color: blue; }2. 颜色的表示1). 表示方式一颜色名e.g.h2 { color:red; }2). 表示方式二rgb 或 rgba编写方式使用 红、黄、蓝 这三种光的三原色进行组合。r 表示 红色g 表示 绿色b 表示 蓝色a 表示 透明度e.g..atguigu1 { color: rgb(255,0,0); } .atguigu2 { color: rgb(0,255,0); } .atguigu3 { color: rgb(0,0,255); } .atguigu4 { color: rgb(138,43,226); } .atguigu5 { color: rgb(100%,0%,0%); } .atguigu6 { color: rgba(255,0,0,0.5); /* 透明度最后一位可数或百分比 */ } .atguigu7 { color: rgba(59, 79, 189, 0.505) }3). 表示方式三HEX 或 HEXAHEX 的原理同与 0~255 的数字要么都是 rgb 一样依然是通过红、绿、蓝色 进行组合只不过要用 6位分成3组 来表达 格式为#rrggbb.atguigu1 { color: #ff0000; } .atguigu2 { color: #00ff00; } .atguigu3 { color: #0000ff; } .atguigu4 { color: #87ceebff; /* 最后两位为透明色 */ } .atguigu5 { color: #D41504; }4). 表示方式四HSL 或 HSLAa.HSL 是通过色相、饱和度、亮度来表示一个颜色的。b.格式为 色相取值范围是 0~360 度具体度数对应的颜色如下图 hsl(色相,饱和度,亮度)如图c.饱和度取值范围是 0%~100% 。向色相中对应颜色中添加灰色 灰d.亮度取值范围是 0%~100% 。 0% 全灰 100% 没有 0% 亮度没了所以就是黑色。 100% 亮度太强所以就是 白色了e.g..atguigu1 { color: hsl(0, 100%, 50%); } .atguigu2 { color: hsl(60, 100%, 50%); } .atguigu3 { color: hsl(120, 100%, 50%); } .atguigu4 { color: hsl(180, 100%, 50%); } .atguigu5 { color: hsl(0, 100%, 50%); } .atguigu6 { color: hsla(0, 100%, 50%, 67.8%); }3.CSS字体属性1).字体大小a.属性名 font-sizeb.作用控制字体的大小。e.g./* body { font-size: 20px; } */ .atguigu1 { font-size: 40px; } .atguigu2 { font-size: 30px; } .atguigu3 { font-size: 20px; } .atguigu4 { font-size: 12px; } .atguigu5 { /* 浏览器能够接受的最小字体是12px */ font-size: 3px; } .atguigu7 { font-size: 30px; }2). 字体族a.属性名 font-familyb.作用控制字体类型e.g..atguigu1 { font-size: 100px; font-family: 微软雅黑; } .atguigu2 { font-size: 100px; font-family: 楷体; } .atguigu3 { font-size: 100px; font-family: 宋体; } .atguigu4 { font-size: 100px; font-family: 华文彩云; } .atguigu5 { font-size: 100px; font-family: 翩翩体-简,华文彩云,华文琥珀,微软雅黑; } .atguigu6 { font-size: 100px; font-family: HanziPen SC,STCaiyun,STHupo,Microsoft YaHei,sans-serif; /* 最后一个是非衬线 */ }注意事项1. 使用字体的英文名字兼容性会更好具体的英文名可以自行查询或在电脑的设置里 去寻找。2. 如果字体名包含空格必须使用引号包裹起来。3. 可以设置多个字体按照从左到右的顺序逐个查找找到就用没有找到就使用后面的且通常在最后写上 serif 衬线字体或sans-serif 非衬线字体。4. windows 系统中默认的字体就是微软雅黑。3).字体风格a.属性名 font-styleb.作用控制字体是否为斜体。c.常用值1. normal 正常默认值2. italic 斜体使用字体自带的斜体效果3. oblique 斜体强制倾斜产生的斜体效果e.g..atguigu1 { font-size: 100px; font-style: normal; } .atguigu2 { font-size: 100px; font-style: italic; } .atguigu3 { font-size: 100px; font-style: oblique; } em { font-size: 100px; font-style: normal; }4). 字体粗细a.属性名 font-weightb.作用控制字体的粗细。c.常用值1. lighter 细2. normal 正常3. bold 粗4. bolder 很粗 多数字体不支持d.数值1. 100~300 等同于 100~1000 且无单位数值越大字体越粗 或一样粗具体得看字体设计时的 精确程度。2. lighter :400~500 等同于 normal ,600 及以上等同于 bold 。e.g.div { font-size: 100px; } .atguigu1 { font-weight: lighter; } .atguigu2 { font-weight: normal; } .atguigu3 { font-weight: bold; } .atguigu4 { font-weight: bolder; } .atguigu5 { font-weight: 600; }5).字体复合写法a.属性名 font ,可以把上述字体样式合并成一个属性。b.作用将上述所有字体相关的属性复合在一起编写。c.编写规则1. 字体大小、字体族必须都写上。2. 字体族必须是最后一位、字体大小必须是倒数第二位。3. 各个属性间用空格隔开。e.g..atguigu { font: bold italic 100px STCaiyun,STHupo,sans-serif; }4. CSS文本属性1).文本颜色 属性名a.color 作用控制文字的颜色。b.可选值1. 颜色名2. rgb或 rgba3. HEX或 HEXA 十六进制4. HSL或 HSLAe.g.div { font-size: 90px; } .atguigu1 { color: red; } .atguigu2 { color: rgb(255, 0, 0); } .atguigu3 { color: rgba(255, 0, 0, .5); } .atguigu4 { color: #00f; } .atguigu5 { color: #00f8; } .atguigu6 { color: hsl(0, 100%, 50%); } .atguigu7 { color: hsla(0, 100%, 50%, .5); background-color: orange; }2).文本间距a.字母间距 letter-spacingb.单词间距 word-spacing 通过空格识别词 属性值为像素px 正值让间距增大负值让间距缩小。e.g.div { font-size: 30px; } .atguigu2 { /* 字母间距 */ letter-spacing: 20px; } .atguigu3 { /* 单词间距 */ word-spacing: 20px; }3).文本修饰a.属性名 text-decorationb.作用控制文本的各种装饰线。c.可选值1. none 无装饰线常用2. underline 下划线常用3. overline 上划线4. line-through 删除线 可搭配如下值使用1. dotted 虚线2. wavy 波浪线3.也可以指定颜色e.g.div { font-size: 40px; } .atguigu1 { /* 上划的绿色虚线 */ text-decoration:overline dotted green; } .atguigu2 { /* 下划的红色波浪线 */ text-decoration: underline wavy red; } .atguigu3 { /* 删除线 */ text-decoration: line-through; } .atguigu4,ins,del { font-size: 40px; /* 没有各种线 */ text-decoration: none; }4).文本缩进a.属性名 text-indent 。b.作用控制文本首字母的缩进。c.属性值css中的长度单位例如pxe.g.div { font-size: 60px; text-indent: 120px; }5).文本对齐_水平a.属性名 text-align 。b.作用控制文本的水平对齐方式。c.常用值1. left 左对齐默认值2. right 右对齐3. center 居中对齐e.g.div { font-size: 40px; background-color: orange; text-align: right; }6).细说 font-sizea. 由于字体设计原因文字最终呈现的大小并不一定与 font-size 的值一致可能大也可能小。b. 通常情况下文字相对字体设计框并不是垂直居中的通常都靠下 一些。e.g.div { font-size: 40px; background-color: skyblue; font-family: 翩翩体-简; }7). 行高属性名 line-heightc.作用控制一行文字的高度。d.可选值1. normal 由浏览器根据文字大小决定的一个默认值。2. 像素(px)。3. 数字参考自身 font-size 的倍数很常用。4. 百分比参考自身 font-size 的百分比。e.g.#d1 { font-size: 40px; background-color: skyblue; /* 第一种写法值为像素 */ line-height: 40px; /* 第二种写法值为normal */ line-height: normal; /* 第三种写法值为数值 —— 用的比较多倍数1.5-2 */ line-height: 1.5; /* 第四种写法值为百分比 */ line-height: 150%; }e.g./* 注意点1行高过小会怎样 —— 文字重叠且最小值是0不能为负数。 */ #d1 { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 注意点2行高是可以继承的 */ #d2 { font-size: 40px; background-color: orange; line-height: 1.5; } span { font-size: 200px; color: red; } /* 注意点3line-height和height是什么关系 设置了height高度就是height的值。 没有设置height高度就是line-height*行数 */ #d3 { font-size: 40px; background-color: yellowgreen; line-height: 100px; height: 300; } #d4 { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 行高的应用场景1调整多行文字的间距 */ #d5 { font-size: 40px; background-color: skyblue; line-height: 100px; } /* 行高的应用场景2单行文字的垂直居中 */ #d6 { font-size: 40px; background-color: skyblue; height: 300px; line-height: 300px; }8). 文本对齐_垂直a.顶部无需任何属性在垂直方向上默认就是顶部对齐。b.居中对于单行文字让 height line-height 即可。c.底部对于单行文字目前一个临时的方式让l ine-height ( height × 2) - font-size - x。备注x是根据字体族动态决定的一个值。e.g.div { font-size: 40px; height: 400px; line-height: 745px; background-color: skyblue; }9).vertical-aligna.属性名:vertical-align 。b.作用:用于指定同一行元素之间或 表格单元格 内文字的 垂直对齐方式。c.常用值1. baseline 默认值使元素的基线与父元素的基线对齐。2. top使元素的顶部与其所在行的顶部对齐。3. middle 使元素的中部与父元素的基线加上父元素字母x的一半对齐。4. bottom 使元素的底部与其所在行的底部对齐。特别注意 vertical-align 不能控制块元素。e.g.div { font-size: 100px; height: 300px; background-color: skyblue; } span { font-size: 40px; background-color: orange; vertical-align: middle; /* baseline默认 */ } img { height: 30px; vertical-align: top; } .san { vertical-align: bottom; }作业10.4html:!doctype html html langzh-CN head meta charsetUTF-8 / title欢度国庆/title link relstylesheet hrefindex.css /head body h3 classtitle欢度国庆/h3 div classbox1 p classc1锦绣中华盛世华诞举国同庆共祝祖国繁荣昌盛。/p /div div classbox2 p classc2 山河万里红旗飘扬 a href#了解国庆由来/a 我们共同祝福伟大祖国。 /p /div p classc3生在红旗下长在春风里目光所至皆为华夏。/p p classc4愿山河无恙国泰民安岁岁年年家国永安。/p p classc5 img src./红旗.jpg alt国旗 / 红旗图片与文字垂直居中对齐 /p /body /htmlCSS:.box1 { font-family: Microsoft Yahei; font-size: 16px; font-style: normal; font-weight: bold; line-height: 26px; text-align: center; } .box2 { font: bold 16px Microsoft Yahei; text-align: center; line-height: 26px; } .c1 {color: red; } .c2 { color: rgba(180, 0, 0, 0.6); } .c3 { color: #cc220080; } .c4 { color: hsla(8, 100%, 45%, 0.7); } .c5 { color: hsl(8, 100%, 45%); } .box2 a { text-decoration: none; color: #000; } .box2 a:hover { color: red; text-decoration: underline; } img { vertical-align: middle; height: 20px; width: 50px; } body{ text-align: center; }