CSS

CSS

1、CSS发展

• css1.0
• css2.0: DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
• css2.1:浮动，定位
• css3.0:圆角，阴影，动画… 浏览器兼容

2、CSS优势

• 内容和表现分离(html和css分离)
• 利于SEO，容易被搜索引擎收录(Vue不适合被SEO收录)

3、css三种导入方式优先级

• 就近原则：谁离标签最近谁生效(行内>(内部(head中的style)和外部(css文件link)看谁离标签近))
• 外部样式表导入有两种方法：

<!-- 链接式css3.0 -->
<link rel="stylesheet" href="../css/h1.css">
<!-- 导入式css2.0,弊端：会让网页先展示骨架再渲染 -->
<style>
@import url(../css/h1.css);
</style>

4、选择器

4.1、基本选择器

• 标签选择器
• 类选择器: .class
• id选择器: #id 全局唯一
  注意：不遵循就近原则，优先级id>class>标签

border-radius: 50px;//圆角边框

4.2、层次选择器

• 后代选择器；某个元素后面的所有元素

body p{
    background: red;
}

• 子选择器：只有一代、儿子有效

body>p{
    background: gray;
}

• 相邻兄弟选择器:用class或者id选择相邻的一个(只有下面有效)

.test + p{
    background: red;
}

• 通用选择器:选中元素下面的所有元素

.test ~ p{
    background: red;
}

4.3、结构伪类选择器

<!--选择ul下面的第一个li-->
ul li:first-child{
  background: red;
}
    
/* 选择p,定位到父元素，选择下面的第一个元素，类型必须为p，如果不是不生效 */
<!--一般不用这个-->
p:nth-child(1){
  background: yellow;
}
/* 定位到父元素下第二个为p类型 */
p:nth-of-type(2){
  background: green;
}

4.3、属性选择器(常用)

a[id]{
    background: yellow;
}
<!--指定id-->
a[id=first]{
    background: yellow;
}
<!--可用正则表达式-->
<!--==绝对等于-->
<!--*= 包含这个元素-->
<!--^= 以什么开头-->
<!--$= 以什么结尾-->
a[class*="links"]{
    background: yellow;
}
a[href^=http]{
    background: yellow;
}

5、美化网页

5.1、为什么

• 为什么要美化网页

1. 有效的传递页面信息
2. 美化网页、吸引用户
3. 凸显用户主题
4. 提高用户体验

span:重点要突出的字，使用span套起来(约定俗成)

5.2、文本样式

颜色：

• RGB：红(red)绿(green)蓝(blue):#000000，两位代表一个色域 0~F
• RGBA:

color: aqua;
color: #cc3939;
color: rgb(197, 30, 30);
/* 最后一位表示透明度 */
color: rgba(250,250,250,0.5);

• 缩进：text-indent:2em,1em代表一个字符
• text-align:center;文本水平居中；垂直居中需要行高和组件高度一致：line-height
• margin:0 auto;
• 设置图片和文字水平居中，需要有个参照物

img,span{
    vertical-align:middle;//水平是center,垂直是middle
}

• span:
  span标签是行内元素，span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。
• div:
  块级元素，拥有块级元素拥有的特性
• 渐变色

background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);

6、盒子模型

6.1、由什么组成

• margin:外边距

margin: 0px auto;组件居中
四个参数顺时针旋转：上右下左

• padding:内边距
  padding参数顺序
• border:边框

盒子的计算=组件+margin+padding+border

6.2、圆角边框

border-radius:50px

==组件模板：==element、飞冰、模板之家

7、浮动

7.1、标准

默认行级元素可以包含块级元素、反之不行

7.2、清除浮动

• overflow:scroll,内容超出组件宽度会有滚动条
• 增加父组件的高度
• 增加空的div标签，清除浮动：clear:both
• 解决浮动溢出：在父组件中加overflow:hidden
• 给父组件加个伪类

#father:after{
    content:'';
    display:block;
    clear:both;
}

8、定位

8.1、相对定位

相对于自己原来的位置定位,仍然在标准文件流中，并且原来的位置会被保留

position: relative;
top: -20px;
left: 10px;
bottom: -20px;
right: 10px;

8.2、绝对定位

需要基于一个组件定位，原来位置未被保留position:absolute

• 如果父级元素没有定位，就相对浏览器定位
• 父级元素有定位，相对于父级元素定位

8.3、固定定位

position: fixed;
bottom: 0px;
right: 0px;

固定在一个位置，不会随着滚动条滚动移动,如返回顶部

设置透明度：opacity: 0.5;
设置层级：z-index: 999;

9、动画效果

• canvas