1.什么是CSS
如何学习
-
css是什么
-
css怎么用
-
css选择器
-
美化网页（文字，阴影，超链接，列表，渐变）
-
盒子模型
-
浮动
-
定位
-
网页动画（特效效果）
1.1什么是css
Cascading Style Sheet 层叠样式表
2.选择器
-
标签选择器 标签{}
h1{
color: red;
}
-
类选择器 .class{}
.a{
color: red;
}
.b{
color: yellow;
}
-
id选择器 #id{}
#c{
color: purple;
}
优先级 id选择器>类选择器>标签选择器
2.1层次选择器
-
后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 你
body p{ background: red; } -
子选择器： 一代 儿子
body>p{ background: red; } -
相邻兄弟选择器 只有一个 向下
.active + p{ background: red; } -
通用选择器 选中同级下面的
.active~p{ background: red; }
2.2结构伪类选择器
<style>
ul li:first-child{
background: red;
}
ul li:last-child{
background: blue;
}
/*选中当前元素（p）的父元素的子元素中第n（6）个元素，并且选中的元素是当前类型元素*/
p:nth-child(6){
background: yellow;
}
/*选中当前元素（p）的父元素的子元素中的（p）类元素*/
p:nth-of-type(1){
background: green;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p >p2</p>
<p>p3</p>
<ul>
<li>
l1
</li>
<li>
l2
</li>
<li>
l3
</li>
</ul>
<p>p3</p>
</body>
2.3属性选择器
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
3.美化网页
3.1字体样式
font-family: 楷体; 字体 font-size: 20px; 字体大小 font-weight: bold; 字体粗细 color: green; 字体颜色
3.2文本样式
3.3列表
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
3.4背景
背景颜色
背景图片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/照片.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
/*颜色，图片。图片位置，平铺方式
background:red url("") 100px 100px no-repeat */
3.5渐变
4.盒子模型
4.1什么是盒子模型
margin: 外边距
padding: 内边距
border： 边框
margin:0 auto；居中
margin:0 auto；在不同场景下生效条件如下：
块级元素：给定要居中的块级元素的宽度。
行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）
行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）
##
下面的元素都是行内元素：
-
b, big, i, small, tt
-
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
-
a, bdo, br, img, map, object, q, script, span, sub, sup
-
button, input, label, select, textarea
4.2边框
-
边框的粗细
-
边框的样式
-
边框的颜色
#box{
width: 300px;
border: 1px solid red;
}
4.3内外边距
盒子的计算方式：你这个元素到底多大
margin + border + padding + content(内容大小)
4.4圆角边框
div{
width: 100px;
height: 50px;
background: red;
/*圆角 = 宽度的半径*/
border-radius: 50px 50px 0 0 ;
}
4.5盒子阴影
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 10px yellow;
}
5.浮动
5.1标准文档流
块级元素：独占一行
行内元素：不独占一行
行内元素 可以被包含在块级元素中，反之，则不可以
5.2display
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
}
.span1{
display: inline-block;
}
.span2{
display: inline-block;
}
</style>
</head>
<body>
<div>块级元素</div>
<span class="span1">行内元素1</span>
<span class="span2">行内元素2</span>
<span class="span3">行内元素3</span>
</body>
5.3float
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
5.4父级边框塌陷
解决方案：
-
增加父级元素高度
-
增加一个空的div,清除浮动
<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; } -
overflow
在父级元素中增加
overflow: hidden;
-
父类添加一个伪类
.father:after{ content: ''; display: block; clear: both; }
小结：
-
浮动元素后面增加空div
简单，代码中尽量避空div
-
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
-
overflow
简单，下拉的一些场景避免使用
-
父类添加一个伪类after(推荐)
写法稍微复杂，但是没有副作用，推荐使用
5.5 对比
-
display
方向不可控制
-
float
浮动起来的话会脱离文档流，所以要解决父级边框塌陷的问题
6.定位
6.1 相对定位
<style>
div{
margin: 10px;
padding: 5px;
}
.father{
border: 1px solid red;
}
.d1{
background: #9797dc;
border: 1px solid blue;
position: relative;
top: -20px;
}
.d2{
background: #a2e0b8;
border: 1px solid #0ec14f;
}
.d3{
background: #c9beab;
border: 1px solid #cba229;
position: relative;
left: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</div>
相对定位： position:relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
6.2 绝对定位
定位：基于XXX定位，上下左右
-
没有父级元素的前提下，相对于浏览器定位
-
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
-
在父级元素范围内偏移
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会保留
<style> div{ margin: 10px; padding: 5px; } .father{ border: 1px solid red; position: relative; } .d1{ background: #9797dc; border: 1px solid blue; } .d2{ background: #a2e0b8; border: 1px solid #0ec14f; } .d3{ background: #c9beab; border: 1px solid #cba229; position: absolute; left: 20px; top: 20px; } </style> </head> <body> <div class="father"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> </div>
6.4 固定定位
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
6.4 z-index
<style>
#content{
width: 100px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 100px;
bottom: 55px;
height: 25px;
}
.tipBg{
background: black;
opacity: 0.5;
}
.tipText{
text-align: center;
color: white;
z-index: 999;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="images/照片.jpg" alt=""></li>
<li class="tipText">学习微服务</li>
<li class="tipBg"></li>
<li>时间：2099-01-01</li>
<li>地点：月球</li>
</ul>
</div>