CSS的基本介绍
![](https://i-blog.csdnimg.cn/blog_migrate/8ca36cbc62bba77073395fbe303517bf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/064f8519771fb90a9d6689eb27c2b9cc.png)
CSS基本内容
![](https://i-blog.csdnimg.cn/blog_migrate/5f7d078b13d9739e281f409061411dd6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b68a4ffe255ba0847946579d25ecc2a8.png)
CSS的文件结构
![](https://i-blog.csdnimg.cn/blog_migrate/604a5322f04957963a563237a29b3a21.png)
凡是html中的标签都可以进行选中,p代表标签中所有的p标签都遵从以上格式。
![](https://i-blog.csdnimg.cn/blog_migrate/5a97cca5224bfdf904699d636851439f.png)
CSS选择器
![](https://i-blog.csdnimg.cn/blog_migrate/a875d56cbba033f8119ebdcb7263527a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fe7b75810910f49b88d05dfbfd9830cd.png)
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p{
background-color: red;
font-size: 40px;
}
.p1{
font-family:楷体;
}
</style>
<title>Document</title>
</head>
<body>
<p>wwww.imooc.com</p>
<p class="p1">慕课网</p>
<p class="p1">层叠了P效果和P1效果双重效果</p>
</body>
</html>
内部样式常见属性
![](https://i-blog.csdnimg.cn/blog_migrate/e6d3a74b4b047546114d69e85456c01a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6834b1dea8bcd967070c4c8422fea9a7.png)
外部样式的使用
![](https://i-blog.csdnimg.cn/blog_migrate/54af606f354d9c75c0576e49cc1a7cf8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aa92b96ad72c55abf369ebf123eb8ffb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/33c682045c090b3775b2804d966b9dff.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6f4af1018e5d64e4a6dccd83901bf506.png)
样式引用的优先级
![](https://i-blog.csdnimg.cn/blog_migrate/c86c449384c4d02d625d8559abeb9313.png)
文本样式常见的属性
![](https://i-blog.csdnimg.cn/blog_migrate/307e368e6c2b263b0aa6a70abf3420d4.png)
三种颜色表示方法:英文,16进制表示方法,RGB表示方法。
![](https://i-blog.csdnimg.cn/blog_migrate/cd748d8abebffcd1a3cd623f02ae9347.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2d0d04226a70ad1e9e6f88824a2b9eae.png)
字体类样式常见属性
![](https://i-blog.csdnimg.cn/blog_migrate/b20107e33f36539f38e302516bc28cce.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2df55554f846cc338a86eb3d3a4da4e4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/77f063722889852e943ba64f3ccf631e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/044302e2964b82f395048fcfbc6c97d5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e20a0baa4298b0b7b7bf8beec2a6fd06.png)
![](https://i-blog.csdnimg.cn/blog_migrate/facb41b12fe76969c1d1f5b4f372fe0f.png)
伪类样式
![](https://i-blog.csdnimg.cn/blog_migrate/4c979abc18f04ed035655e702eec0a01.png)
伪类就是一种特殊的类的形式,专门用于设置超链接点击前后等的样式状态。
点击前是红色 点击后是绿色 悬停是黄色30Px
![](https://i-blog.csdnimg.cn/blog_migrate/af9cb0c6ef9a65ddca2c22c95b6b2e16.png)
![](https://i-blog.csdnimg.cn/blog_migrate/15df92eca76d1eca7a3cea34f1567b95.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0dd281eb1ced519bc74c3814975563fe.png)
当然其他标签也可以设置
![](https://i-blog.csdnimg.cn/blog_migrate/b94f2b027d420dafbda92d45229d3dc2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d3f9822d32c04636949487f39f406276.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9cc54783c4d6728df19e5f03dad49ed4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cef37e9797e2d74d1856c13fcea0291f.png)
伪元素选择器
![](https://i-blog.csdnimg.cn/blog_migrate/ee25be030c7adef1f143eaa3ab4f426a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eb6eb51e296c5baa561faa95170b6e3f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/501ddf18bd155b7c4d69a2449f0b32b9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3c66eeb9d7c6d1c0aaaa806b8c829c38.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e976024d8c0c2fd87b09702566d320ef.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7ced8e90ed2873e64d7a38259d868c57.png)
其他选择器
![](https://i-blog.csdnimg.cn/blog_migrate/93e0dedd7b1bc54add7ab2bfed097fa8.png)
类选择器:允许重复,相同名称具有相同效果格式如下
![](https://i-blog.csdnimg.cn/blog_migrate/ce778edd5b2db731e4474943a1e4c732.png)
标签选择器:标签可以直接使用,相同标签全部被选择格式如下
![](https://i-blog.csdnimg.cn/blog_migrate/476717c2173b2ec3f35e23ce0c436a0e.png)
id选择器:为了方便使用是不允许重复,语法上允许,唯一的选择器,格式如下#+id。
![](https://i-blog.csdnimg.cn/blog_migrate/8568d7a0a88c07ac3c03ad20a880f78d.png)
*号选择器:对所有的内容进行控制。
![](https://i-blog.csdnimg.cn/blog_migrate/af75d6ba7b58eca5be39f34f0468772d.png)
逗号选择器:逗号可以连续对多个标签使用相同效果
![](https://i-blog.csdnimg.cn/blog_migrate/cf2b23f13a57da284e74c81b0c4abc95.png)
空格选择器:选中某个id内所有的某类元素,下图选中div元素下的所有P标签。
![](https://i-blog.csdnimg.cn/blog_migrate/5bd1cd6562c47ddc7c1e5dba5c45e940.png)
>选择器:直接选择div1下的,孙子不选
![](https://i-blog.csdnimg.cn/blog_migrate/6b57c153dcce45f1f4098d5dbbe1b14a.png)
+选择器:和div是同一级的p直接都被选中。
![](https://i-blog.csdnimg.cn/blog_migrate/da6463418a7eaba56552d6c60e356b60.png)
属性选择器:和类选择等类似
![](https://i-blog.csdnimg.cn/blog_migrate/3d6ca7ee9f9e3a05f2d8fbc8b9b219f9.png)
选择器的优先级排序
![](https://i-blog.csdnimg.cn/blog_migrate/22eb46207a030a7c88d25d880bea638a.png)
important代表强制优先级提升。
规律:选择范围越小优先级越高
盒子模型
![](https://i-blog.csdnimg.cn/blog_migrate/a29ac6b5a3c8e6829867970594152af0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/398ec84bae03bce6880cd2f5d1143452.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aa4f9b745f271e5b9144de4cc10a13dc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0169dd7bbf59aa2bfa11c7cd4626a4c1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/25c6ff56091bc261bfe40d352922221c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1b3ee7c5f055c14f9f796bc3b5eea34d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/792b3988214dd308863fb8f971aa531f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7150fba2ba5fedb41aeeac730f4d4614.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9a843b14079aee3a70c452acdf519ecf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/605139b19d04ec3de54c6ca5b9e1378a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1ee2960ac898397dc8496c2b824994a1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ff7e4a4ed1b7f1836741bf1da4467070.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9665feb95f954dd332c0523782779b3a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f88da83852889fd696de27997d956d47.png)
![](https://i-blog.csdnimg.cn/blog_migrate/51162f4846997c2a4ead6cf08569fead.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c76204ba1853bfc070c4feb77786c53f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/28e573dfae214fe7b22fd8af8d795aee.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7e88e90b7e276dceac9ede080531125e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a9f261137b73de2a3ae7bbf9867c4f2b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cf817e49a1bb161d01b78569a688c54e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eb434d67f60585fba6a8e09af333d5d8.png)
一、块元素block
块元素——div、p、h1-h6、ul、ol、li
所有的块级元素独占一行显示
可以设置宽高
二、行内元素inline
行内元素——span、a、font、strong、em、i
所有的行内元素都在一行上显示
不能设置宽高、由内容撑开
三、行内块inline-block
行内块——img、input
可以设置宽高、并且在一行上显示
默认对齐的是基线
![](https://i-blog.csdnimg.cn/blog_migrate/2b5bbf6d02e0ff3e9d859c223cf15f5b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b96cd12d628f921f277e236e4fa3c60c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8668787499ace910c458f8179a42852d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5423b1e2732b69bbab683bf8da5a68c2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6b6f163cf3b2f67375620332d9dfd355.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e784de6e09747321d7f09a964bf1a5ab.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7433853eb6617542e663b616faf4aaf4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/73edf8894b44b6aaf0462fd81cfb4fa2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4b9917fb6d5e6efa8024dc4a07221d45.png)
![](https://i-blog.csdnimg.cn/blog_migrate/43884d3e253243e6f73df5a58a694074.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e36ab6cff8864fdada3b4f3798e8a19c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b7bf97f2208c85de8aacdffaa6ace343.png)
![](https://i-blog.csdnimg.cn/blog_migrate/95846ca77157a29b132385e4cb24e7f2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/378a7d69bab6d792267c4036e3c8e5d1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/77a7fb32daa0c3102787864c746ad33f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e219ab5641afabf42e3a2e02dbd9fb2e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cb27d1ef78b87faacfc180fdc02846ff.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1208a4db93542511aba7b57efacf6bbe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/16324b9ceef8e1f5bdf9aec3e7395df9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c514fd4dc52de0781180d0a8f097f975.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a53d7e99ee91e0faad568d5b1608422.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0f956b988f9ecbd7a8e3490d2d438a1c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/25761f722d6ff4eff64cd3164bab3be5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aab15b22303b6906c89eca6461c646cb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d429186ce360fd76a5e544e7767315e8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9e7bd0aaa56fb9b7506fe42ed5deb4d0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/74c6fb659b88b42ccedef39094445743.png)
![](https://i-blog.csdnimg.cn/blog_migrate/23d1c6d7a02acfd0821edca74fac499c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7f5f431aee4c521d1733ab8739b49a2e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a21ff23529debf098b3c9ac6328f023.png)
![](https://i-blog.csdnimg.cn/blog_migrate/50c849082ef60951f3f2868a9d03d71a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c4517e7ffb467f5d68bd13e11d0b25c0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/82cca28ad53d2f32e126994d06802f5d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78eb15a1a867cfa42f86e134a912d211.png)
<style>
body{
background-color: #eee;
}
li{
float: left;
list-style: none;
width: 280px;
height: 280px;
margin: 10px;
text-align: center;
padding: 20px;
background-color: #fff;
}
li img{
width: 260px;
}
p{
color: #707070;
font-size: 20px;
}
</style>
</head>
<body>
<h1>诱惑美食</h1>
<ul>
<li>
<p>Country bread with dry figs</p>
<img src="./images/1.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Fruits</p>
<img src="./images/2.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Bell Pepper</p>
<img src="./images/3.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Oranges</p>
<img src="./images/4.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Healthy breakfast</p>
<img src="./images/5.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Homemade Cupcakes</p>
<img src="./images/6.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Strawberries</p>
<img src="./images/7.jpg" alt="">
<a href="#">Free Download</a>
</li>
<li>
<p>Custard Croissant</p>
<img src="./images/8.jpg" alt="">
<a href="#">Free Download</a>
</li>
</ul>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/fe6c1e309a77612b0f680ca4112b543e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2cd2908fa9f64ec9d4e68bb1881295a7.png)
难点:ul没有设置高度,高度为0,造成下标题紧接着块元素下边,导致乱码,设置高度700后,如果缩小窗口高度700又会造成乱码,所以高度应该随窗口变化。
![](https://i-blog.csdnimg.cn/blog_migrate/6c1b8d69dae17bf80be9b939b0f966e1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f98012684ee226391f30a9f028f3a29e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/601839b887c748e62a174be1b0ecb154.png)
<style>
.one {
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
.two {
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
.erba {
width: 600px;
height: 200px;
background-color: green;
}
.three {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="one"></div>
<div class="two"></div>
<!-- 通过第三个盒子将一行浮动效果固定下来,但却可以横向排列 -->
<div class="three"></div>
</div>
<div class="erba"></div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/8c39cfa7beaa9d64fadc19a4b7118a22.png)
![](https://i-blog.csdnimg.cn/blog_migrate/11f5d64e9c4f1b924dea0be62939a015.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f0b170618e18045b615907c2a3f31e63.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b64173dd77bc262cc158e4381ea4cde2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/768de7d8067701c4d6adc61c2a9b43e7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9118288e56c342a08a3750f41fa8e7c9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/191c238ac797d48af2deb6deec72f10a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a2d91ca4b5faef3b449718ef2edc7e58.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6920361452f1b749083b7c1d4ae45f32.png)