web全栈（2019.10.19-10.20） 一、css添加方式 1、行内样式表
<any style="样式名：样式值;"></any>2、页面内样式
<head> <style> 标签名{ 样式名：样式值； } </style> </head>3、外部样式表
<head> <link rel="stylesheet" type="text/css" href="链接样式表文件.css"/> </head>注：优先级:行内样式>页面内样式>外部样式表
二、css样式 1.color:red; //字体颜色：红色 2.text-align:center; //文本居中 left/center/right/justify 左/中/右/两端对齐 3.font-weight:bold; //字体加粗 bold/bolder 4.font-style: italic; //字体倾斜 5.text-decoration: underline/none; //下划线/去掉下划线 6.font-size:19px; //字体大小：19像素； 7.font-family:宋体； (6&7可写为：font:19px 宋体; //字体大小 字体；） 8.background:背景颜色 背景图片 背景是否重复 背景定位位置 //背景图片 url(图片路径) // 是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直重复 //背景定位位置 left/center/right 水平左中右 top/center/bottom 垂直上中下 9.background-size:精确像素/百分比 /em/rem 背景图片大小控制 10.background-attachment: scroll; //背景图片固定定位 scroll 滚动 fixed 固定 11.边框线 （边框线 ：线型 线粗细 线颜色） 线型：solid 实线 double 双线 dotted 点状线 dashed 虚线 none无边框线 例：border:solid 1px #000; 12.border-style 值: none: 默认无边框 dotted: 定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值 13.text-indent:2em； 首行缩进两个字符； 14.浮动：float:left /right 左浮动、右浮动 margin:0 auto;水平居中 15.文本转换 text-transform:uppercase/lowercase/capitalize 大写、小写、首字母大写 16.列表： list-style-type 列表样式 list-style-image 列表图片 list-style 17.行高 line-height 行间距 一般用行高布局垂直对齐方式 行高和高度一致，内容在垂直正中间 行高比高度大，内容在偏下 行高比高度小，内容偏上
三、盒子模型（padding & margin） 1.对浏览器默认的设置清零
*{ padding:0; margin:0; }2.padding:top(px) right(px) bottom(px) left(px) //内边距 margin: top(px) right(px) bottom(px) left(px) //外边距 ①padding/margin:a; 一个值表示：四边有相同的a px 的填充 ②padding/margin:a b; 两个值表示：上下a px的填充，左右b px的填充 ③padding/margin:a b c; 三个值表示：上是a px ,左右是b px ,下是c px; ④padding/margin:a b c d; 四个值表示：上a，右b，下c，左d; 3.布局： ①浮动流 ②标准流 ③浮动+标准流 ＝ 混合流
四、选择器 1、类选择器的定义方式(可以多次调用) 命名： .name{} 调用：
<any class="name"></any>2、标签选择器的定义方式 （只要符合标签，都自动调用） 命名： 标签名{} //例： p{} 调用 <标签> 3、ID选择器定义方式 （只能调用一次） 命名： #name{} 调用：
<any id="name"></any>4.伪类选择器 超链接四种状态： a:link 访问前的状态 a:hover 鼠标悬停时状态 a:active 鼠标点击时的状态 a:visited 访问后的状态 5.后代选择器 格式：父元素/祖先元素 子元素 eg : div a / .nav a 其中，父子选择器 : 格式：父元素>子元素 eg: .box>a
五、其他 1.行内元素(内联元素) a span input img label select strong b 块级元素 div p h1~h6 table ul ol dl form pre
display:block; 转换为块级元素 （占一行） display:inline-block; 转换为行内块 （宽高起作用） display:inline; 转换为行内元素 （占内容位置） 2. display：block 显示 display:none 隐藏 visibility: hidden;隐藏 visibility:visible; 显示
display和visibility区别：display隐藏不占位置，visibility隐藏占位置 3.网面中图片格式：.jpg .gif .png .webp
