文章目录
1.1 CSS
Css 又叫层叠样式表/级联样式表
他是用来描述html标签的, 描述html标签具有哪些特点
他是依赖于html而存在的.
1.2 在html中引入css(推荐使用如下的方式2,共3种方式)
1.3 选择器
标签选择器
通过标签名, 把css样式和对应html标签结合起来
类选择器
通过类名把html元素和css样式绑定到一起
Class=”类名”
id选择器
通过id属性, 把css样式和对应的html代码结合起来
Id在一个html页面上不可以重复(每一个标签如果设置id, 那么id必须唯一)
其它选择器
补充1:(复合选择器)
<style>
/* 复合选择器: div和p都应用某种样式*/
div, p{
width: 100px;
height: 100px;
background: #4eff6c;
}
</style>
补充2:(复合选择器)
<style>
/* 复合选择器: div 里面的 p 应用某种样式*/
div p{
width: 100px;
height: 100px;
background: #4eff6c;
}
</style>
补充3:(hover选择器)(这个要记住)移动到这个div之后,应用这个样式(第3天的作业2中使用)
<style>
p{
width: 100px;
height: 100px;
background: #4eff6c;
}
/*归为一个大类(自己添加)*/
/* 伪元素/类*/
.p1:hover{
width: 200px;
height: 100px;
/*移动上去之后背景颜色改变*/
background: #ff4c2f;
/*移动上去之后字体颜色改变*/
color: white;
}
</style>
/* 伪元素/类*/
div:hover{
width: 200px;
height: 100px;
background: #ff4c2f;
color: white;
}
补充4:(属性选择器)找一个拥有target属性的标签,应用样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[target]{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.baidu.com" >百度</a>
</body>
总结:
使用最多的是类选择器
id选择器使用非常少:权重太高;id一般是给js的dom操作使用的
选择器的通配:( * )选择所有元素,body也会被通配
<style>
*{
background: #ff4c2f;
}
</style>
选择器的优先级
1.4 盒子模型(CSS中比较重要的东西)
一个元素在页面上占据的位置不仅仅有宽高,实际上是由四部分组成的
p标签是自带边距的
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成
1.5 html标签的分类(见0315文章)
块级标签
行级标签
行内块
1.6 浮动
1.6.1 标准流(标准文档流/ 文档流/ 标准流)
一个html页面显示的结果, 是根据其Html代码的元素特性, 从上到下, 从左到右有序排列
1.6.2 浮动
浮动: (把元素 “”飘””/漂浮 起来)
本来: 是用于文字环绕
现在: 主要用于布局: 设置了浮动的元素,使元素脱离标准流(块元素可以转化为行元素)
一旦浮动就会脱离标准文档流
核心:
1:浮动只影响后面的元素(后面的元素要符合标准文档流, 所以要把浮动元素空出来的位置,占据)
2:连续浮动一行显示
3:浮动以元素顶部为基准对齐
4:浮动可是实现模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 250px;
height: 350px;
background: #ff4c2f;
margin-bottom: 1px;
}
.div1{
background: #4eff6c;
width: 100px;
height: 100px;
float: left;
}
.div2{
float: right;
background: #fffe46;
}
</style>
</head>
<body>
<!--1:浮动只影响后面的元素-->
<!--2:连续浮动一行显示 -->
<!--3:浮动以元素顶部为基准对齐 -->
<!--4:浮动可是实现模式转换-->
<div class="div1">1
</div>
<div class="div2">2
</div>
<div class="div3">3
</div>
<div class="div4">4
</div>
</body>
</html>
效果图(理解):
清除浮动:
保证一个元素不被浮动影响( 前面的元素浮动了, 后面的元素要上移, 不想上移就可以通过清除浮动实现)
1.7 补充
1.7.1溢出隐藏
overflow 属性规定当内容溢出元素框时发生的事情
属性
Visible:默认值。内容不会被修剪,会呈现在元素框之外。
Hidden:内容会被修剪,并且其余内容是不可见的。
Scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
Auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, body, p, li{
margin: 0;
padding: 0;
/*2:overflow:hidden; 将超出部分的元素隐藏*/
overflow: hidden;
}
div{
width: 100px;
height: 100px;
background: red;
}
.div2{
width: 200px;
height: 50px;
background: #45ff1f;
}
</style>
</head>
<body>
<div>
<div class="div2">
</div>
</div>
<div>
11111
</div>
</body>
</html>
1.7.2隐藏
1:display:none 元素隐藏不占位置
2:overflow:hidden; 将超出部分的元素隐藏
3:visibility:hidden; 元素隐藏占位置
1.7.3其它
主要长宽单位
px 像素
% 相对于父元素的大小
line-height(设置行高)
浏览器默认字体大小为:16px
浏览器默认行高:18px