css(二)

2、内部样式 书写位置：写在head标签内部 语法: 例如： 适用情况：单个文档中有元素拥有特殊样式时使用

属性1:属性值1;属性2:属性值2;">

优缺点： 样式与结构是部分分离的 3、外部样式 书写位置： 需要在外部新建css文件 css文件的后缀名是.css 语法： 需要引用link标签来引入外部css link标签需要放在head标签的内部 link是单标签，空元素 href="css文件地址" rel="stylesheet" relation关系、联系 stylesheet 样式表 适用情况：多个文件拥有相同样式时使用 优缺点： 必须使用link标签引入css文件 结构与样式完全分离 三、css的语法 css是由选择器+{}样式声明组 选择器：挑选出我们想要的元素 css的样式声明可以有多个，每个样式声明中是由属性和属性值构成的，属性与属性值之间用冒号（:） 分隔 一条样式声明与另一条样式声明中间是以分号（;）分隔 四、基础选择器 选择器：精准的找到我们需要的元素 选择器分为基础选择器和复合选择器 1、通配符选择器 将页面中的所有元素都会挑选出来 * {   属性1：属性值1；   属性2：属性值2；   .... }注意： 通配符选择器会匹配页面中的所有元素，降低页面的响应速度，所以不建议随便使用 2、标签选择器 也叫类型选择器，元素选择器，元素名称选择器 将具有相同标签名称的元素挑选出来 适用情况： 多个标签拥有相同样式时使用 优缺点： 元素不能设计差异化样式 3、class选择器 也叫做类选择器 将具有指定class名称的元素挑选出来 语法： HTML: 需要使用class属性来定义类名 CSS: 以点（.）为标识 注意： class选择器可以使用多次 class选择器可以使用词列表，多个类名中间以空格隔开 4、id选择器 将具有指定id名称的元素挑选出来 *{margin:0;padding:0;}     /*去掉页面中元素自带的间距*/ 标签名 {   属性1：属性值1；   属性2：属性值2；   .... }

类名">

.类名 {   属性1：属性值1；   属性2：属性值2；   .... }

div2

div1

语法： HTML: 给元素设置id属性 CSS: 以井号（#）为标识 注意： id具有唯一性的，不能在同一个页面中多次使用 id不能使用词列表 id名和class名的命名规范 区分大小写 不能以数字开头 不能包含除下划线(_)，中划线(-)以后的特殊字符 见名知意 5、基础选择器的优先级 权值越高，优先级越高 id选择器（100） class选择器（10） 标签选择器（1） 通配符选择器（0） 五、文字文本属性 文字属性 1、font-family属性 设置文字的类型 常见字体类型：微软雅黑、宋体、楷体..... 字体类型可以有多个，多个字体中间以逗号隔开 如果有多个字体，英文字体放在前面，中文字体放在后面 字体设置时尽量采用系统自带的字体 英文字体可以不加引号，但如果英文字体中出现空格或者其他特殊符号时建议加上引号 2、font-size属性

名">

#id名称 {   属性1：属性值1；   属性2：属性值2；   .... } font-family:"微软雅黑","宋体";设置文字的大小 常用的长度单位： px 绝对长度单位，像素 em 相对单位（相对于父元素来说的） % 相对单位（相对于父元素） rem 相对单位（相对于根元素的font-size） 注意： 浏览器默认的字号是16像素 设置字号时尽量设置为偶数，因为奇数在ie6以下的浏览器中可能会有bug 3、font-style属性 设置文字的风格 normal 正常（默认值） italic 倾斜 4、font-weight属性 设置文字的粗细 normal 正常（400） bold 加粗（700） font-size:20px; font-style:normal | italic;   font-weight: normal | bold | lighter | bolderlighter 更细（100-300） bolder 更粗（900） 100-900 粗细程度 5、line-height属性 设置行高 基线： 英文小写字母x的下端沿的那根线 行高：书面含义指基线与基线之间的距离就是行高 注意： 行高撑不起盒高 应用： 单行文本的垂直居中： 盒高 = 行高 常用属性值： px normal 正常 number 当前设置的数字乘以font-size得到的结果就是行高 6、font简写 line-height:30px; .box3 {   /* 2* 16 = 32px */   line-height: 2; } font:[font-style] [font-weight] font-size[/line-height] font-family; p {   /* font-family: Arial, Helvetica, sans-serif,"微软雅黑";   font-weight: bold;   font-size: 20px;   line-height: 50px;   font-style: italic; */   /* font简写 */   font: italic bold 20px/50px Arial, Helvetica, sans-serif,"微软雅黑"; }文本属性 1、text-align属性 设置文本的水平对齐方式 left 左对齐（默认值） right 右对齐 center 居中对齐 justify 两端对齐 2、text-decoration属性 设置文本装饰线 underline 下划线 overline 上划线 line-through 中划线 none 没有（默认值） 3、text-indent属性 设置首行缩进 px em （相对于font-size来计算的） 设置首行缩进两个字符的代码如下: 4、color属性 设置文本的颜色 颜色表示法 颜色关键词 红色 red 粉色 pink 黑色 black 白色 white 十六进制表示法 #rrggbb r-----red g------green b-----blue 十六进制 0-9 10-15(a-f) 常用： 红色------ #ff0000 绿色-------#00ff00 蓝色-------#0000ff 白色--------#ffffff 黑色--------#000000 text-align:left | right | center | justify; text-decoration: underline | overline | line-through | none; text-indent: 2em;简写： #ff0000------#f00 rgb表示法 rgb(r,g,b) r-----red g------green b-----blue 取值范围0-255 常用： 红色------- rgb(255,0,0) rgba表示法 rgba(r,g,b,alpha) alpha参数取值0-1 ，0代表透明，1代表不透明   六、列表标签 列表标签主要用于布局，结构清晰、整齐 1、无序列表 没有顺序之分的 ul里面必须嵌套的是li li自带小圆点 修改li自带的列表符 square 实心正方形 circle 空心圆 disc 实心圆 去掉li自带小圆点 2、有序列表 有先后顺序的                                        

•  
  • 列表项1
  •  
    • 列表项2
    •  
      • 列表项3
      •   ......
      li {   /* 修改li的列表符 */   /* list-style-type: square; */   /* list-style-type: circle; */   list-style-type: disc; } li {   list-style: none; }ol的 亲 儿 子 必 须 是li 更改li自带的列表符 3、自定义列表 对 名 词 进 行 解 释 的 时 候 可 以 使 用 自 定 义 列 表 d d 前 面 自 带 缩 进 七 、 表 格 主 要 用 于 数 据 展 示 ， 显 得 数 据 会 非 常 清 楚 1 、 简 单 表 格 < o l >     < l i > 列 表 项 1 < / l i >     < l i > 列 表 项 2 < / l i >     < l i > 列 表 项 3 < / l i >     . . . . . . < / o l > < o l t y p e = " i " >   < l i > 清 华 大 学 < / l i >   < l i > 北 京 大 学 < / l i >   < l i > 复 旦 大 学 < / l i > < / o l > / * 更 改 列 表 符 的 开 始 位 置 使 用 s t a r t 属 性 * / < o l t y p e = " 1 " s t a r t = " 5 " >   < l i > 清 华 大 学 < / l i >   < l i > 北 京 大 学 < / l i >   < l i > 复 旦 大 学 < / l i > < / o l > < d l >   < d t > 名 词 1 < / d t >   < d d > 名 词 1 解 释 1 < / d d >   < d d > 名 词 1 解 释 2 < / d d >   . . . .   < d t > 名 词 2 < / d t >   < d d > 名 词 2 解 释 1 < / d d >   < d d > 名 词 2 解 释 2 < / d d > < / d l > < t a b l e >   < c a p t i o n > 表 格 的 标 题 < / c a p t i o n >   < t r >       < t h > < / t h >       < t h > < / t h >       < t h > < / t h >   < / t r >table是用来定义表格 caption是用来设置表格的标题，在表格中处于水平居中的位置，只在表格中生效 tr是用来定义行，table下面必须是嵌套tr th是用来定义表头单元格的，第一行的tr下面可以嵌套th td是用来定义普通单元格，tr下面必须嵌套td，td下面可以嵌套其他标签（段落、图片、超链接标 签......） 普通单元格与表头单元格的区别： th---表头单元格，默认在单元格中处于水平居中的位置，且自带加粗效果 td---普通单元格，默认在单元格中水平居左 2、表格的相关属性 （1）border="1" 给表格添加边框 （2）设置表格的宽高 width 宽度 height 高度 （3）cellpadding属性 单元格与边框之间的内间距 （4）cellspacing属性 单元格与单元格之间的间距 3、单元格的相关属性 （1）合并单元格 跨行合并 rowspan="2" 跨列合并 colspan="2" （2）单元格中的水平居中 （3）单元格中的垂直对齐 4、表格的css样式 （1）border-collapse 设置表格边框是否独立     align="center" valign="top | bottom | middle"collapse 边框不独立，边框合并 separate 边框独立