中级css
1.Display属性
是否或如何显示元素的属性
可选值
- block 块级元素占一行
- inline 内联元素不从新行开始
- none 隐藏和显示元素
display :none
和visibility:hidden
的区别
- display:none完全隐藏标签不占用位置
- hidden:依然占用位置
2.max-width
设置最大占用宽度
3.position
可选值
- static 默认页面定位方式 不受 top、bottom、left 和 right 属性的影响
- relative 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
- fixed 相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
- absolute 相对于定位祖先元素进行定位 如果没有则对应于body
- sticky 粘性定位 首先先相对位置定位 然后在fixed
z-index 元素重叠
举例:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左上角添加一些文本:</p>
<div class="container">
<img src="/i/logo/w3logo-2.png" alt="W3School" width="800" height="450">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
3.overflow
- visible - 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden - 溢出被剪裁,其余内容将不可见
- scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
- auto - 与 scroll 类似,但仅在必要时添加滚动条
4.float 浮动
可实现文字环绕的功能
img {
float: right;
}
5.css布局 clear和clearfix
可选值
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
由于使用了浮动 当内部元素大于外部容器会出现溢出容器的情况
有两种解决方案
1.overflow:auto
.clearfix {
overflow: auto;
}
- clearfix hack
.clearfix::after {
content: "";
clear: both;
display: table;
}
6.实现并排浮动框
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
box-sizing 属性以确保图像容器不会由于额外的内边距(填充)而损坏
* {
box-sizing: border-box;
}
7.display: inline-block
和 inline 的区别是什么
inline不允许设置宽度和内外边距
导航栏举例
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
8.水平垂直居中
- 居中对齐元素
使用margin :auto
- 元素内文本居中
text-align: center;
- 居中对齐图像
display: block;
margin-left: auto;
margin-right: auto;
- 左右对齐
position: absolute;
right: 0px;
或者float
- 垂直居中
使用padding
padding: 70px 0;
使用line-height
height 属性值的 line-height 属性:
可以使用position 和transform 属性
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Flexbox
9.css组合器
选择有四种
- 后代选择器(空格)
- 子选择器(>)
- 相邻兄弟选择器(+)
- 通用兄弟选择器(~)
后代选择器:匹配属于元素后代的所有元素
div p {
background-color: yellow;
}
子选择器:匹配指定元素子元素的所有元素
div > p {
background-color: yellow;
}
后代选择器和子选择器的区别是 后代包括子和其他代
相邻兄弟选择器
div ~ p {
background-color: yellow;
}
10.css 伪类
伪类的语法
选择器:伪类{
属性:值
}
伪类实现类似工具箱的效果
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
匹配第一个元素
:frist-child
在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何
元素:
p:first-child {
color: blue;
}
匹配所有p元素的第一个i标签
p i:first-child {
color: blue;
}
所有 CSS 伪类
选择器 | 例子 | 例子描述 |
---|---|---|
:active | a:active | 选择活动的链接。 |
:checked | input:checked | 选择每个被选中的 元素。 |
:disabled | input:disabled | 选择每个被禁用的 元素。 |
:empty | p:empty | 选择没有子元素的每个 元素。 |
:enabled | input:enabled | 选择每个已启用的 元素。 |
:first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 |
:first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个 元素。 |
:focus | input:focus | 选择获得焦点的 元素。 |
:hover | a:hover | 选择鼠标悬停其上的链接。 |
:in-range | input:in-range | 选择具有指定范围内的值的 元素。 |
:invalid | input:invalid | 选择所有具有无效值的 元素。 |
:lang(language) | p:lang(it) | 选择每个 lang 属性值以 “it” 开头的 元素。 |
:last-child | p:last-child | 选择作为其父的最后一个子元素的每个 元素。 |
:last-of-type | p:last-of-type | 选择作为其父的最后一个 元素的每个 元素。 |
:link | a:link | 选择所有未被访问的链接。 |
:not(selector) | :not§ | 选择每个非 元素的元素。 |
:nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 元素,从最后一个子元素计数。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 元素的每个 元素,从最后一个子元素计数 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 元素的每个 元素。 |
:only-of-type | p:only-of-type | 选择作为其父的唯一 元素的每个 元素。 |
:only-child | p:only-child | 选择作为其父的唯一子元素的 元素。 |
:optional | input:optional | 选择不带 “required” 属性的 元素。 |
:out-of-range | input:out-of-range | 选择值在指定范围之外的 元素。 |
:read-only | input:read-only | 选择指定了 “readonly” 属性的 元素。 |
:read-write | input:read-write | 选择不带 “readonly” 属性的 元素。 |
:required | input:required | 选择指定了 “required” 属性的 元素。 |
:root | root | 选择元素的根元素。 |
:target | #news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 |
:valid | input:valid | 选择所有具有有效值的 元素。 |
:visited | a:visited | 选择所有已访问的链接。 |
11. CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 元素之后插入内容。 |
::before | p::before | 在每个 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 元素的首字母。 |
::first-line | p::first-line | 选择每个 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
12.不透明度
opacity 越小越透明
13.导航栏
垂直导航栏
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
水平导航栏
实现原理
float 使li浮起来
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
display: inline 使li 不换行
导航栏下拉框实现
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
14.悬停预览
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<img src="/i/photo/coffee.jpg" alt="Coffee" width="100">
<div class="dropdown-content">
<img src="/i/photo/coffee.jpg" alt="Coffee" width="300" height="200">
<div class="desc">Coffee</div>
</div>
</div>
</div>
</div>
</body>
</html>
15.属性选择器
- CSS [attribute] 选择器查找 带有某属性的标签
a[target] {
background-color: yellow;
}
- CSS [attribute=“value”] 选择器 属性为什么的标签
a[target="_blank"] {
background-color: yellow;
}
- CSS [attribute~=“value”] 选择器 包含选择器
[title~="flower"] {
border: 5px solid yellow;
}
- [attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。值必须是完整的单词
[class|="top"] {
background: yellow;
}
- [attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。值不必完整
[class^="top"] {
background: yellow;
}
- [attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。值不必完整
[class$="test"] {
background: yellow;
}
- [attribute*=“value”] 选择器选取属性值包含指定词的元素。不必完整
[class*="te"] {
background: yellow;
}
16.表单样式
17.css 计数器
- counter-reset 创建或重置计数器
- counter-increment 递增计数器值
- content 插入内容
- counter() 或者counters() 将计数器的值添加到元素
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
18.网站布局
19.css优先级
- 行内样式
- id选择
- 类、属性、伪类
- 元素伪元素
若等级相同则最后的生效
高级:css
1.圆角
border-radius
border-radius: 15px 50px 30px 5px;
2.边框图案
border-image
三个属性
- 用作边框的图像
- 在哪里裁切图像
- 定义中间部分应重复还是拉伸 重复round 拉伸 stretch
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
3.多重背景
#example1 {
background-image: url(flower.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
background-image 设置背景图片
background-position 设置位置
background-repeat
是否重复
background-size: contain 和 cover; contain是压缩适应,cover 压缩裁剪适应
4.css 渐变
线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
方向默认从上向下
可选:to right ,bottom ,left,top
可调节透明性
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
径向渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
5.阴影效果
box-shadow 边框阴影
卡片效果
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
6.文本效果
文字溢出
p.test2 {
white-space: nowrap; //不换行
width: 200px; //
border: 1px solid #000000;
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; // 省略号
}
书写模式
水平
writing-mode: horizontal-tb;
垂直
writing-mode: vertical-rl;
7.css 2D旋转
transforms
直线移动 translate(水平,垂直)
div {
transform: translate(50px, 100px);
}
旋转 rorate() 正为顺时针,负为逆时针
div {
transform: rotate(20deg);
}
scale 放大缩小 (宽度的倍数,高度的倍数)
div {
transform: scale(2, 3);
}
scaleX() 宽度 放大缩小为原来的倍数scaleY()高度
div {
transform: scaleX(2;
}
scaleX(xdeg) x轴旋转一定的角度 y轴旋转一定的角度
组合方法 matrix()
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
8.css 3D旋转
css 3D旋转
rorateX rorateY rorateZ
9.过度
div {
transition: width 2s, height 4s;
}
延迟过度 transition-delay: 1s;
过度加转移 transform:xs;
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>请把鼠标悬停在下面的 div 元素上:</p>
<div></div>
<p><b>注释:</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>
10.css 动画
- @keyframes 动画声明
//声明动画
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
//绑定动画
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
-
animation-duration 动画时间
-
animation-delay: 2s;
动画延迟时间 -
animation-iteration-count: 3/infinite;
执行次数infinite 无限 -
animation-direction:
动画方向- normal - 动画正常播放(向前)。默认值
- reverse - 动画以反方向播放(向后)
- alternate - 动画先向前播放,然后向后
- alternate-reverse - 动画先向后播放,然后向前
-
animation-fill-mode
填充样式- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。
- backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
- both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
11.tooltip
<div class="tooltip">Top
<span class="tooltiptext tooltip-top">Tooltip text</span>
</div>
<style>
.tooltip{
position:relative:
display:inline-block;
border-bottom: 1px dotted #ccc;
color: #006080;
}
.tooltip-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
</style>
12.鼠标悬停叠加
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>滑入(从右)</h1>
<div class="container">
<img src="/i/css/avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
13.面包屑和分页
14.分列
div {
column-count: 3;
}
分列间的间隙
.newspaper {
column-count: 3;
column-gap: 40px;
}
列间样式
div {
column-rule-style: solid;
}
15.变量
:root {
--blue: #1e90ff;
--white: #ffffff;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
//局部变量可替换全局变量
.container {
--blue: #0000ff;
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
JavaScript 修改变量
// 获取根元素
var r = document.querySelector(':root');
//设置变量的函数值
r.style.setProperty('--blue', 'lightblue');
变量 结合@media
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
16.box-sizing 属性
设置box-sizing:border-box; 则宽和高包括 内边距和边框
17.Flexbox
水平排列
.flex-container {
display: flex;
}
垂直排列
.flex-container {
display: flex;
flex-direction: column;
}
水平排列 居中对齐
.flex-container {
display: flex;
justify-content: center;
}
完全居中
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
18.媒体查询:
值 | 描述 |
---|---|
all | 用于所有媒体类型设备。 |
用于打印机。 | |
screen | 用于计算机屏幕、平板电脑、智能手机等等。 |
speech | 用于大声“读出”页面的屏幕阅读器。 |
媒体查询简单使用
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
19.可适应页面设计
1.视口
用户可见区域
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
部分将页面的宽度设置为跟随设备的屏幕宽度(视设备而定)
initial-scale=1.0
初始缩放级别
2.网格视窗
一般可以将视窗分为12列
构建网格视窗 首先要设置 边框 边距包括在宽和高中。
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
3.媒体查询
/* 针对手机: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* 针对平板电脑: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* 针对桌面: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
4.网格视图使用
设计模板
.grid-container {
display: grid;//设置为网格容器
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;//间隙
background-color: #2196F3;
padding: 10px;
}
使用模板
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
声明为网格容器
display
: grid;设置为网格容器
display
: inline-grid;内部容器自动成为网格项目
设置间隙
grid-column-gap: 50px;
列间隙
grid-row-gap
:行间隙
grid-gap: 50px 100px;
简写
可使用行线设置网格项目
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
可以使用grid-column 或者grid-row 进行item 位置设置
使 “item1” 从第 1 列开始并在第 5 列之前结束:
.item1 {
grid-column: 1 / 5;
}
使 “item1” 从第 1 列开始,并跨越 3 列:
.item1 {
grid-column: 1 / span 3;
}
使 “item8” 从 row-line 1 和 column-line 2 开始,在 row-line 5 和 column line 6 结束:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
### 4.网格视图使用
**设计模板**
```css
.grid-container {
display: grid;//设置为网格容器
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;//间隙
background-color: #2196F3;
padding: 10px;
}
使用模板
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
声明为网格容器
display
: grid;设置为网格容器
display
: inline-grid;内部容器自动成为网格项目
设置间隙
grid-column-gap: 50px;
列间隙
grid-row-gap
:行间隙
grid-gap: 50px 100px;
简写
可使用行线设置网格项目
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
可以使用grid-column 或者grid-row 进行item 位置设置
使 “item1” 从第 1 列开始并在第 5 列之前结束:
.item1 {
grid-column: 1 / 5;
}
使 “item1” 从第 1 列开始,并跨越 3 列:
.item1 {
grid-column: 1 / span 3;
}
使 “item8” 从 row-line 1 和 column-line 2 开始,在 row-line 5 和 column line 6 结束:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}