一、html中可写CSS的位置
- 第一种：标签中使用style属性
- 第二种：html中head标签中使用style标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header {
position: fixed;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
height: 48px;
background-color: #2459a2;
line-height: 48px;
</style>
</head>
常用的css选择器：
- id选择器
- class选择器
- 标签选择器
- 层级选择器
# 层级间使用空格
.c1 .c2 #i1
- 组合选择器
# 多个选择器之间使用逗号
.c1,.c2,#i1
- 属性选择器
# 选择属性使用中括号
input[type='text']
.c1[type='text']
- 第三种：写在文件中，在html中head标签中使用link标签来引用
<head>
<meta charset="UTF-8">
<title>Title</title>
# css/comments为写在另一个文件中的css文件
<link rel="stylesheet" href="css/comments">
</head>
注：由于可以在不同的位置引用css，所有css的使用存在优先级问题：
- 如果样式不冲突，则全部都应用上
- 如果样式有冲突，优先使用标签中style属性，style标签中优先使用放置在下面的样式
二、常见CSS样式
- 边框
border: 1px dotted red
# 边框的三个属性：宽度、样式、颜色
# 可以只显示某一个边，e.g：border-left
- 高度
height: 50px;
# 写固定值，e.g：50px
# 如果有父标签，子标签高度可以用百分比
- 宽度
width: 50%;
# 可以写固定值，e.g：50px
# 可以写百分比，e.g：50%
- 字体大小
font-size: 25px;
- 水平居中
text-align: center;
- 垂直居中
line-height: 50px;
# 输入的值依据标签的高度填写
- 外边距
margin-top: 10px
margin: 0
- 内边距
padding-top: 10px
- 飘起来摆放float
float: left;
# 标签如果存在嵌套，显示父边框
clear: both;
- overflow
# 子标签中的图片大小超出了父标签的宽高,在父标签使用
overflow: auto
- 鼠标移动上出现突显色
# 带有menu的class属性，鼠标移动上去变成蓝色背景
.c1 .menu:hover{
background-color: blue
}
- display的四个属性
display: inline 块级转行内
display: block 行内转块级
# 行内标签无法设置高端，宽度，边距；块级标签可以设置
display: inline-block 可以给行内标签设置宽、高、边距
display: none 让标签消失
- positon用法：可以让样式分层显式
positon:fixed
# 应用场景：固定在浏览器顶部的菜单栏、右下角返回顶部键
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: white;
position: fixed;
bottom: 20px;
right: 20px;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd"></div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
# position和top、right、left、bottom配合使用
<style>
.pg-header {
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 60px;
}
</style>
position: absolute + relative
# relative做父标签，absolute做子标签。相对应relative这个父标签进行定位。定位值可正可负
典型场景：样式分3层，使用z-index属性，其中两层默认使用display: none不显示。opacity设置透明度。
添加功能：文档层+遮罩层+当前显示层。如果两层都有positon:fixed ， z-index的值大的在上面
<body>
<div style="z-index: 5;position: fixed;
background-color: white;height: 400px;width: 300px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;">
<input type="text">
</div>
<div style="z-index: 4;position: fixed;
background-color: black;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.5;
">
</div>
<div style="height: 5000px;background-color: aqua;">
sdflksdjflksdjf
</div>
</body>
- background
# 设置背景颜色
background-color:
# 背景可以设置成图片
background-image: url('*.gif');
# 设置图片是否重复显示
background-repeat: no-repeat;
# 如果是长条图片，通过background-position来显示
background-position-x:
background-position-y:
# 可以一次性指定以上属性
background: 颜色 图片 是否重复 位置左边
网友评论