太原建设厅官方网站,郑州seo实战培训,泊头做网站找哪家好,珠海网站建设解决方案一.CSS简介 1.1 CSS简介 ① CSS指的是层叠样式表#xff0c;用来控制网页外观的一门技术 ② CSS发展至今#xff0c;经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本#xff0c;CSS3.0是CSS最新版本 1.2 CSS引入方式 ① 在一个页面引入CSS#xff0c;共有三种方式 外部…一.CSS简介 1.1 CSS简介 ① CSS指的是层叠样式表用来控制网页外观的一门技术 ② CSS发展至今经历过CSS1.0 CSS2.0 CSS2.1  CSS3.0这几个版本CSS3.0是CSS最新版本 1.2 CSS引入方式 ① 在一个页面引入CSS共有三种方式 外部样式表内部样式表行内样式表 ② 外部样式表实际开发中使用 是最理想的CSS引入方式外部样式表引入是指把CSS代码和HTML代码单独放在不同的文件中然后在HTML中使用link引入CSS文件语法link relstylesheet typetext/css href文件路径rel 的取值是固定的就是stylesheet, 表示引入的是一个样式表文件type属性的取值也是固定的“text/css”表示这个标准的CSShref表示CSS的文件路径link标签是放到head标签内的 ③ 内部样式表 把HTML代码和CSS代码放到同一个HTML文件中CSS代码是放在style标签内style标签是放在head标签内部的语法type text/css 是必须添加的这是标准的CSS headstyle typetext/css/style /head ④ 行内样式表 行内样式表也是把HTML代码和CSS代码放到同一个HTML文件中但是两者有本质的区别内部样式表的CSS是在“style标签”内定义的行内样式表的CSS是在“标签的style属性”中定义的 二.CSS选择器 2.1 元素的id和class ① id属性 id属性具有唯一性在一个页面中相同的id只能出现一次 ② class属性 就是“类”可以为同一个页面的相同元素或者不同元素设置相同的class然后使相同的class的元素具有相同的CSS样式 ③ 理解id就像身份证号class就像你的名字身份证号只能有一个但是名字可以有多个 2.2 CSS选择器 1.选择器简单介绍 ① 选择器就是选中你想要的元素就是指用一种方式把你想要的那个元素选中只有把这个元素选中你才能为它添加样式 ② 五种常用的选择器 元素选择器id选择器class选择器后代选择器群组选择器 ③ 语法 选择器 {      属性1取值1      属性2:  取值2      ...      属性n: 属性n; } 2.五种常用选择器介绍 ① 元素选择器 选中相同的元素然后对相同的元素定义同一个CSS样式语法表示把页面中所有div选中然后定义它们的宽和高 div{width:100px; height:100px;} ② id选择器 id名前面必须加上前缀#否则该选择器无法生效语法 #box{width:100px; height:100px;}  ③ class选择器 类选择器可以对“相同的元素”或者“不同的元素” 定义相同的class属性然后再针对这个class元素进行CSS样式操作class前面必须加上前缀英文句号如果要为多个元素定义相同的样式建议使用class选择器语法 .box{width:100px; height:100px}  ④ 后代选择器 选择元素内部的后代元素语法 #father div{width:100px; height:100px} 父元素和后代元素要用空格分隔开 ⑤ 群组选择器 同时对几个选择器进行相同的操作语法 h3,p{width:100px; height:100px}  对于群组选择器两个选择器之间必须要用英文逗号隔开 三.字体样式 ① 字体样式属性 属性说明font-family字体类型font-size字体大小font-weight字体粗细font-style字体风格color字体颜色 ②  font-family 定义字体类型语法font-family: 字体1 字体2 字体3 字体4....font-family 可以指定多种字体使用多个字体按照从左到右的顺序排列并且以英文逗号隔开如果不定义浏览器会采用默认字体类型“宋体”如果字体类型只有一个英文单词则不需要加双引号如果是由多个英文单词组成或者是有中文的需要加双引号加英文的双引号 ③ font-size font-size:像素值font-size的取值有两种一种是关键字small   medium  large 等另外一种是 “像素值”如10px, 16px21px等只需要掌握像素值的方式就可以px:像素1像素指的是一张图片中最小的点或者是计算机屏幕最小的点px是相对单位电脑分辨率不同1px的大小也会不同 ④ font-weight 定义字体粗细语法font-weight: 取值font-weight的属性值有两种 1100~900的数值不建议 2关键字normal(正常 400)   lighter(较细 100)  bold(较粗 700)   bolder(很粗 900) ⑤ font-style 定义斜体风格语法font-style:取值取值normal:正常值   italic:斜体   oblique:斜体italic是字体的一个属性但是并非所有的字体都有这个属性对于有italic属性的字体可以使用它实现斜体效果没有italic属性的字体就使用oblique实现斜体效果 ⑥ color 使用color来定义字体颜色语法color: 颜色值color的取值一种是关键字一种是十六进制RGB的值关键字blue  green ⑦ CSS注释 /*    */  四.文本样式  ① 首行缩进 text-indent 使用这个属性实现p元素的首行缩进语法text-indent:像素值 ② 水平对齐text-align 控制文本在水平方向上的对齐方式语法 text-align: 取值属性取值 left (左对齐)  center(居中)  right(右对齐)不仅对文本有效对图片也有效 ③ text-decoration 属性 定义文本的修饰效果下划线中划线顶划线语法text-decoration: 取值取值none(去除所有的划线效果)    underline(下划线)   line-through(中划线)  overline(顶划线)超链接去掉下划线a{ text-decoration:none }下划线标明文章的重点中划线一般用于促销顶划线不怎么用 ④ text-transform 属性 进行文本大小写转换针对英文中文不存在大小写之分语法 text-transform取值取值:none(无转换)  uppercase(转换为大写)   lowercase(转换为小写)   capitalize(指将每个英文单词首字母转换为大写) ⑤ line-height 属性 一行的高度 ⑥ 间距letter-spacing word-spacing letter-spacing 控制字与字之间的举例语法letter-spacing像素值word-spacing控制两个单词之间的距离word-spacing 一般来说只针对英文单词而言 五.边框样式 5.1 整体样式 ① border-width: 用于定义边框的宽度是一个像素值 ② border-style用于定义边框的外观 none: 无样式dashed:虚线solid:实线 ③ border-color:用于定义边框的颜色取值可以是关键字或者十六进制RGB值 ④ 简写形式border: 1px solid red 5.2局部样式 ① 边框 border-top:上边框border-bottom:下边框border-left:左边框border-right:右边框 六. 列表样式 6.1 定义列表项符号 ① 语法list-style-type:取值 ② 属性取值 有序列表 属性值说明decimal阿拉伯数字lower-roman小写罗马数字i, ii, iiiupper-roman大写罗马数组I II IIIlower-alpha小写英文字母a, b, c ....upper-alpha大写英文字母A B C 无序列表 属性值说明disc实现圆circle空心圆square正方形 ③ 去除列表项符号 语法 list-style-typenone 作用用这句话去除有序列表和无序列表的列表项符号 6.2 列表项图片 ① list-style-image: url(图片路径) ② 使用图片来代替列表项符号 七.表格样式 7.1 表格标题位置 ① caption-side作用定义表格标题的位置 ② 语法 caption-side:取值 ③ 取值top标题在顶部    bottom标题在底部 7.2 表格边框合并 ① border-collapse: 去除单元格之间的空隙将两条边框合并为一条 ② 语法border-collapse: 取值 ③ 取值separate(边框分开有空隙)   collapse(边框合并无空隙) 7.3 表格边框间距 ① border-spacing: 定义表格边框间距 ② 语法border-spacing像素值 八.图片样式 8.1 图片大小 ① 改变图片大小 ② 语法 width:像素值    height:像素值 8.2 图片边框 ① 语法border: 1px solid red; 8.3 图片对齐 ① text-align:定义图片的水平对齐方式 语法 text-align取值取值left (左对齐)    center(居中对齐)    right(右对齐) 场景文本水平对齐和图片水平对齐注意在图片的父元素中定义不是在img中定义的 ② vertical-align : 定义图片的垂直对齐方式 语法vertical-align:取值取值top(顶部对齐)    middle(中部对齐)    baseline基线对齐  bottom(底部对齐) 8.4 文字环绕float ① 作用使用float 实现文字环绕图片的效果 ② 属性float:取值 ③ 取值 left(元素向左浮动)     right(元素向右浮动) 九. 背景样式 背景图片样式属性 属性说明background-image定义背景图片地址background-repeat定义背景图片重复background-position定义背景图片位置background-attachment定义背景图片固定 9.1 background-color ① 作用定义元素的背景颜色 ② 语法background-color颜色值 ③ 颜色值有两种一种是关键字颜色的英文名称red, green, blue 一种是十六进制RGB值 9.2 background-image ① 作用为元素定义背景图片 ② 语法 background-image: url(图片路径) ③ 需要给元素定义宽和高背景图片才会显示 ④ 图片引入方式, 下面两种都可以 background-image: url(img/haizei.png)background-image: url(img/haizei.png) 9.3 backgroung-repeat ① 作用定义背景图片的重复方式 ② 语法background-repeat: 取值 ③ 取值 属性值说明repeat在水平方向和垂直方向上同时平铺(默认值)repeat-x只在水平方向x轴上平铺repeat-y只在垂直方向y轴上平铺no-repeat不平铺 9.4 background-position ① 作用用来定义背景图片位置 ② 语法background-position像素值关键字 ③ 取值 取值为像素值background-position水平距离  垂直距离水平距离和垂直距离这两个数值要用空格隔开两者取值都是像素值取值为关键字取值为关键字的时候也要同时设置水平方向和垂直方向的值 top left 左上top center(靠上居中)top right右上left center靠左居中center center正中right center靠右居中bottom left 左下bottom center靠下居中bottom right右下 9.5 background-attachment  ① 定义背景图片是随元素一起滚动还是固定不动的 ② background-attachment:取值 ③ 属性取值 scroll: 随元素一起滚动默认值fixed: 固定不动 十.超链接样式 10.1 超链接伪类 ① 作用定义超链接在鼠标单击的不同时期的样式 ② 语法这4种样式的定义顺序不能改变 a:link {...}      定义a元素未访问时的样式    a:visited {...}  定义a元素访问后的样式 a:hover {...}  定义鼠标经过a元素时的样式 a:active {...}  定义单击激活时的样式 ③ 实际开发中只会用到两种状态未访问时状态和鼠标经过状态 a{...}   未访问状态直接针对a元素定义就可以了 a:hover{...} 10.2 hover ① hover可以定义任何一个元素在鼠标经过时的样式 10.3 鼠标样式 ① cursor: 取值 ② 用来定义鼠标样式 ③ 在书里面208页可以看到各种鼠标样式使用的时候自查 ④ 自定义鼠标样式 cursor:url(图片地址) 属性值这个图片地址是鼠标图片地址后缀名为.cur属性值一般只会用到三个default  pointer text 十一. 盒子模型 11.1 盒子模型 ① 盒子模型概念 盒子模型是由4个属性组成的content(内容)    padding(内边距)  margin(外边距)  border(边框) 还有宽度width和 高度height两大辅助属性所有的元素都可以看成一个盒子盒子模型组成 属性说明content内容可以是文本或图片padding内边距用于定义内容与边框之间的距离margin外边距用于定义当前元素与其他元素之间的距离border边框用于定义元素的边框 ② 盒子模型的组成部分 1内容区content 是盒子模型的中心呈现了盒子的主要信息内容这些内容可以是文本图片等多种类型内容区是盒子模型必备的组成部分其他3个部分都是可选的内容区有三个属性width  height  overflowwidth和height可以指定盒子内容的宽度和高度只是针对内容区并不包括padding部分当超出width和height的时候可以使用overflow属性指定溢出处理方式 2内边距(padding) 指的是内容与边框之间的空间可以看成是内容区的背景区域内边距的属性padding-top  padding-bottom padding-left padding-right   padding(简写) 3外边距(margin) 两个盒子之间的距离可能是子元素与父元素之间的距离也可能是兄弟元素之间的距离外边距使得元素之间不必紧凑地连接在一起外边距的属性margin-top margin-bottom margin-left margin-right  marginCSS允许给外边距属性指定负数值当外边距为负值时整个盒子将向指定负值的相反方向移动以此产生盒子的重叠效果 4边框(border) 边框属性border-width border-style border-color   border(简写)border-width 指定边框宽度border-style 指定边框类型border-color 指定边框颜色 11.2 宽高 只有块元素才可以设置width和height, 行内元素是无法设置width和height的 11.3 边框   border 语法border: 1px solid red第一个值指的是边框宽度第二个指的是边框外观第三个指的是边框颜色 11.4 内边距 padding ① 语法 padding-top: 像素值  padding-bottom: 像素值  padding-left: 像素值  padding-right: 像素值 ② 简写 padding:像素值;           // 表示4个方向的内边距都是20px padding:像素值1 像素值2;    // 表示 top 和 bottom 是 20px   right 和 left 为 40px padding: 像素值1 像素值2 像素值3 像素值4   // 表示上右下左 11.5 外边距 margin ① 外边距指的是边框到父元素或者兄弟元素之间的那一部分外边距是在元素边框的外部的 ② margin的局部样式 margin-top:像素值 margin-right:像素值 margin-bottom:像素值 margin-left:像素值 ③ 只有父元素时该元素设置的margin 就是相对于父元素之间的距离 ④ 当既有父元素又有兄弟元素时该元素会先看看四个方向有没有兄弟元素存在如果该方向有兄弟元素则这个方向的margin就是相对于兄弟元素而言如果该方向没有兄弟元素则这个方向的margin就是相对于父元素而言 ⑤ padding和margin的区别在于 padding体现的是元素的内部结构margin体现的是元素之间的相互关系 ⑥ margin的简写形式 margin: 像素值// 表示4个方向都是这个值 margin:像素值1 像素值2   // 表示 top 和 bottom是 像素值1  right 和 left 为像素值2 margin:像素值1 像素值2 像素值3 像素值4 // 顺时针  上右下左 十二. 浮动布局  ① 正常文档流 将页面从上到下分为一行一行其中块元素独占一行相邻行内元素在每一行中按照从左到右排列直到该行排满就是默认情况下页面元素的布局情况 ② 脱离文档流 脱离正常文档流如果要改变正常文档流可以使用两种方式 浮动和定位 ③ 浮动 通过设置float属性让元素向左浮动或者向右浮动以便让周围元素或文本围绕这个元素语法float: 取值取值left 元素向左浮动   right 元素向右浮动如果让两个或者多个块元素并排在同一行这个时候可以考虑浮动将块元素脱离正常文档流来实现 ④ 清除浮动 clear取值 属性值说明left清除左浮动right清除右浮动both同时清除左浮动和右浮动 如果要清除所有浮动clearboth 十三. 定位布局 13.1 定位布局简介 四种方式 固定定位fixed  相对定位relative 绝对定位absolute 静态定位static 通过position 属性来实现的  ① fixed 固定定位固定定位指的是固定的元素不会随着滚动条拖动而改变位置语法 position:fixed; top:像素值 bottom:像素值 left像素值 right: 像素值 这四个属性是设置元素相对浏览器的位置这四个值得参考对象是浏览器得四条边 ② relative  相对定位该元素的位置是相对于它的原始位置计算而来的语法 position: relative; top:像素值 bottom:像素值 left像素值 right: 像素值 这四个值得参考对象是该元素得原始位置 ③ 绝对定位 绝对定位精确得把元素定位到任意你想要得位置一个元素变成绝对定位之后这个元素就脱离文档流了此时这个元素浮于其他元素上面已经完全独立起来了 position: relative; top:像素值 bottom:像素值 left像素值 right: 像素值 这四个值得参考对象是浏览器的四条边默认情况下固定定位和绝对定位的位置是相对于浏览器而言的相对定位的位置是相对于原始位置而言的 ④ 静态定位 默认情况下元素没有指定position属性时这个元素就是静态定位的如果想要使元素从其他定位变成静态定位就需要使用position:static 来实现