目录
1、CSS概念
1.1 什么是CSS？
CSS：层叠样式表(英文全称：Cascading Style Sheets)
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.2 CSS语言特点
- 有着丰富的样式定义
- 易于使用和修改
- 多页面应用
- 层叠效果
- 页面压缩
1.3 CSS的表现层（美化网页）
练习格式和规范：
1.4 CSS的3钟导入方式
(1）css的导入方式分别是：行内样式，内部样式，外部样式。
(2) 优先级，采用就近原则，行内样式>内部样式>外部样式。
行内样式：在标签元素中编写一个style属性，编写样式即可。
内部样式：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
外部样式：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
(3）外部样式的两种写法。
在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css。
链接式（HTML）：
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">导入式（CSS）：
<!--导入式-->
<style>
@import url(css/style.css);
</style>2、CSS选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
- 基本选择器（通过名称、ID、类来选取元素）
- 层次选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 结构（伪类选择器）（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
2.1 基本选择器
优先级：优先级==id选择器>class选择器>标签选择器
1，标签选择器：选择一类标签 标签{}
<style>
/*标签选择器，会选择到页面上所有的这个标签元素*/
h1{
color: #aec2d7;
background: #2381e3;
}
</style>2，类选择器（class）：选择所有class属性一致的标签，跨标签 . 类名{}
类选择器的好处：多个标签归类，是同一个class，可以复用。
<style>
/*类选择器的格式 .class的名称{} */
.zhangsan {
color: #a61db0;
}
.lisifangfa {
color: #c518a5;
}
</style>3，id选择器：全局唯一！#id名称{}
id选择器：不遵循就近原则，固定的。
<style>
/*id 选择器：#+id名称{}*/
#zhangsan {
color: #2381e3;
}
</style>2.2 层次选择器
1.后代选择器：在某个元素的后面。( )空格
2.子选择器：只有一代。(>)
3.相邻兄弟选择器。(+)
4.通用兄弟选择器。(~)
/*后代选择器：所有标签都有*/
body p{
background: red;
}
/*子选择器：只有第一代标签有*/
body>p{
background: #b443d7;
}
/*兄弟选择器：只有一个标签有（向下表示相邻的）*/
.active+p{
background: #2381e3;
}
/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: palevioletred;
}2.3 伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}2.4 结构（伪类选择器）
<style>
/*选中ul的第一个子元素，给它设值*/
ul li:first-child{
background: #c518a5;
}
/*选中ul的最后一个子元素*/
ul li :last-child{
background: #c518a5;
}
/*选中p1:定位到父类，选中第一个元素:选中当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效*/
p:nth-child(1){
background: #e19117;
}
/*选中父元素，下的p元素的第二个类型*/
p:nth-of-type(2){
background: #e19117;
}
</style>2.5 属性选择器
id+class的结合：
- = 绝对等于
- ~=包含所有
- ^=以这个开头
- $=以这个结尾
/*属性名，属性名=属性值（正则）*/
/*存在id属性的元素 a[] {} a[id=first的元素]*/
a[id=first]{
background:#aec2d7 ;
}
/*class中有links的元素*/
a[class*="links "]{
background: #e19117;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: palevioletred;
}/*选中href以$=结尾*/
a[href$=pdf] {
background: palevioletred;
}3、美化网页
span标签；重点要突出的字，使用span套起来，可以不需要选择器就可以凸显文字。
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
<div id ="title1">地球</div>
<span id="title1">世界</span>3.1 为什么要美化网页？
作用：
1，有效的传递页面信息
2，美化网页
3，凸显页面的主题
4，提高用户体验
3.2 字体样式
font-family:字体
font-size:字体大小
font-weight:字体的粗细
font-color:颜色
<style>
body {
font-family: "Arial Black", 楷体;
color: #e19117;
}
h1 {
font-size: 50px;
}
.p1 {
font-weight: lighter;
}
</style>3.3 文本样式
RGB 颜色 0~F
RGBA 透明度 A:0~1 文本居中：
排版 text-align: center;
段落首行缩进：text-indent: 2em;
行高和块的高度一致就可以居中。
内高度：height: 100px;
行内格距：line-height: 20px;
h1 {
color: rgba(0, 255, 255, 0.5);
text-align: center;
}
.p1 {
text-indent: 2em;
}
.p3 {
background: #e19117;
height: 100px;
line-height: 20px;
}关于划线：
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}水平对齐：需要一个参照物，（img就是一个参照物，span中的文字，对应img对齐。）
垂直对齐一副图像：vertical-align:
<style>
img,span{
vertical-align: middle;
}
</style>
<p>
<img src="image/a.png" alt="">
<span>abcdefg</span>
</p>3.4 阴影
text-shadow:
/*阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #2b8bea 10px 0px 2px;
}3.5 超链接伪类
创建一个超链接伪类：hover进行鼠标悬停并设置悬停颜色。
/* 默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/* 鼠标悬浮的颜色*/
a:hover{
color: #ec8512;
}
------------------------------------------------------------
/* 鼠标按住未释放的状态,以及按住后未释放的字体大小*/
a:active{
color: #0a55e1;
font-size: 50px;
}3.6 列表
list-style: none 去掉圆点
list-style: circle 空心圆
list-style: decimal 有序数字
list-style: square 正方形
ul{
background: lightyellow;
}
ul li {
list-style: none;
}3.7 背景
background-image: 默认全部是平铺的
background-repeat: repeat-x; 横向平铺
background-repeat: repeat-y; 纵向平铺
background-repeat: no-repeat; 不平铺
<style>
div {
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/a.png");
}
.div1 {
background-repeat: repeat-x;
}
.div2 {
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>3.8 渐变
径向渐变，原型（渐变也可以自己调试，调出好看的颜色来）
渐变网址：格拉比恩 (grabient.com)
<style>
body{
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
</style>4、盒子模型
4.1 什么是盒子模型？
盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。
盒子模型包括内容：
margin：外边距
padding：内边距
border：边框
4.2 边框
1，边框的粗细border: 1px;
2，边框的颜色 border: red;
3，边框的样式 边框实线：border: solid；边框虚线：border: dashed;
<style>
body{
/*总有一个默认的外边距是0 margin: 0;*/
margin: 0;
}
/*border：粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
div:nth-of-type(1) input{
border: 3px solid palevioletred;
}
div:nth-of-type(2) input{
border: 3px dashed #ce1a05;
}
</style>4.3 内外边距
外边距：margin
margin: 0 auto; 居中
margin: 0; 代表盒子上下左右
margin: 0 1px 上下左右;
内边距：padding
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
padding: 0;
}
4.4 圆角边框
border-radius: 50px左上 0 右上 0左下 0右下，顺时针方向操作四个角
<style>
div {
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 0 0 0 ;
}
</style>打印结果：
4.5 阴影
盒子阴影：
box-shadow: 10px 10px 150px yellow; 阴影
img {
border-radius: 150px;
box-shadow: 10px 10px 150px yellow;
}5、浮动
5.1 标准文档流
块级元素：独占一行
h1-h6 p div 列表...行内元素：不独占一行
img strong em span a ...行内元素 可以被包含在块级元素中，反之，则不可以。
5.2 display
display：使图片在边框内部。
block块元素
display:inline行内元素
display:inline-block，既可以是块元素，也可以是行内元素（是块元素，但是可以内联，在一行！）
display:none：让元素消失
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #ec8512;
display: none;
}
span {
width: 100px;
height: 100px;
border: 1px solid #ec8512;
display: inline-block;
}
</style>5.3 float左右浮动
float：相比于display，浮动可以操控图片在边框内的位置。
写在元素内的：
float: right; 浮动在右侧
float: left; 浮动在左侧
clear:right；右侧不允许有浮动元素
clear:left；左侧不允许有浮动元素
clear:both；两侧不允许有浮动元素
.layer01{
float: right;
float: left;
clear:right；
clear:left；
clear: both;
}
5.4 解决边框塌陷问题
1，overflow：（解决float浮动边框塌陷问题）
overflow: hidden;2,父类添加一个伪类：after （解决float浮动边框塌陷问题）
#father:after{
content:"";
display:block;
clear:both;
}5.5 display与float的对比
display：不可控制边框的方向。
不用去管理，因为它可以是一块元素。
float：可以控制边框的方向。
浮动起来的话会脱离标准文档流。所以要解决父级边框塌陷的问题。
6、定位
6.1 相对定位
1，相对定位：position: relative;
相对于原来的位置，进行指定的偏移；相对定位，它仍然在文档标准流中，原来的位置会被保留！
表示距离上方-20px：top: -20px;
表示距离左方20px：left: 20px;
表示距离下方10px：bottom: 10px;
表示距离右方20px：right: 20px;
<style>
body { /* 页面里都会有一个默认边框，这个边框也可以给他设值 */
padding: 20px;
}
div { /* 给边框设值大小 */
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father { /* 通过id选择器给边框设值 */
border: 1px #666 solid;
padding: 0;
}
#first { /* 通过id选择器给子边框设值 */
background-color: #ec8512;
border: 1px #b73535 dashed;
position: relative; /*相对定位：上下左右：定位是向上距离-20个单位，距离向左20px个单位*/
top: -20px;
left: 20px;
}
</style><div id="father">
<div id="first">第一个盒子</div>
</div>6.2 绝对定位
绝对定位：absolute
1，没有父级定位的前提下，相对于浏览器定位。
2，假设父级元素存在定位，我们通常相对于父级元素进行偏移。
3，在父级元素范围内进行移动。
position: absolute;6.3 固定定位fixed
position: fixed;6.4 z-index
（1）z-index：在属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
默认的 z-index 是 0。Z-index -1 拥有更低的优先级。
.tipText{
color: #ef0a2b;
z-index: 999;
}图层展现地方：看西施，长寿
（2）透明度（opacity：背景透明度：默认值为0.0-1.0之间）
opacity: 0.5;/*背景透明读*/
opacity: 1.0;打印结果：
7、动画
animation-name: example; 把"example" 动画绑定到 <div> 元素。
animation-duration: 4s; 属性定义需要多久时间完成动画。
<style>
/* 向此元素应用动画效果*/
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
/*动画代码*/
@keyframes example {
0% {background-color: yellow;}
25% {background-color: red;}
50% {background-color: green;}
100% {background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>概念参考地址：CSS（层叠样式表）_百度百科 (baidu.com)
扫一扫
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
