课程地址：https://www.bilibili.com/video/BV1YJ411a7dy
什么是CSS
CSS 简介
Cascading Style Sheet 层叠样式表
CSS 表现层，美化网页
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
CSS语法
CSS 发展史
css1.0
css2.0 DIV+CSS HTML与CSS结构分离思想，页面变得简单，SEO
css2.1 新增浮动和定位功能
css3 新增圆角，阴影，动画等功能 ， 浏览器兼容性更强
CSS优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 外部样式表可以极大提高工作效率
- 利于SEO，容易被搜索引擎收录（VUE不利于被搜索引擎收录）
CSS的三种导入方式
-
行内样式
<h1 style="color:red">我是标题</h1> -
内部样式
<style> h1{ color: indianred; } </style> -
外部样式
将css样式存储在外部的一个css文件中，然后引入
链接式:
<link rel="stylesheet" href="css/style.css">导入式: (css2.1特有)
<style> /*@import url("css/style.css");*/ @import "css/style.css"; </style>
三种导入方式优先级：就近原则
选择器
作用：选择页面上的某一个或某一类元素
基本选择器
-
标签选择器（选择一类标签）标签名{}
h1{ color: #a1185a; background: yellow; border-radius:15px; text-align: center; } -
类选择器 （选择 所有Class属性 一致的标签，可以跨标签选择）.Class名{}
.titile{ color: #893873; background: #598e0f; border-radius:15px; text-align: center; } -
ID选择器 （全局唯一）#ID名{}
<style> #p{ color: chocolate; } </style><p id="p">我是时光</p>
优先级
ID选择器> 类选择器>标签选择器
层次选择器
-
后代选择器 可选择多代
/* 后代选择器*/ body p{ background: #598e0f; } -
子类选择器 只选择一代 子类
/* 子选择器 */ body > p{ background: chocolate; } -
相邻兄弟选择器 同辈 只有一个（向下）
/*相邻选择器*/ .active + p{ background: red; } -
通用兄弟选择器 同辈 可以有多个
/* 通用兄弟选择器 */ .active ~ p{ background: red; }
结构伪类选择器
伪类选择器作用：根据条件筛选
/*ul的第一个子元素 */
ul li:first-child{
color: red;
}
/* ul的最后一个子元素 */
ul li:last-child{
color:yellow;
}
/*选择每一个p元素的第一个字母*/
p:first-letter{
background:darkcyan ;
}
/*选中p1,先定位到父元素的第一个子元素，当定位的元素与当前元素一致时才生效*/
p:nth-child(1){
color: #893873;
}
/*按类型选择父元素下的第1个P元素*/
p:nth-of-type(1){
color: chocolate;
}
/*鼠标悬浮时改变背景色*/
li:hover{
background: brown;
}
属性选择器
<style>
.demo a{
float: left;
display: block;
background: #893873;
color: blue;
border-radius: 10px;
/*行高与容器高度一致时垂直居中*/
/*line-height: 50px;*/
text-align: center;
/*加粗 字体大小 行高 */
font: bold 20px/50px Arial;
/*取消下划线*/
text-decoration: none;
margin-right: 10px;
50px;
height: 50px;
}
/*选择具有id属性的元素*/
/*属性*/
/*a[id]{*/
/* background: hotpink;*/
/*}*/
/*选择id属性为first 的元素*/
/*属性名 = 属性值（可以是正则表达式）*/
/*绝对相等 =
包含 *=
开头 ^=
结尾 $=
*/
/*a[id=first]{*/
/* background: chocolate;*/
/*}*/
/*class 属性中有links item的元素*/
/*a[class="links item"]{*/
/* background: yellow;*/
/*}*/
/*选中href属性中以http开头的元素*/
/*a[href^=http]{*/
/* background: coral;*/
/*}*/
/*选中href属性以html结尾的元素*/
a[href$=html]{
background: yellow;
}
</style>
美化网页元素
为什么要美化网页
- 有效地传递页面信息
- 吸引用户
- 凸显页面主题
- 提升用户体验
span标签：重点要突出的子，用span套起来
字体样式
font-family: 字体
font-size: 字体大小
font-weight:字体粗细
color:字体颜色
文本样式
color: 颜色 （rgb rgba）
text-align:排版，居中
text-indent:首行缩进(单位用em表示)
line-height:行高（行高与容器高度一致时可以设置垂直居中）
文本的装饰效果
text-decoration:
图片和文本居中对齐
<a href="" ><img src="image/头像.jpg" alt="头像">
<span>bilibili</span> </a>
img,span{
vertical-align: middle;
}
超链接伪类
a:hover{}
阴影
text-shadow :阴影颜色，水平偏移，垂直偏移，阴影半径
列表
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形
背景
背景颜色
/*颜色 路径 位置 平铺方式*/
background: red url("image/下拉箭头.png") 250px 0px no-repeat;
/*单独设置*/
background-image: url("image/右.png");
background-position:250px 0px ;
background-repeat:no-repeat;
背景图片
div{
1000px;
height: 750px;
border: #a1185a solid 2px;
/*默认全部平铺*/
background-image: url("img/01.jpg");
}
.div1{
/*水平平铺*/
background-repeat: repeat-x;
}
.div2{
/*竖直平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
}
渐变
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
圆角边框
border-radius:
顺序：左上，右上，右下，左下（顺时针）