css的自学
css的促进作用：页面产业布局，增设式样
css自学三大块文本： 1.示例 2.特性与特性值
一.css手写的边线
1.GT5316SB0
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
/* GT5316SB0：通常为的是手写许多事例 */
div {
color:red;
font-size: 20px;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
2.行内式
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<!– 行内式：快速解决式样的问题 –>
<div style=“color:skyblue;font-size: 30px;text-align: center;”>这是一个div</div>
</body>
</html>
3.外链式
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<!– 外链式样：为的是让结构与式样分离，项目中都是这样使用 –>
<link rel=“stylesheet” href=“./08.css”>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
二.示例
1.基本示例
a.通配符（*）b.标签示例（e 如：p,h1,div,span…）c.类示例（以”.”开头）d.id示例 (以”#”开头)2.复合示例
a.后代示例 (空格 如： ul li)b.子代示例 ( > 如： ol > li)c.并集示例 ( , 如: div,span)d.交集示例 (什么都没有 如: li.second)3.伪类示例
:link 链接时式样:visited 访问后式样:hover 鼠标悬停时式样:active 鼠标按下未松开时式样:focus 获得焦点时式样三.特性与特性值
1.字体
font-style: normal | italic
font-weight: 100–900 (normal:400 bold: 700)
font-size: 字体大小
font-family: 字体
line-height: 行高
字体简写(注意顺序)： font: font-style font-weight font-size/line-hight font-family
终极简写：font: font-size font-family
2.文本
a.文本颜色 color:
颜色增设的几种方式
1.英文 如： pink
2.rgb 如： rgb(255,0,0)
3.rgba 如： rgba(255,0,0,0.3)
4.十六进制 如： #ff0000b.文本对齐
text-align: left | right | centerc.文本修饰
text-decoration: none | underline | line-throughd.文本缩进
text-indent: 2em3.背景
background-color: 背景颜色
background-image: 背景图片
background-repeat: 背景是否平铺
background-position: 背景边线
background-attachment: 背景固定
复写： background:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“./09-后代示例.html”>
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-color: skyblue;
background-image: url(“./3.png”);
background-repeat: no-repeat;
background-position: left bottom;
/* 简写 */
/* background:red url(“./3.png”) no-repeat right center; */
}
</style>
</head>
<body>
<div>我好想看见大家</div>
</body>
</html>
4.盒子模型
任何一个html标签都可以想像成是一个盒子（长方形）。
自学盒子模型的四块文本：边框（border），内边距(padding)，文本(content)，外边距(margin)
1.边框 border
border-style: 边框式样 如： solid(实线) dashed(虚线) dotted(点线)border-width: 边框宽度border-color: 边框颜色 简写：border
如：border: 2px solid #ccc;
边框圆角
border-radius: 10px;
2.内边距(padding)
边框与文本之间的距离
3.文本(content)
width与height默认是文本的宽与高， 不是盒子的宽与高
4.外边距（margin）
促进作用：增设盒子与盒子之间的距离
语法：margin: 10px 上下左右
margin: 10px 20px 上下，左右
margin: 10px 20px 30px 上，左右，下
margin: 10px 20px 30px 40px 上，右，下，左
margin-left
外边距应用中的许多问题：
1.兄弟元素：上下外边距合并，以间距数值大的为准
2.父子元素：盒子塌陷
解决方案：1.父盒子加border
2.父盒子加padding
3.父盒子加overflow:hidden
3.盒子本身居中：
margin: 上下边距 auto;
盒子模型中注意的问题：
清除许多标签的默认式样：
* {
margin:0;
padding:0
}
5.边框阴影
box-shadow: x轴的偏移量 y轴的偏移量 阴影的模糊值 阴影的大小 阴影的颜色 内阴影|外阴影(默认值)
6.文字阴影
text-shadow: x轴的偏移量 y轴的偏移量 阴影的模糊值 阴影的颜色=
7.浮动
促进作用：排版（将块级元素放置在一行）
为什么要浮动？用inline-block可不可以呢？在某许多情况下可以使用，但是中间可能有空白
我们就可以使用浮动float
语法： float: left | right
浮动的原理：让盒子本身漂起来了，不占用原来的空间
浮动特性：浮动的盒子相当于是一个行内块元素了
清除浮动：1.额外标签法 clear:both;
2.父元素添加overflow:hidden
3.单伪元素
4.双伪元素
8.定位
促进作用：元素（盒子）有叠加的现象
分类：静态定位（static），相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，
语法：定位模式+偏移值
1.相对定位relative
特点：
1.不脱离标准流2.相对于自身原来的边线进行偏移3.还占据原来的边线2.绝对定位absolute
特点：
1.脱离标准流2.相对于父级元素进行偏移（父级一定要有定位），否则相对页面定位3.不占据原来的边线产业布局时一个非常重要的口决：“子绝父相”
3.固定定位fixed
特点：
1.脱离标准流2.相对于浏览器的视口进行偏移3.不占据原来的边线9.显示与隐藏
元素隐藏：display:none 或 visibility:hidden
display与visibility的区别：display隐藏后不占据边线，visibility隐藏后占据边线
文本溢出隐藏：overflow:hidden | scroll
归纳：overflow:hidden是一段神奇的代码，可以应用的场景？
1. 文本溢出隐藏
2. 盒子塌陷
3. 清除浮动
10.css中的许多高级技巧
1.精灵图(sprite)
促进作用：将许多小的图片放置在一张大图上，为的是减少服务器的压力
坐标基本上都是负值
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
span {
display: inline–block;
}
.x {
width: 105px;
height: 110px;
background: url(“images/abcd.jpg”) no-repeat -252px -559px;
}
.s {
width: 116px;
height: 114px;
background: url(“images/abcd.jpg”) no-repeat -252px -417px;
}
</style>
</head>
<body>
<span class=“x”>x</span>
<span class=“s”>s</span>
</body>
</html>
2.字体图标
字体图标看起来像是图片，本质是字体。可以增设颜色与大小
去哪里找字体图标？有很多的第三方库，bootstrap,iconmoon,iconfont…
第一步：下载
第二步：自定义字体图标
第三步：使用自定义字体图标
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
/* 定义字体 注意路径问题*/
@font-face {
font-family: abc;
src: url(./iconmoon/fonts/iconfont.eot);
src: url(./iconmoon/fonts/iconfont.eot?#iefix) format(embedded-opentype),
url(./iconmoon/fonts/iconfont.woff2) format(woff2),
url(./iconmoon/fonts/iconfont.woff) format(woff),
url(./iconmoon/fonts/iconfont.ttf) format(truetype),
url(./iconmoon/fonts/iconfont.svg#iconfont) format(svg);
}
/* 使用自定义的字体 */
.iconfont {
font-family: “abc” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 80px;
color:green;
}
/* font-family: “Microsoft yahe” 是因为我们的操作系统自带了字体*/
</style>
</head>
<body>
<span class=“iconfont”></span>
</body>
</html>
3.利用css实现三角形
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
div {
width: 0px;
height: 0px;
border-width:10px;
border-style:solid;
border-top-width:20px;
border-bottom-width:20px;
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:purple;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.鼠标式样
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<ul>
<li style=“cursor:pointer”>这是第1个li</li>
<li style=“cursor:text”>这是第2个li</li>
<li style=“cursor:not-allowed”>这是第3个li</li>
<li style=“cursor:move”>这是第4个li</li>
</ul>
</body>
</html>
5.清除input的淡蓝色框
outline:none
6.行内元素与行内块元素垂直方向的对齐方式
行内元素与行内块元素默认是基于基线(baseline)对齐的
共有四种对齐方式: vertical-align: top | middle | baseline | bottom
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
img {
/* vertical-align: bottom; */
vertical-align: baseline;
vertical-align: middle;
vertical-align: top;
}
</style>
</head>
<body>
<img src=“./images/taobao.jpg” alt=“”>abp
</body>
</html>
常见应用：img图片下有一个空白如何去掉
代码如下：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
div {
border:2px solid red;
}
div img{
/* display: block;*/
vertical-align: top;
}
</style>
</head>
<body>
<div>
<img src=“./images/taobao.jpg” alt=“”>
</div>
</body>
</html>
7.单行文本省略号的写法：
三步曲：
div {
/* 三步曲 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
四.标签的显示模式
标签分为三大类： 块级元素 行内元素 行内块元素
1.块级元素的特点：
独占一行可以增设宽高及内外边距宽度默认为父元素宽度100%,高度未增设时由文本决定,无文本时高度为0可以嵌套块级及行内标签注意:p及h1-6标签中不能放块级元素，div中可以嵌套任意块元素
常见块元素： div h1-h6 p ul ol li form
2.行内元素：
a span
3.行内块元素：
img input
元素显示模式的相互转换
display: block | inline | inline-block
五.css的许多特性
层叠性：同一标签中的特性后面的值可以覆盖前面的值
继承性: 常见的继承特性有color, text-xxx, font-xxx, line-xxx
优先级：权重
(*与继承) 0 < 标签示例 1 < 类示例 10 < id示例 100 < 行内式样 1000 < !important 无穷大
