web03

课程回顾

文本标签：内容标题h1-h6 段落p 水平分割线hr和换行br
列表标签
无序列表： ul li
有序列表: ol li
定义列表: dl dt dd
列表嵌套: 有序无序无限嵌套
分区元素： div 独占一行和span 共占一行 h5 header article footer
元素分类
块级元素：独占一行包括：div h1-h6 p hr
行内元素：共占一行包括：span i和em b和strong s和del 下划线u
图片标签 img alt：图片不能正常显示时显示的文本 src：路径（相对路径和绝对路径）
地图 map name
超链接 a xxx 锚点
表格table 里面的子标签 tr td th caption标题 thead tbody tfoot 常用属性： border cellspacing cellpadding rowspan colspan
表单 <select name> <option value selected></option> </select> </li> </ol> <h3>CSS</h3> <ul> <li>Casecading层叠 Style样式 Sheet表，层叠样式表 </li> </ul> <h4>引入方式</h4> <ul> <li>三种引入方式</li> <li>内联：把样式代码写在标签内部的style属性里面，弊端：不能复用</li> <li>内部：在head标签里面添加style标签通过选择器给元素添加样式，好处是可以在当前页面复用，弊端：只能在当前页面复用</li> <li>外部：在一个单独的css文件中写样式代码，在页面中head标签里面通过link标签把css文件引入到页面中，好处：可以多页面复用，把css样式代码和html代码分离 </li> <li>三种引入方式的优先级：内联样式优先级最高，内部和外部优先级一样，后执行的覆盖先执行的</li> </ul> <h3>选择器</h3> <h4>标签名选择器</h4> <ul> <li>格式： div{} span{} h3{}</li> <li>范围：会把所有该类型的标签全部选中 </li> </ul> <h4>id选择器</h4> <ul> <li>格式： #id{}</li> <li>将页面中某一个元素选中</li> </ul> <h4>类选择器</h4> <ul> <li>格式： .class{}</li> <li>选中页面中一类的多个元素</li> </ul> <h4>属性选择器</h4> <ul> <li>格式：元素名[属性名='属性值']{}</li> </ul> <h4>分组选择器</h4> <ul> <li>格式： #id,.class,div{}</li> <li>将多个选择器选择的内容合并到一个选择器里面</li> </ul> <h4>子孙后代选择器</h4> <ul> <li>格式： div p h1</li> <li>选择div里面p里面的所有子孙h1</li> </ul> <h4>子元素选择器</h4> <ul> <li>格式： div>p>h1</li> <li>选择div里面p里面的h1子元素</li> </ul> <h4>上午内容回顾</h4> <ol> <li>CSS 层叠样式表用于美化页面</li> <li>三种引入方式</li> <li>内联：在元素的style属性中添加样式代码，弊端不能复用</li> <li>内部：在head标签内部添加style标签，在里面写样式代码，好处可以在当前页面内复用，弊端不能多页面复用</li> <li>外部：在单独的css文件中写样式代码，好处可以多页面复用，可以将样式代码和html代码分离便于管理和升级</li> <li>优先级：内联最高内部和外部后执行的生效</li> <li>选择器</li> <li>标签名选择器标签名{}</li> <li>id选择器 #id{}</li> <li>类选择器 .class{}</li> <li>属性选择器标签名[属性名='属性值']{}</li> <li>分组选择器 #id,.class,div{}</li> <li>子孙后代选择器 div span h1{}</li> <li>子元素选择器 div>span>h1{}</li> </ol> <h4>伪类选择器</h4> <ul> <li>用于选择元素的状态 </li> <li>未访问状态 a:link</li> <li>访问过状态 a:visited</li> <li>悬停状态 a:hover</li> <li>点击时状态 a:active</li> </ul> <h4>任意元素选择器</h4> <ul> <li>格式： *{} </li> <li>选择页面中所有的元素包括：body和html</li> </ul> <h3>CSS中常用的样式</h3> <h4>颜色的赋值方式</h4> <ul> <li>三原色rgb红绿蓝 red green blue 每一个颜色的取值范围0-255 </li> <li>通过颜色名称赋值 red blue yellow pink....</li> <li>6位的16进制赋值 #ff0000 </li> <li>3位的16进制赋值 #f00</li> <li>3位的十进制 rgb(255,0,0)</li> <li>4位的十进制 rgba(255,0,0,0.5) 最后一位表示透明度取值0-1只越小越透明</li> </ul> <h4>设置元素的宽高</h4> <ul> <li>width、height</li> </ul> <h4>背景图片</h4> <ul> <li>backgroud-image 设置背景图片</li> <li>background-size 设置背景图片尺寸</li> <li>background-repeat 禁止重复</li> <li> <p>background-position 设置背景图片的位置</p> <pre><code>background-color: green; /* 设置背景图片 */ background-image: url("../imgs/k.jpg"); /* 修改背景图片尺寸 */ background-size: 100px 100px; /* 禁止重复 */ background-repeat: no-repeat; /* 修改图片位置水平方向(left center right) 垂直方向(top center bottom) 可以控制9个位置*/ /* background-position: right bottom; */ /* 通过百分比控制位置第一个0代表最左边 100%代表最右边第二个0代表最上面 100%代表最下面 */ background-position: 90% 90%; </code></pre> </li> </ul> <h3>布局相关属性（盒子模型）</h3> <ul> <li>盒子模型由：宽高+外边距+内边距+边框组成</li> </ul> <h5>盒子模型之元素宽高</h5> <ul> <li>宽度width</li> <li>高度height</li> <li>可以通过百分比或像素的形式赋值</li> <li>块级元素可以修改元素的宽高，行内元素不能修改宽高，宽高只能由内容决定</li> </ul> <h5>盒子模型之外边距</h5> <ul> <li>什么是外边距：元素距上级元素或相邻兄弟元素的距离称为外边距</li> <li> 赋值方式： margin-left/right/top/bottom:10px margin:10px; //给四个方向外边距全部赋值为10px /* margin: 20px 40px; <em>//</em> 上下20 左右40 <em>/ /</em> margin: 0 auto; <em>/ /</em> 水平居中 <em>/ margin: 10px 20px 30px 40px;/</em> 上右下左 */ </li> <li>块级元素相邻元素添加外边距取最大值，行内元素相邻元素外边距相加</li> <li>行内元素上下外边距不生效</li> <li>如果元素的上边缘和上级元素的上边缘重叠，则给元素添加上外边距时会出现粘连问题通过给上级元素添加 overflow:hidden 解决</li> </ul> <h4>盒子模型之边框</h4> <ul> <li> 赋值方式： /* border: 1px solid red; */ 四个方向赋值 border-bottom/top/right/left: 1px solid red; 指定给某一个方向赋值 </li> </ul> <h4>课程回顾：</h4> <ol> <li>CSS：层叠样式表用于美化页面</li> <li>三种引入方式：</li> <li>内联样式：在元素的style属性中添加样式代码，弊端不能复用</li> <li>内部样式：在head标签里面添加style标签里面写样式代码，可以当前页面复用，不能多页面复用</li> <li>外部样式：在单独的css文件中写样式代码，可以多页面复用，还可以把样式代码和html代码分离便于维护和升级</li> <li>优先级：内联最高内部和外部一样后执行覆盖先执行</li> <li>选择器</li> <li>标签名选择器 div{}</li> <li>id选择器 #id{} 页面中id要唯一</li> <li>类选择器 .class{} </li> <li>属性选择器标签名[属性名='属性值']{}</li> <li>分组选择器 #id,.class,div{}</li> <li>子孙后代选择器 div span h1{}</li> <li>子元素选择器 div>span>h1{}</li> <li>伪类选择器未访问 a:link{} 访问过 a:visited 悬停 a:hover{} 点击时a:active{}</li> <li>任意元素选择器 *{}</li> <li>颜色赋值：</li> <li>颜色单词 red</li> <li>6位16进制 #ff0000</li> <li>3位16进制 #f00</li> <li>3位10进制 rgb(255,0,0)</li> <li>4位10进制 rgba(255,0,0,0-1)</li> <li>背景图片</li> <li>background-image 设置背景图片</li> <li>background-size 修改背景图片尺寸</li> <li>background-repeat 禁止重复</li> <li>background-position 控制位置 left/right/top/bottom/center还可以通过百分比的方式控制位置</li> <li>盒子模型</li> <li>外边距边框内边距宽高 = 盒子模型</li> <li> 外边距：元素距上级元素或相邻兄弟元素的距离称为外边距，行内元素上下外边距不生效，行内元素左右相加块级元素上下取最大值，粘连问题：当元素的上边缘和上级元素的上边缘重叠时给元素添加上外边距时出现粘连问题，给上级元素添加overflow:hidden解决 margin-left/right/top/bottom margin:10px margin:10px 20px margin:0 auto margin:10px 20px 30px 40px </li> </ol> <h2>- 宽高：行内元素不能修改宽高由内容决定 </h2> </body> </html>