目录
一、CSS引入方式
CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
1、内部样式
<div style="color: blue;">内部样式</div>像这样将css语句写入html标签中叫做内部样式
2、行内样式
通过<style></style>来写
<style>
div{
color:blue;
}
</style>
<div>内部样式</div>3、外部样式
我们通过单独创建一个css文件然后通过标签在头文件中引入
<link rel="stylesheet" href="style.css">注意： 受到浏览器缓存的影响，可能不会马上显示出来要用Ctrl+F5强制刷新
二、选择器
选择器分为基础选择器、复合选择器。
基础选择器：标签选择器、类选择器、id选择器、通配符选择器
复合选择器：后代选择器、子选择器、并集选择器、伪类选择器
1、基础选择器
1）标签选择器
<style>
div{
color:blue;
}
p{
color: #000;
}
</style>
<div>猫</div>
<div>猫</div>
<div>猫</div>
<p>狗</p>
<p>狗</p>
<p>狗</p>2）类选择器
<style>
.blue{
color:burlywood;
}
</style>
<div class="blue">css我谢谢你</div>
<div>css我谢谢你</div>也可以多类名同时应用：
<style>
.blue{
width: 200px;
height: 300px;
}
.red{
color:crimson;
}
.green{
color:cyan;
}
</style>
<div class="blue red">css我谢谢你</div>
<div class="blue green">css我谢谢你</div>
<div class="blue red">css我谢谢你</div>3）id选择器
<style>
#yang{
color:cyan;
}
</style>
<div id="yang">哈哈哈哈</div>4）通配符选择器
<style>
*{
color:cyan;
}
</style>
<div id="yang">哈哈哈哈</div>
<p>哈哈哈哈哈哈哈</p>2、复合选择器
1）后代选择器
不一定是子元素，子元素的子元素也可以影响
<style>
.one li a{
color:cyan;
}
</style>
<ol class="one">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ol>2）子选择器
只能影响子元素
<style>
.one>a{
color:cyan;
}
</style>
<ol class="one">
<a href="#">aaa</a>
<a href="#">bbb</a>
<a href="#">ccc</a>
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ol>3）并集选择器
<style>
div,h3{
color:darkcyan;
}
</style>
<div>aaa</div>
<h3>bbb</h3>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>4）伪类选择器
链接伪类选择器：
a:link 选择未被访问过的链接
a:visited 选择已经访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接
<style>
a:link{
color:darkcyan;
}
a:visited{
color:darkgoldenrod;
}
a:hover{
color:darkorchid;
}
a:active{
color:darkred;
}
</style>
<a href="#">小猫</a>force伪类选择器（用在input表单）
<style>
.one>input:focus{
color:darksalmon;
}
</style>
<div class="one">
<input type="text">
<input type="text">
<input type="text">
</div> 
三、元素基本属性
1、字体属性
字体设置：font-family:'XXXX';
大小：font-size:XXXX;
粗细：font-weight:XXXX;
文字倾斜：font-style:italic;
取消文字倾斜：font-style:normal;
2、文本属性
文本颜色（RGB）：
color: red;
color: #ff0000
color: rgb(255,0,0)文本对齐：
text-align: left; (左对齐)
text-align: right;(右对齐)
text-align: center;(居中对齐)文本修饰：
text-decoration: underline; 下划线
text-decoration: none; 去掉下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线文本缩进：
text-indent: [值];我们可以用em或者px，em表示文字大小
行高：
line-height: [值];3、背景属性
背景颜色：
background-color: [颜色];背景图片：
background-image: url(...);背景平铺：
background-repeat: [平铺方式];
repeat：平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺背景位置：
background-position: x y;背景尺寸：
background-size: length|percentage|cover|contain;
length：可以是具体的数值30px 40px
percentage：百分比
cover：把图片扩展到背景全部覆盖
contain：让宽度和高度自己适应圆角矩形：
border-radius: length; //调整大小四、元素的显示模式
1、块级元素block
一般来说系统会默认调整为block元素
<style>
.parent{
width: 200px;
height: 300px;
background-color: darkseagreen;
}
.child{
width: 100px;
height: 100px;
background-color: darkturquoise;
}
</style>
<div class="parent">
<div class="child">child01</div>
<div class="child">child02</div>
</div> 
块级元素的特点：
1、独占一行
2、高度宽度、内外边距、行高都是可以控制的
3、宽度默认是父元素的100%
4、内部可以嵌套放置块级元素和行内元素
2、行内元素inline
<style>
.parent{
width: 200px;
height: 300px;
background-color: darkseagreen;
}
.child{
width: 100px;
height: 100px;
background-color: darkturquoise;
display: inline;
}
</style>
<div class="parent">
<div class="child">child01</div>
<div class="child">child02</div>
</div> 
行内元素的特点：
1、不是独占一行
2、高度宽度都是不能控制的
3、左右外边距有效上下外边距无效、内边距有效
4、默认宽度就是文字本身的大小
5、内行元素只能容纳文本和其他内行元素，不能放块级元素
五、盒模型
每一个Html元素就相当于一个盒子
margin是外边距
border是边框
padding是内边距
content是内容
1、边框
粗细border-width：
样式border-style(默认没有边框)
颜色border-color
支持简写：
border: xxx xxx xxx
同时可以改变任意方向
border-top/bottom/left/right注意：
边框会扩大盒子的大小
用box-sizing:border-box;来调节
2、内边距
基础写法：
padding-tops 上
padding-bottom 下
padding-left 左
padding-right 右复合写法：
padding: 5px //都为5px
padding: 5px 10px //上下为5px 左右为10px
padding: 5px 10px 20px //上为5px 左右为10px 下为20px
padding: 5px 10px 20px 30px //根据上右下左来看3、外边距
基础写法：
margin-tops 上
margin-bottom 下
margin-left 左
margin-right 右复合写法：
margin: 5px //都为5px
margin: 5px 10px //上下为5px 左右为10px
margin: 5px 10px 20px //上为5px 左右为10px 下为20px
margin: 5px 10px 20px 30px //根据上右下左来看块级元素水平居中：
margin-left:auto margin-right:auto
margin:auto
margin:0 auto注意：不能使用margin的方式垂直居中
六、弹性布局
一般来说我们常常说的flex布局就是弹性布局
1、flex如何设置
当我们没有加上弹性布局时：
我们会看见我们的边框非常的小，当我们加上弹性布局时:
<style>
div{
width: 100%;
height: 150px;
background-color: red;
display: flex;
}
div>span{
width: 100px;
background-color: seagreen;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
2、控制元素在水平方向的排列
justify-content1）flex-start 项目位于容器开头
2）flex-end项目位于容器结尾
3）center项目位于容器中央
4）space-between 项目在行与行之间有间隔
5）space-around 项目在行前、行之间和行后有空间
3、控制元素的垂直方向
align-items
| stretch | 默认值，行拉伸 |
| center | 相互对中央进行打包 |
| flex-start | 向着开头对进行打包 |
| flex-end | 向着结尾对进行打包 |
| space-between | 均匀分布在容器中 |
| space-around | 均匀分布在容器中，两端各占一半 |
在这一我们就以stretch和center来进行演示：
align-items: stretch; 
align-items: center;
扫一扫
3192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
