CSS的基本介绍
CSS基本内容
CSS的文件结构
凡是html中的标签都可以进行选中,p代表标签中所有的p标签都遵从以上格式。
CSS选择器
<!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>
内部样式常见属性
外部样式的使用
样式引用的优先级
文本样式常见的属性
三种颜色表示方法:英文,16进制表示方法,RGB表示方法。
字体类样式常见属性
伪类样式
伪类就是一种特殊的类的形式,专门用于设置超链接点击前后等的样式状态。
点击前是红色 点击后是绿色 悬停是黄色30Px
当然其他标签也可以设置
伪元素选择器
其他选择器
类选择器:允许重复,相同名称具有相同效果格式如下
标签选择器:标签可以直接使用,相同标签全部被选择格式如下
id选择器:为了方便使用是不允许重复,语法上允许,唯一的选择器,格式如下#+id。
*号选择器:对所有的内容进行控制。
逗号选择器:逗号可以连续对多个标签使用相同效果
空格选择器:选中某个id内所有的某类元素,下图选中div元素下的所有P标签。
>选择器:直接选择div1下的,孙子不选
+选择器:和div是同一级的p直接都被选中。
属性选择器:和类选择等类似
选择器的优先级排序
important代表强制优先级提升。
规律:选择范围越小优先级越高
盒子模型
一、块元素block
块元素——div、p、h1-h6、ul、ol、li
所有的块级元素独占一行显示
可以设置宽高
二、行内元素inline
行内元素——span、a、font、strong、em、i
所有的行内元素都在一行上显示
不能设置宽高、由内容撑开
三、行内块inline-block
行内块——img、input
可以设置宽高、并且在一行上显示
默认对齐的是基线
<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>
难点:ul没有设置高度,高度为0,造成下标题紧接着块元素下边,导致乱码,设置高度700后,如果缩小窗口高度700又会造成乱码,所以高度应该随窗口变化。
<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>