一、简介
1、CSS和HTML的关系
- HTML用于构建网页的结构
- CSS用于构建HTML元素的样式
- HTML是页面的内容组成,CSS是页面的表现
2、CSS语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
3、CSS注释
CSS注释以 "/*" 开始, 以 "*/" 结束。
二、CSS的引入方式
1、内联样式(行内样式)
<p style="background: orange; font-size: 24px;">哈哈哈<p>
特点:缺乏整体性和规划性,不利于维护,维护成本高。
2、内部样式
适用于对单个文档进行修饰
特点:单个页面内的CSS代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱
3、外部样式
可以将某一样式,应用于多个页面进行修饰。
引用方式:<link rel="stylesheet" type="text/css" href="xxx.css">
特点:提高代码的重用性、可扩展性
4、CSS的优先级:就近原则
三、选择器
1、基本选择器
-
元素选择器
p{
font-size:14px;
}
所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等。
无论这个标签藏的多深,一定能够被选择上。
选择的所有,而不是一个。
-
类选择器
<head>
<style>
.wenzi{
width:800px;
}
</style>
</head>
<body>
<h2 class="wenzi">哈哈哈</h2>
</body>
class属性的特点:
特性1:类选择器可以被多种标签使用。
特征2:类名不能以数字开头
-
ID选择器
<head>
<style>
#wenzi{
width:800px;
}
</style>
</head>
<body>
<h2 id="wenzi">哈哈哈</h2>
</body>
特别强调的是:HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!ID名字不能以数字开头。
-
基本选择器优先级:id>class>元素
2、关系选择器
-
后代选择器:选择并设置位于 <div> 元素内部的每个 <p> 元素的样式
div p
{
background-color:yellow;
}
-
子代选择器:选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示
div>p
{
background-color:yellow;
}
-
块级元素div、行内元素span
3、属性选择器
用于选取带有指定属性和值的元素。
input[type="text"][value="456"]{
background-color: red;
}
4、伪类选择器
a:link{
color:red;/* 未访问的链接 */
}
a:visited{
color:black;/* 已访问的链接 */
}
a:hover{
color:blue;/* 鼠标移动到链接上 */
}
a:active{
color:orange;/* 鼠标按下时的链接 */
}
四、浮动
1、浮动初衷:
浮动设计的初衷为了解决文字环绕图片问题,浮动后一定不会将文字挡住,这是设计初衷,不能违背的。
2、浮动语法:
- float:left;向左浮动
- float:right;向右浮动
- float:none;默认值,不浮动
3、消除浮动影响
- 给浮动元素的父节点加入属性 overflow:hidden。
注意:这种情况下,父布局不能设置高度。
-
给父节点加一个高度,将粉色div“撑起来”。
前提:设置父标签合适的高度,前提必须确定子布局的高度,来计算父布局的合适高度,包裹住子布局。
五、定位
1、静态定位:static(默认值)
静态定位:没有定位,元素出现在该出现的位置,块级元素垂直排列,行内元素水平排列。
2、相对定位:relative
相对定位:相对于自己原位置进行定位,定位后保留占位,其他元素不会移动位置。
3、z-index
z-index:堆叠顺序属性,设置图片谁在上面。
注意:Z-index 仅能在定位元素上奏效,元素可拥有负的 z-index 属性值。
4、绝对定位:absolute
相对已经定位的父元素进行定位。
5、固定定位:fixed(适用于网页侧边栏)
六、盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。