层叠样式表 day1 CSS写在style标签中，title下面

一.CSS引入方式： 内嵌式：css写在style标签中

作用范围：当前页面 使用场景：小案例

外联式：写在单独的css文件中，通过link标签引入到html文件中title下面 href是需要引入进来的css路径

link rel="stylesheet" href="./css.css"> 作用范围：多个页面 使用场景：项目中

行内式：css写在标签的style属性中 作用范围：当前标签 使用场景：配合js使用

二.学习路径： 1.标签选择器：标签名{css属性名：属性值；} 通过标签名找到页面中所有的这类标签，设置样式 注意点： （1）标签选择器选择的是一类标签，而不是单独某一个 （2）标签选择器无论时嵌套关系有多深，都能找到的对应的标签

2.类选择器：.+类名{css属性名：属性值} 通过类名找到所有带有这个类名的标签，设置样式 .1

class=“1” 注意点： （1）所有的标签上都有class属性，属性值称为类名(类似于名字) （2）类名不能以数字或者中划线开头 （3）一个标签可以同时有多个类名，类名之间要以空格隔开 （4）类名可以重复，一个类选择器可以同时选中多个标签

3.id选择器：#id属性值{css属性名：属性值} 通过id属性值找到页面中带有这个id属性值的标签，设置样式 #1

id=1 注意点： （1）所有标签上都有id属性 （2）id属性值在一个页面中是唯一的 （3）一个标签只能有一个id属性值 （4）一个id选择器只能选中一个标签

4.通配符选择器：* {css属性名：属性值} 找到页面中所有的标签，设置样式

三.字体文本样式 1.字体大小:font-size （谷歌默认的文字大小为16px） 2.字体粗细:font-weight（正常开发中以正常和加粗两组取值） 关键字：（正常：normal 加粗：bold） 纯数字：（正常：400 加粗：700） 3.字体样式:font-style 正常默认：normal 倾斜：italic 无衬线字体：sans-serif(网页中大多采用，常见系列字体：黑体、Arial) 衬线字体：serif(广泛应用刊书籍中，常见系列字体：宋体、Times New Roman) 等宽字体：monospace(一般用于程序代码编写，有利于代码的阅读和编写，常见系列：Consolas、fira code) 字体类型:font-family 具体字体1，具体字体2，具体字体3，具体字体4，字体系列 字体类型:font属性连写 顺序（s w s t） font：style weight size family

文本缩进： text-indnet 1.数字加px 2.数字+em（推荐1em=当前标签的font-size的大小）就是1em相当于当前一个字的大小

文本水平对齐方式： 属性名：text-align left: 左对齐 center:居中 right:右对齐

2文本样式 line-height行高

===========================================

背景属性

background-color背景颜色

background-image背景图片

background-repeat背景平铺： repeat 平铺 no-repeat 不平铺 repeat-x 水平平铺 repeat-y 垂直平铺

background-position 背景位置 水平：left center right 垂直：top center bottom

连写 (colr image repeat position 空格隔开 ) background: pink url("./v2.png") no-repeat center 50px

块级： block 独占一行；宽度默认是父级的100%；添加宽高都生效 常见标签：div,p,h系列,ul,li,di,dt,dd.form,headr,nar,footer

行内： 行内标签不换行，不能设置宽高，不生效 一行装不下自动换行 尺寸和内容大小相同 常见的行内标签 :a、span 、b、u、i、s、strong、ins、em、del

行内块：inline-block 一行显示多个，可以设置宽高 块级元素特点 常见的行内块标签 ：img，input， textarea ，select

=================================================

盒子四大组成部分：
1.内容：content 2.内边距：padding 边框和内容有间隙 3.边框：border 4.外边距：margin

width和height默认设置的是内容部分的宽高 1像素实线红色边框代码:

自动内减：box-sizing:border-box 盒子水平居中：margin：0 auto

边框的粗细：borde-width 边框的样式：border-style 取值： 实线：solid 虚线：dashed 点线：dotted 边框颜色：border-color 连写： border: px solid red

border方位名词: top上 right右 bottom下 left左

border-top上边框：

padding内边距 最多4个值 上右下左顺时针 padding: 10px 20px 30px 40px 盒子实际大小=内容+边框+内边距

去除标签默认的 margin：0 和 padding：0

外边框：margin

版心居中： margin: 0 auto;

外边距折叠： 1.合并现象 垂直布局的块级元素，上下的margin会合并

2.塌陷现象 互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上 父子标签，都是块级，子级加margin会影响父级的位置 结果：导致父元素一起往下移动 解决方法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动

行内元素垂直内外边距不生效：

3.结构伪类选择器： n为：0、1、2、3、4、5、6、…… 偶数：2n、even 奇数：2n+1、2n-1、odd

第一个子元素： ：frist-child {} 最后一个子元素 ：last-child {}

偶数： 1.E:nth-child(2n) {} 2.E:nth-child(even) {} 奇数： 1.E:nth-child(2n+1) {} 2.E:nth-child(2n-1) {} 3.E:nth-child(odd) {}

找到前五个： E:nth-child(-n+5) {} 从第五个开始找： E:nth-child(n+5) {}

4.结构伪类元素作用优势： 作用：根据元素在html中的结构关系查找元素 优势：减少对于html中类的依赖，有利于保持代码的整洁 场景：常用于查找父级选择器中的子元素

5.伪元素：通过css创建标签，装饰性的不重要的小图 找父级，在这个父级里面创建子级标签 伪元素必须的属性 content ::before是在什么之前 ::after是在什么之后

6.浮动： float：left左浮动 float：right右浮动 可以让垂直布局的盒子变成谁平布局，去除间隙 早起作用：图文环绕 现在作用：网页布局

浮动的特点： 1.浮动元素会脱离标签准流，在标签准中不占位置 2.浮动元素比标准流高半个级别，可以覆盖标准流的元素 3.浮动找浮动，擦一个浮动会在上一个浮动元素后面左右浮动 4.浮动元素有特殊的显示效果： 一行显示多个 可以设置宽高

块级元素不能给上下间隙 浮动后可以 浮动后的标签具备行内块的特点 因为浮动盒子不能水平居中

ccss书写顺序：浏览执行效率高 1.浮动float/display 2.盒子模型：margin border padding 宽度高度背景色 3.文字样式

清除浮动： 含义：清除浮动带来的影响 （要个父级加清除浮动） 父子级标签,子级浮动,父级没有高度，后面标准流的盒子会受影响，显示到上面的位置，

方法： 1.可以直接加高度来解决（有时候会不方便加高） 2.额外标签法： （1）在父元素内容的最后添加一个块级标签 一般清除浮动的类名都会取名为clearfix设置在块级元素里面 清除左右两侧浮动的影响 （2）给添加的块级元素设置clear：both 缺点：在网页中添加额外的标签会让html页面变复杂 3.单伪元素清除法： 用伪元素替代了额外标签 优点：项目中使用，直接给标签加类即可清除浮动

3，双伪类清除法： /* 这里出现.clearfix::before 作用：解决外边距塌陷问题 / / 外边距塌陷:父子标签，都是块级，子级加margin会影响父级的位置 / / 清除浮动 / .clearfix::before, .clearfix::after { content: ""; display: table; } / 真正清除浮动的标签 */ .clearfix::after { clear: both; }

4. 给父级css加overflow: hidden

=================================================== 定位：position

静态定位：static 不能移动元素， 默认值就是之前的标准流

相对定位：relative

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标

绝对定位：absolute

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标 应用场景：
4. 配合绝对定位组CP（子绝父相 子级绝对定位 父级相对定位） /* 只要父级有定位绝对定位都会生效 / / 一般都会写相对定位 子绝父相*/ /* 绝对定位查找父级的方式：就近查找定位的父级， / / 如果逐层查找不到这样的父级，就以浏览器窗口为参照 */

绝对定位的盒子不能使用margin 0 auto来居中 标准流用margin 0 auto居中 定位居中 left：50%（50%整个盒子移动到浏览器中间偏右的位置） margin-left:150%（比如300）宽度一半的百分比

偏移 这里的50%是元素本身的宽度的高度的一半 自动计算 transform: translate(-50%,-50%);

绝对定位的盒子显示模式具备行内块特点：加宽高生效，如果没有宽度也没有内容，盒子的宽度就是0

固定定位： 1.脱标-不占位置 2.改变位置参考浏览器窗口 3.具备行内块的特点

垂直对齐方式： 属性名：vertical-align 值： baselin 基线对齐 top 顶部对齐 middle 中部对齐（行内块、文字对齐都用它） bottom 底部对齐 给行内或者行内块元素设置 优先给img设置

浏览器把行内和行内块标签当做文字处理，默认基线对齐 vertical-align:middle 专治垂直对齐

光标类型：cursor 1.pointer 小手 2.text 工字型 3.move 十字光标

border-radius 左上右上右下左下 先从左上开始赋值，然后顺时针赋值，如果没有赋值的？？看对角的！！！ 1.画圆： border-radius：50%；

2.画胶囊按钮 border-radius：高度的一半

overflow：设置内容的超出部分的显示效果

visible 超出部分可见 hidden 超出部分隐藏 scroll 显示滚动条 auto 自动根据内容的多少显示或者隐藏滚动条

元素本身隐藏属性 visibility:hidden 当前元素隐藏，还占位置，穿上隐身衣 display：none 当前元素隐藏 ，不占位置 ，相当于干掉 （用它） 显示元素：display:block 格式：父级：hover 要隐藏的类名 { }

边框合并 border-collapse：collapse

小兔鲜

精灵图： 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度 精灵图设置为背景图片 调节位置：background-position: x y 分别取负值 用行内标签：span b i 行内设宽高不生效 转显示模式

设置背景图大小 background-size：宽度 高度； background-size: contain展示盒子里 可能会留白 background-size: cover完全覆盖盒子，可能被会裁切

过渡：transition

SEO三大标签

1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签

小兔仙案例文件和目录准备

1.新建项目文件夹 如：xtx-pc-client

2.复制favicon.ico到xtx-pc-client目录

3.复制images和uploads目录到xtx-pc-client目录

4.新建index.html

5.新建css文件夹保存网站的样式，并新建以下的文件： 按顺序引入，外联式样式表后写的生效 ①base.css 基础公共样式 ②common.css 该网站中多个网页相同模块的重复样式，如头部、底部 ③index.html 首页样式