目录
一、CSS引入方式
二、选择器
1、基础选择器
2、复合选择器
三、元素基本属性
1、字体属性
2、文本属性
3、背景属性
四、元素的显示模式
1、块级元素block
2、行内元素inline
五、盒模型
1、边框
2、内边距
3、外边距
六、弹性布局
1、flex如何设置
?2、控制元素在水平方向的排列
?3、控制元素的垂直方向
一、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来进行演示：
align-items: stretch;?
align-items: center;
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
