18.CSS
时间:2022-05-08
本文章向大家介绍18.CSS,主要内容包括选择器、2.id选择器、3.class选择器、4.标签选择器、5.关联选择器(层级选择器)、6.组合选择器、7.属性选择器、引用方法、2.外部样式引用方法、边框、浮动(float)、display、边距、position、2.让头部标题栏固定不动、3.实现三层、overflow、2.over:hidden、hover(伪类)、background-image、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
选择器
1.标签上直接设置style属性
<p style="color: red">直接标签里面写</p>
2.id选择器
<style>
#i1{
color: green;
}
</style>
</head>
<body>
<p id="i1">以#开头命名</p>
</body>
3.class选择器
<style>
.c1{
color: green;
}
</style>
</head>
<body>
<p class="c1">以点开头命名</p>
</body>
4.标签选择器
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p >以标签命名</p>
</body>
5.关联选择器(层级选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*中间用空格隔开*/
span div{
background-color: red;
}
</style>
</head>
<body>
<div>第一层</div>
<span>
<div>span里面的div添加样式</div>
</span>
<div>第二层</div>
</body>
</html>
6.组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*中间用逗号隔开*/
h1,h2,h3{
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>第一个</h1>
<h2>第二个</h2>
<h3>第三个</h3>
</body>
</html>
7.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="derek"]{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<input type="text" name="derek">
<input type="password" name="pwd">
</body>
</html>
根据属性进行筛选匹配,只有name="derek"的input标签才匹配上对应的样式
引用方法
1.样式优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
</style>
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>
style优先级最大,其它的按编写顺序,越靠近越优先
2.外部样式引用方法
<link rel="stylesheet" href="common.css">
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 48px; #边框高度
width: 80%;
border: 1px dotted black; #边框宽度 样式 颜色
font-size: 30px; #字体大小
line-height: 48px; #设置跟边框高度值一样,里面的字会垂直居中
text-align: center; #水平居中
}
</style>
</head>
<body>
<div style="border: 1px solid red">第一个边框</div>
<div class="c1">第二个边框</div>
</body>
</html>
浮动(float)
默认块级标签会独占一行,用float可以让块级标签浮动在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 20%;
background-color: red;
float: left;
}
.c2{
width:60%;
background-color: black;
float: right;
}
</style>
</head>
<body>
<div class="c1">左边</div>
<div class="c2">右边</div>
</body>
</html>
float实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
.c2{
width: 98px;
height: 30px;
border: 1px solid green;
float: left;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<div>收藏本站</div>
<div>
<a>登陆</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
注:<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙;<div style="clear: both"></div>子边框浮动后,显示父边框的边框线
display
<body>
<!--改成行内标签-->
<div style="display: inline;background-color: red">1</div>
<!--改成块级标签-->
<span style="display: block;background-color: red">2</span>
<!--inline-block具有inline,默认自己有多少占多少-->
<!--具有block,可以设置高度,宽度,padding,margin-->
<span style="display: inline-block;background-color: blue">3</span>
<!--默认不显示-->
<div style="display: none">不显示</div>
</body>
边距
1.外边距margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 1px solid red;
height: 70px;
}
.c2{
background-color: green;
height: 50px;
/*margin-top: 25px;*/
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
注:margin-top:25px表示外边距,子边框与父边框top之间的距离为25px
2.内边距padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 1px solid red;
height: 70px;
}
.c2{
background-color: green;
height: 50px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
注:padding-top:25px表示内边距,子边框内自己与top之间的距离为25px
position
1.position:fixed
-->固定在页面的某个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 50px;
height: 50px;
background-color: black;
color: white;
position: fixed;
bottom: 20px;
right: 20px;
}
.c2{
height: 5000px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="c1">返回顶部</div>
<div class="c2"></div>
</body>
</html>
2.让头部标题栏固定不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
/*固定不动*/
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
.pg-body{
height: 5000px;
margin-top: 50px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
3.实现三层
z-index -->层级顺序
opticy -->透明度(0~1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
z-index: 10;
position: fixed;
/*让最外面一层的div居中*/
top: 50%;
left: 50%;
height: 400px;
width: 500px;
margin-left: -25px;
margin-top: -20px;
background-color: black;
}
.c2{
z-index: 9;
position: fixed;
background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
}
.c3{
height: 5000px;background-color: red;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
overflow
1.over:auto
-->超出范围则出现滚动条
<div style="height: 200px;width: 140px;overflow: auto;">
<img src="fanye.jpg" />
</div>
2.over:hidden
-->超出范围则隐藏
<div style="height: 200px;width: 140px;overflow: hidden;">
<img src="fanye.jpg" />
</div>
hover(伪类)
抽屉网顶部条栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.u{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px;
color: white;
}
/*鼠标移动到当前标签上面时,以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<a class="logo">logo</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
</div>
<div class="pg-body">
<div class="u">正文</div>
</div>
</body>
</html>
background-image
background-repeat有四个属性repeat(默认,重复占满),no-repeat(不重复),repeat-x(只横着重复放),repeat-y(只竖着重复放)
background-position-x表示看背景图片的窗口水平方向想右移动,background-position-y表示看背景图片的窗口垂直向下移动
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-image: url('fanye.jpg');
height: 700px;
width: 700px;
border:1px solid red;
background-repeat: no-repeat;
background-position-x:100px;
background-position-y:100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
上面的可css简写成
<div style="background:url('fanye.jpg') 100px 100px no-repeat;height: 700px;width:700px;border:1px solid red;"></div>
- 用Python研究了三千套房子,告诉你究竟是什么抬高了房价?
- 设计模式之装饰模式
- Android网络编程(六)OkHttp3用法全解析
- Android网络编程(五)OkHttp用法全解析
- Android网络编程(一)HTTP协议原理
- Spring Cloud实战小贴士:Zuul统一异常处理(二)
- Android View体系(九)自定义View
- Android网络编程(二)HttpClient与HttpURLConnection
- Spring Batch入门篇
- Android网络编程(三)Volley用法全解析
- Android网络编程(八)源码解析OkHttp中篇[复用连接池]
- Mybatis SqlSessionTemplate 源码解析
- MapperScannerConfigurer处理过程源码分析
- Spring Boot中使用Actuator的/info端点输出Git版本信息
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 专题一:预处理数据(使用sklearn-preprocessing)
- 「Docker」使用 Docker run 覆盖 ENTRYPOINT
- 尝试在 Mono 3.0 下运行 ASP.NET MVC 4
- CentOS7使用yum安装nginx报错:获取 GPG 密钥失败:[Errno 14] curl#60 - "Peer's Certificate has expired."
- iOS 应用使用位置信息
- Silverlight CreateObjectEx 参考
- NHibernate 配置使用 Formula
- Not allowed to navigate top frame to data URL问题
- MonoTouch绑定CocoaTouch类库
- NuGet 使用自定义本地类库目录
- Flutter/Dart中的异步编程之Isolate
- System.Net.Http for Silverlight
- 在SAP WebClient UI里混用ABAP Webdynpro,会带来哪些问题?
- 设计模式之中介者模式
- SAP WebClient UI创建Value help最详细的步骤