CSS随笔
-
CSS是什么
-
CSS怎么用
-
-
美化网页
-
盒子模型
-
浮动
-
定位
-
网页动画
1.1、什么是CSS
层叠样式表
1.2、发展史
CSS1.0
CSS2.0 Div(块) CSS HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动定位
CSS3.0 圆角，阴影，动画...浏览器兼容性~
1.3、CSS快速入门
style标签
h1{
color: cadetblue;
}
CSS的优势
1.内容和表现分离
2、可以复用
3.样式较丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录
Vue不容易收录
1.4、CSS的3种导入方式
行内样式
优先级
覆盖原则，最近的覆盖最远的
拓展：外部样式两种写法
-
连接式
-
导入式
CSS@
弊端：网页比较大时，先展示结构再渲染
link不同
区别：@import是CSS2.1特有的
2、选择器
作用：选择页面上的某一个元素或某一类元素
2.1、基本选择器
-
类选择器
.选择class名{ 声明1； 声明2； 声明3； ... }
可以多个标签归类，多个标签可以有同一个class名，并且可以使用在不同类的标签
-
标签选择器
标签选择器会选择全部的该标签
选择标签名{ 声明1； 声明2； 声明3； ... }
-
id选择器
#选择id名{ 声明1； 声明2； 声明3； ... }
只可以使用在一个标签上，必须全局唯一
js尽量操作id，class尽量操作css！
id的优先级高于class的，大于标签级。
2.2、层次选择器
1、后代选择器：在某个元素的后面，后代都出现结果，可以有多个
body p{
background: cadetblue;
}
2、子选择器：只有一代出现结果，可以有多个
body > p{
background: cadetblue;
}
3、相邻兄弟选择器：同代相邻并且下一个出现结果，只有一个或零个
.active + p{
background: cadetblue;
}
4、通用兄弟选择器：同代并且下面所用出现结果，可以有多个
.active~p{
background: cadetblue;
}
层次选择器不改变自身样式
2.3、结构伪类选择器
ul li:first-child{
background: cadetblue;
}
ul li:last-child{
background: cadetblue;
}
避免使用id和class选择器
p:nth-child(1){
background: cadetblue;
}
/*选择当前元素的父级元素的第n个元素，且第n个元素是该元素*/
p:nth-child(n){
background: cadetblue;
}
/*选择当前元素的父级元素的第n个元素*/
p:nth-of-type(n){
background: cadetblue;
}
/*鼠标移到上面出现的结果*/
a:hover{
background: cadetblue;
}
2.4、属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: cadetblue;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id的元素
a[属性名 = 属性值（可用正则表达式）]{}
*/
a[id=first]:hover{
background: yellow;
}
/* a[class*="links"]{
background: yellow;
}*/
/*href以http开头的变为黄色*/
/* a[href^=http]{
background: yellow;
}*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/abc.pdf" class="links item">7</a>
<a href="/a.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="class="links item last">10</a>
</p>
</body>
</html>
3.美化网页元素
3.1、为什么要美化网页
1、有效传递信息
2、美化网页，吸引用户
3、凸显主题
4、提高用户体验
span标签用于凸显想要凸显的字
3.2、字体样式
3.3、文本样式
3.4、超链接伪类
3.5、阴影
3.6、列表
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*ul{
background: gray;
}*/
ul li{
height: 30px;
list-style: none;/*去掉前面的样式，比如圆点*/
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
3.7、背景
3.8、渐变
4、盒子模型
4.1、什么是盒子模型
4.2、边框
4.3、内外边距
4.4、圆角边框
4.5、盒子阴影
5、浮动
5.1、标准文档流
块级元素：独占一行
h1~h6 p div 列表
行内元素
span a img strong
行内元素可以被包含在块级元素中，反之则不行
5.2、float
5.3、display
display的值：
-
block块元素
-
inline行内元素
-
inline-block 是块元素，但是可以内连，在一行
-
none消失
5.4、overflow及父级边框塌陷问题
增加父级元素的高度，最简单最low的方法，不推荐
/* 最外层容器设置边框
增加父级元素高度 */
#father{
border: black solid 1px;
height: 600px;
}
father下增加空div，简单，但代码中需尽量避免空div <body>
<div id="father">
<div class="layer01"><img src="img/1.jpg" alt=""></div>
<div class="layer02"><img src="img/2.jpg" alt=""></div>
<div class="layer03"><img src="img/3.jpg" alt=""></div>
<div class="layer04">浮动的盒子可以向左右浮动，直到其外边缘碰到包含框or另一个浮动盒子时</div>
<div class="clear"></div>
</div>
</body>
.clear{
clear: both;
margin: 0;
padding: 0;
}
在父级元素中增加overflow:hidden，此时父级元素并没有赋高度，其高度是由内部元素撑起来的，所以其内容并不会真的被修剪隐藏（overflow:auto会出现滚动条，类似overflow:scroll），但一些下拉场景中避免使用
/* 最外层容器设置边框 */
#father{
border: black solid 1px;
overflow: hidden;
/* height: 600px; */
}
推荐方案：在父类添加一个伪类:after，效果相当于在代码中新增空div，但是写在css中，没有副作用
/*
推荐方案：在父类添加一个伪类:after，效果相当于在代码中新增空div，但是写在css中，没有副作用
/* 伪类 */
#father::after{
content: '';
display: block;
clear: both;
}
6、定位
6.1、相对定位和绝对定位
6.2、固定定位
6.3、z-index
7、动画