CSS
css入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
<style type="text/css">
/*id选择器的引用*/
#text{
color: blue;
}
/*class选择器的引用*/
.cls-text{
color: cadetblue;
}
div{
color: blue;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!--
css: 样式表, 3种写法
1. 内联样式 <p style="color: red;">这是一个段落</p>
2. 内部样式 通过style标签，将样式表写在标签内部，通过选择器来和标签关联
3. 外部样式 将样式写在 *.css 文件中,通过link标签引入外部样式表
优先级 最高的是 内联样式
内部样式和外部样式优先级是一样的,按照书写顺序(代码都是顺序结构)
id 选择器： 唯一 可以在标签上面声明一个 id 属性, 在样式表中通过 # 来引用
class 选择器： 集合类 可以在标签上面声明一个 class 属性 , 在样式表中通过 . 来引用
元素(标签)选择器： 集合类的，在样式表中通过元素的名称来引用
三种写法分别在什么场景使用：
1. 内联样式：一般用于修改别人的样式、重写别人的样式
2. 内部样式： 某些样式表需要就近维护，需要绑定html标签 我们学习的时候使用这种方式
3. 外部样式： 通用样式、写好的样式表给别人引用的
-->
<p style="color: red;">这是一个段落</p>
<p id="text">这是一个段落</p>
<p class="cls-text">这是一个段落</p>
<p class="cls-text">这是一个段落</p>
<p class="cls-text">这是一个段落</p>
<p id="css-text">外部样式表</p>
<p class="css-cls-text">外部样式表</p>
<p class="css-cls-text">外部样式表</p>
<p class="css-cls-text">外部样式表</p>
<div>
这是一个盒子
</div>
<h1 class="web-font-color">这是一个H1大标题</h1>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backgrounds(背景)</title>
<!--
background-color 颜色
background-image 图片
background-repeat 是否重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 (不常用)
background-position 背景图片的位置
-->
<style>
#web-div{
/*width: 500px;*/
height: 1500px;
background-color: cadetblue;
background-image: url("./img/001.jpg");
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
/*background-position: left center;*/
/*background-position: center top;*/
background-position: 100px center;
/*background-attachment: scroll;*/
}
</style>
</head>
<body>
<div id="web-div">
</div>
</body>
</html>
文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<!--
color 设置文本颜色 ******
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高 ******
text-align 对齐元素中的文本 ******
text-decoration 向文本添加修饰 ******
text-indent 缩进元素中文本的首行 ******
text-shadow 设置文本阴影
text-transform 控制元素中的字母的大小写
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐 ******
white-space 设置元素中空白的处理方式 ******
word-spacing 设置字间距
-->
<style>
.web-text {
background-color: red;
font-size: 34px;
/*color: red;*/
/*color: #ff0000;*/
/*color: rgb(255, 0, 0);*/
/*direction: rtl;*/
/*letter-spacing: 20px;*/
/*行高一般和height一起使用,实现文本内容上下居中的效果*/
/*height: 100px;*/
line-height: 100px;
text-align: left; /*left right center*/
text-decoration: underline; /*设定文本下划线*/
text-indent: 30px;
/*水平方向、垂直方向、模糊度、阴影颜色*/
/*text-shadow: 10px -10px 10px blue;*/
text-transform: uppercase;
/*direction: rtl;*/
/*unicode-bidi: bidi-override;*/
white-space: normal; /*不换行 nowrap*/
word-spacing: 100px;
}
.web-img {
vertical-align: middle; /*top bottom*/
}
</style>
</head>
<body>
<p class="web-text">
white space:设置元素中空白的处理方式
<img class="web-img" src="./img/001.jpg" alt="">
white-space:设置元素中空白的处理方式
</p>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<!--
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列 (系统支持的字体、网络字体-要钱)
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。 100 - 900之间
-->
<style>
.web-font {
/*可以多个 从前往后遍历*/
font-family: "impact", "微软雅黑", "宋体";
font-size: 40px;
font-style: italic;
font-weight: 100;
background-color: red;
font: italic bold 50px/200px arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="web-font">字体word</h1>
</body>
</html>
链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接</title>
<style>
.web-link {
font-size: 25px;
font-weight: 600;
}
.web-link:link {
color: #a12020;
}
.web-link:hover {
color: red;
}
.web-link:active {
color: #0000ff;
}
.web-link:visited {
color: #08ff00;
}
</style>
</head>
<body>
<!--
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
-->
<a class="web-link" href="http://www.baidu.com">访问百度</a>
<h1 class="web-link">h1标题</h1>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style>
.web-li-item {
color: red;
font-size: 40px;
/*list-style-type: circle;*/
/*list-style-image: url("./img/001.jpg");*/
/*list-style-position: outside;*/
list-style: none;
}
</style>
</head>
<body>
<!--
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-type 设置列表项标志的类型。
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
-->
<ul>
<li class="web-li-item">java</li>
<li class="web-li-item">html</li>
<li class="web-li-item">oracle</li>
</ul>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.web-div {
height: 100px;
width: 1000px;
background-color: red;
/*padding-top: 10px;*/
/*padding-left: 10px;*/
/*padding-bottom: 10px;*/
/*padding-right: 10px;*/
/*上右下左*/
padding: 10px 20px 30px 40px;
/*border-bottom: 10px solid blue;*/
border: 10px double blueviolet;
/*上下边距会合并，左右不合并*/
/*margin: 10px; !*四边相等*!*/
/*margin: 10px 20px; !*上下一样左右一样*!*/
margin: 10px auto; /*左右自适应*/
/*outline: 15px solid brown; 设置元素周围的轮廓*/
}
input {
/*border: none;*/
border: 1px solid black;
border-radius: 5px;
}
input:focus {
/*background-color: red;*/
outline: none;
/*outline: 2px solid red;*/
/*-moz-outline-radius: 5px; !*火狐有效*!*/
/*outline-offset: 15px;*/
border: 1px solid red;
border-radius: 5px;
}
</style>
</head>
<body>
<!--
border: 边框
margin: 外边距
padding: 内边距
outline: 轮廓 (用的比较少)
-->
<div class="web-div">内容</div>
<div class="web-div"></div>
<div class="web-div"></div>
<input type="text">
</body>
</html>
分组和嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组和嵌套（选择器）</title>
<style>
/*分组选择器*/
b, .web-div, #web-text {
color: red;
}
/*嵌套*/
b.web-div {
color: blue;
}
</style>
</head>
<body>
<!--
分组 ： 同一个样式用于多个标签, 多个选择器之间使用逗号隔开
p,id,class{
}
嵌套：多种选择器嵌套使用
-->
<p id="web-text">这是一段文本</p>
<div class="web-div">这是一个div</div>
<div class="web-div">这是一个div</div>
<div class="web-div">这是一个div</div>
<b>这是一个B标签</b>
<b class="web-div">这又是一个B标签</b>
</body>
</html>
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
-
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
-
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; } </style> </head> <body> <p>这个段落是蓝色文本，居中对齐。</p> <div class="marked"> <p>这个段落不是蓝色文本。</p> </div> <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p> <p class="marked">带下划线的 p 段落。</p> </body> </html>
组合选择器
- 后代选择器(以空格分隔)
- 子元素选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以破折号分隔）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
</head>
<style>
/*组合选择器*/
#content .text{
color: red;
}
/*后代*/
#content .text b{
color: #1b94bf;
}
/*子选择器*/
#footer .text > b{
color: blue;
}
/*相邻兄弟 亲兄弟*/
#footer + p{
color:red;
}
/*后续兄弟 表兄弟 */
#content ~ p{
color: chocolate;
}
</style>
<body>
<div id="content">
<p class="text">
这是一段<b>文本</b>
</p>
</div>
<div id="footer">
<p class="text">
<span>
这是一段<b>文本</b>
</span>
</p>
</div>
<p>兄弟选择器</p>
</body>
</html>
尺寸
width 设置元素的宽度。
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 尺寸</title>
<style>
.content {
width: 80%;
height: 400px;
background-color: red;
margin: 0 auto;/*左右居中*/
max-width: 800px;
min-width: 600px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
Display 与 Visibility
block:将元素的属性设定为块级元素 可以设定宽高、首尾自动换行
inline:将元素的属性设定为行内元素 不能设定宽高、首尾不换行
inline-block:将元素设定为行内块级元素 可以设定宽高、首尾不换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Display(显示) 与 Visibility（可见性）非常重要</title>
<style>
/*重要*/
.box{
width: 100px;
height: 100px;
background-color:red;
margin: 10px auto;
}
.box1{
display: none;/*不显示，不占用页面空间*/
}
.box2{
visibility: hidden;/*隐藏 、占用页面的空间*/
}
/*重点看一下 display ： block inline inline-block*/
/*
block:将元素的属性设定为块级元素 可以设定宽高、首尾自动换行
inline:将元素的属性设定为行内元素 不能设定宽高、首尾不换行
inline-block:将元素设定为行内块级元素 可以设定宽高、首尾不换行
*/
/*以span为例*/
.box3{
width:100px;
height: 100px;
background-color: red;
margin: 5px;
/*display: inline;!*看起来没差别*!*/
/*display: block;*/
display: inline-block;
}
/*解决块之间的空隙*/
.box4-parent{
font-size: 0; /*去除容器的间隙,记得子元素会继承这个属性*/
border: 1px solid black;
}
.box4-parent .box4{
width: 100px;
height: 100px;
background-color: cadetblue;
display: inline;
font-size: 16px; /*继承了父级容器的字体，重新定义字体*/
border : inherit; /*inherit继承*/
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<p style="text-align: center">这是一段文本</p>
<span class="box3">1</span>
<span class="box3">1</span>
<span class="box3">1</span>
<hr>
<div class="box4-parent">
<div class="box4">我这里有内容</div>
<div class="box4">我这里有内容</div>
<div class="box4">我这里有内容</div>
</div>
</body>
</html>
Position 定位
static ： 缺省的、所有的元素默认都是 static 特征：不能移动
relative ： 相对定位
相对于原来的位置，进行指定的偏移, 他任然在标准的文档流当中，原来的位置会被保留，
可移动、占用空间
absolute ： 绝对定位
定位:基于xxx定位，上下左右-
1、没有父级元索定位的前提下，相对于浏览器定位
2、假设父级元素存在定位(relative )。我们通常会相对于父级元索进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原來的位置不会 被保留
可移动、不占用空间、浮在上方
fixed：固定定位 可以移动 //元素的位置相对于浏览器窗口是固定位置。
可移动、不占用空间、浮在上方、相对视窗不动
sticky ：粘性定位 （特殊的 ： relative+fixed）
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固 定在目标位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
static ： 缺省的、所有的元素默认都是 static 特征：不能移动
relative ： 相对定位,可以移动
fixed：固定定位 可以移动 //元素的位置相对于浏览器窗口是固定位置。
absolute ： 绝对定位
sticky ：粘性定位 （特殊的 ： relative+fixed）
-->
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background-color: darkturquoise;
margin: 5px;
}
/*特性1 移动*/
.box:nth-child(1){
background-color: black;
left: 100px; /*距左100px*/
/*position: absolute; !*可移动、不占用空间、浮在上方*!*/
/*position: static; !*不可移动*!*/
/*position: fixed; !*可移动、不占用空间、浮在上方、相对视窗不动*!*/
position: relative; /*可移动、占用空间*/
}
/*特性2 margin*/
.box:nth-child(2){
margin: 0 auto;
background-color: #266028;
/*生效*/
/*position: static;*/
/*position: relative;*/
/*不生效*/
/*position: absolute;*/
position : fixed;
}
/* relative 和 absolute 一起使用*/
.pox{
position: relative; /*设定当前容器为子容器基准点*/
}
.pox .pox-child{
width: 100px;
height: 100px;
background-color: crimson;
margin: 10px;
position: absolute;
left: 10px;
top:100px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<hr>
<div class="pox">
<div class="pox-child"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粘性定位</title>
<style>
.header {
width: 100%;
height: 200px;
background-color: black;
position: sticky;/*可以固定在目标区域*/
top: 0;
}
.body {
width: 1024px;
background-color: sandybrown;
margin: 0 auto;
height: 2000px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="body">
这是一段文本
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--absolute的另外一个用法
使页面平铺整个页面
-->
<style>
.body{
position: absolute;
top:0;
bottom:0;
right: 0;
left: 0;
background-color: fuchsia;
overflow: hidden; /*溢出隐藏*/
/*background-image: url("../img/dog1.jpg");*/
}
</style>
</head>
<body>
<div class="body"></div>
</body>
</html>
z-index
属性指定一个元素的堆叠顺序。//声明position: absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<!--z-index 属性指定一个元素的堆叠顺序。
-->
<style>
.box:nth-child(1) {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
margin: 5px 0 0 5px;
z-index: 9999;
}
.box:nth-child(2) {
width: 100px;
height: 100px;
background-color: rosybrown;
position: absolute;
margin: 20px 0 0 20px;
z-index: 9998;
}
.box:nth-child(3) {
width: 100px;
height: 100px;
background-color: teal;
position: absolute;
margin: 45px 0 0 45px;
z-index: -1;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
overflow
属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
<!--
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
-->
<style>
.box {
width: 500px;
height: 100px;
background-color: skyblue;
overflow-y: scroll;
/*overflow-x: scroll;*/
overflow-x: hidden ;
}
</style>
float
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float(浮动)</title>
<style>
/*只能左右浮动*/
.box {
width: 100px;
height: 100px;
background-color: red;
}
.box .box-p{
color: #F1F1F1;
float: right;
}
.box-img{
float: right;
}
.box:nth-child(2n+1) {
background-color: black;
}
.box:nth-child(1) {
width: 500px;
float: right;
}
.box:nth-child(2) {
float: left;
}
/*浮动的下一标签一定要清除浮动*/
.box:nth-child(3) {
clear: both; /*left right */
}
</style>
</head>
<body>
<div class="box">
<p class="box-p">这是一个浮动</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<img class="box-img" src="../img/dog1.jpg" alt="">
</body>
</html>
父级边框塌陷问题
解决方案：
1.增加父级元素的高度
#father{
border: 1px solid black;
height:500;
}
2.增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear:both;
margin: 0;
padding: 0;
}
3.overflow
在父级元素增加一个
overflow: hidden;
4.父类添加一个伪类：after
#father:after{
content: '';
display: block;
clear: both;
}
小结:
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元索假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一-些场景避免使用
4.父类添加一个伪类: after (推荐)
写法稍微复杂一点，但是没有副作用，推荐使用!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
border: 1px solid black;
/*方法1.*/
/*height:500;*/
/*方法3.*/
/*overflow: hidden;*/
}
/*方法4.*/
#father:after{
content: '';
display: block;
clear: both;
}
.box{
width: 100px;
height: 100px;
background-color: black;
float: right;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
.nav{
float: right;
}
.box2{
width: 100px;
height: 200px;
background-color: #02ff00;
float: left;
}
/*
clear:left 左侧不允许有浮动
clear:right 右侧不允许右浮动
clear:both 两侧不允许右浮动
clear:none
*/
/*方法2：*/
/* .clear{
clear:both;
margin: 0;
padding: 0;
}*/
</style>
</head>
<body>
<div id="father">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<p class="nav">的开放时间分类数据</p>
<div class="clear"></div>
</div>
</body>
</html>
水平 & 垂直对齐
元素居中对齐
要水平居中对齐一个元素(如
), 可以使用 margin: auto;。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.text{
/*padding: 20px 10px;*//*上下填充20，左右填充10*/
height: 50px;
line-height: 50px;
text-indent: 20px;/*缩进20px*/
}
/*text-align 内容居中*/
p{
text-align:center;
background-color: beige;
}
/*margin 容器居中*/
div{
width : 100px;
background-color: chocolate;
margin: auto;
text-align: center;
padding: 20px 0;
}
/*图片居中需要把图片放入块中*/
img{
width: 20%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<input class="text" type="text" value="内容" >
<p>这是一个p</p>
<div>11</div>
<img src="../img/dog1.jpg" alt="">
</body>
</html>
伪类和伪元素
visited 选择所有访问过的链接
focus 选择元素输入后具有焦点
hover 把鼠标放在链接上的状态
active 选择器用于选择活动链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*伪类是整个元素*/
/*伪元素 元素的内容*/
.text {
width: 200px;
}
/*选择每个<p> 元素的第一行*/
.text:first-line {
color: red;
}
.web-btn {
font-size: 1rem; /* 1rem = 16px */
font-style: normal;
/*border: 1px solid #666;*/
border-radius: 3px;
padding: 5px 10px;
user-select: none;/*控制用户能否选中文本*/
cursor: pointer;/*选中鼠标显示的样式*/
color: #666666;
}
/*visited 选择所有访问过的链接*/
/* focus 选择元素输入后具有焦点*/
input:focus{
background-color:red;
}
/*hover 把鼠标放在链接上的状态*/
.web-btn:hover{
background-color: black;
}
/*点击后的状态*/
/*active 选择器用于选择活动链接。*/
.web-btn:active {
opacity: 0.6;/*透明度*/
box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}
.web-btn-reg {
background-color: #bf2078;
}
.web-btn-del {
background-color: dodgerblue;
}
/*在元素前面插入内容*/
.web-btn-reg:before {
content: '\666';
margin-right: 5px;
}
</style>
</head>
<body>
<p class="text">
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
</p>
<i class="web-btn web-btn-reg">注册用户</i>
<i class="web-btn web-btn-del">删除用户</i>
<input type="text" value="内容">
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*u1的第一个子元素*/
ul li:first-child{
background: #02ff00;
}
/*u1的最后一子元素*/
ul li:last-child{
background: #ff4832;
}
/*选中p1 :定位到父元表，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效!， 顺序
如果前面有其他元素，需要减去前面元素的个数，才为当前元素的第几个
不推荐使用
*/
p:nth-child(4){
background: #270fff;
}
/*选中p元素的第一个元素*/
p:nth-of-type(1){
background: yellow;
}
</style>
</head>
<body>
<h1>h1</h1>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<!--
1.先写标签，并设定class
2.写样式、从外往里定位 先固定外部容器
3.从上往下、从左往右
-->
<style>
.nav-horizontal {
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.8);/*红、绿、蓝、透明度*/
}
.nav-horizontal .nav-wrapper{
width: 100%;
height: 100%;
color: #ffffff;
/*font-size: 18px;*/
}
.nav-horizontal .nav-wrapper .nav-left{
float:left;
height: 100%;
font-size: 0;/*去掉缝隙*/
}
.nav-horizontal .nav-wrapper .nav-left .item,
.nav-horizontal .nav-wrapper .nav-right .item{
display: inline-block;/*将元素设定为行内块级元素*/
height:60px;
line-height:60px;/*实现上下居中*/
padding : 0 20px ;/*上下填充为0，左右填充为20*/
user-select: none;/*不能选中文本*/
cursor: pointer;/*选中鼠标显示的光标类型，手*/
font-size: 18px;
}
/*hover 选择鼠标移到链接上的样式：*/
.nav-horizontal .nav-wrapper .nav-left .item:hover,
.nav-horizontal .nav-wrapper .nav-right .item:hover{
background-color: rgba(0,0,0,0.8);
}
.nav-horizontal .nav-wrapper .nav-left .item.active {
background-color: rgba(76, 176, 80, 1);
}
.nav-horizontal .nav-wrapper .nav-left .item.active:hover {
background-color: rgba(76,176,80,0.8);
}
.nav-horizontal .nav-wrapper .nav-right{
float :right;/*向右浮动*/
height: 100%;
}
/*垂直导航栏*/
ul {
margin: 0;/*边距为0*/
padding: 0;/*填充为0*/
list-style: none;/*设置列表项目样式为不使用项目符号,右边的点*/
}
a{
text-decoration: none;/*去掉下划线*/
color: inherit;/*继承父元素的颜色*/
}
.nav-vertical{
clear: both;
width: 100%;
background-color: #F1F1F1;
}
.nav-vertical .nav-wrapper .item {
height: 60px;
line-height: 60px;
}
.nav-vertical .nav-wrapper .item > a{
display: block;/*将元素将显示为块级元素，此元素前后会带有换行符。*/
padding-left: 20px;
}
.nav-vertical .nav-wrapper .item > a.active{
background-color: #4cAF50;
}
.nav-vertical .nav-wrapper .item > a:hover{
background-color: rgba(51, 51, 51, 0.6);
}
.nav-vertical .nav-wrapper .item > a.active:hover {
background-color: #266028;
}
</style>
</head>
<body>
<div class="nav-horizontal">
<div class = "nav-wrapper">
<div class="nav-left">
<div class="item active">主页</div> <!--class可以定义多个属性-->
<div class="item">新闻</div>
<div class="item">联系</div>
</div>
<div class="nav-right">
<div class="item">关于</div>
</div>
</div>
</div>
<hr>
<div class="nav-vertical">
<ul class="nav-wrapper">
<li class="item"><a class="active" href="#home">主页</a></li>
<li class="item"><a href="#news">新闻</a></li>
<li class="item"><a href="#contact">联系</a></li>
<li class="item"><a href="#about">关于</a></li>
</ul>
</div>
</body>
</html>
下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
/*去掉外边距，不掉填充，去掉列表左边样式*/
ul{
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-wrapper{
width: 200px;
height: 50px;
background-color: cornsilk;
}
.dropdown-wrapper .dropdown{
display: block;/*块级元素*/
width :100%;
height: 100%;
line-height: 50px;
text-align: center;/*居中*/
text-decoration:none ;/*去掉下下划线*/
color:#666666;
font-size: 20px;
font-weight: 700;
}
.dropdown-wrapper .dropdown-content{
display: none;/*不显示*/
}
.dropdown-wrapper:hover .dropdown-content{
display: block;/*块级元素 首尾自动换行*/
}
.dropdown-wrapper .dropdown-content .item {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(102, 102, 102, 0.2);
cursor: pointer;
user-select: none; /*文本不能选中*/
}
.dropdown-wrapper .dropdown-content .item:hover{
background-color: cadetblue;
opacity: 0.5;
/*background-color: rgba(102, 102, 102, 0.6);*/
}
</style>
</head>
<body>
<div class="dropdown-wrapper">
<a href="" class="dropdown">下拉菜单</a>
<ul class="dropdown-content">
<li class="item">菜单1</li>
<li class="item">菜单2</li>
<li class="item">菜单3</li>
<li class="item">菜单4</li>
</ul>
</div>
</body>
</html>
CSS3特性
边框
border-radius 创建圆角边框
box-shadow 添加阴影框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<!--
border-radius ： 圆角边框
box-shadow ： 盒子阴影 水平 垂直 模糊度 颜色值 内外设定
-->
<style>
.box{
width: 200px;
height: 100px;
background-color: #1994bf;
/*左上 右上 左下 右下*/
border-radius: 10px;
/*box-shadow: 10px 10px 10px 20px black inset;*/
box-shadow: 0 0 5px 10px red;
margin: 15px;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
/*border-radius: 100px;*/
border-radius: 50%;/*变成圆*/
}
.pox{
width: 300px;
margin: 0 auto;
}
.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
.polaroid .container {
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="pox">
<h2> 卡片</h2>
<p>box-shadow属性可以用来创建纸质样式卡片:</p>
<div class="polaroid">
<img src="../img/dog1.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>dog, Norway</p>
</div>
</div>
</div>
</body>
</html>
背景
https://www.runoob.com/css3/css3-gradients.html
-
background-image 背景图片
background-image: linear-gradient(#e66465, #9198e5); 颜色渐变
background-image: linear-gradient(to right, red , yellow); 从右向左
to bottom right 从左上角到右下角
-
background-size 背景图片尺寸
-
background-origin
-
background-clip
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- background-image ： 渐变效果 background-size： 背景图片的大小 --> <style> .box{ width: 800px; height: 500px; /*background-color: red;*/ margin: 0 auto; background-image: url("../img/dog1.jpg"); background-repeat: no-repeat; background-size: 800px 500px; } .pox { width: 800px; height: 200px; background-color: darkred; margin: 0 auto; /*渐变*/ /* https://www.grabient.com/ */ /*background-image: radial-gradient(red, yellow, green);*/ background-image: linear-gradient(to right, red, yellow); /*10% 所有占比 20% 每一段的占比*/ /*background-image: repeating-linear-gradient(to right, red 10%, blue 20%);*/ /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#993618), to(#0B0533), color-stop(0.5, #666425));*/ } </style> </head> <body> <div class="box"></div> <div class="pox"></div> </body> </html>
## 文本效果
text-overflow : 文本溢出属性指定应向用户如何显示溢出内容
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本效果</title>
<style>
.text{
width:200px;
border : 1px double black;
padding: 5px 0;
/*text-shadow: 5px 5px 5px red;*/
white-space: nowrap;/*不换行*/
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*文本溢出样式*/
}
</style>
</head>
<body>
<p class="text">
CSS3中包含几个新的文本特征。
在本章中您将了解以下文本属性：
</p>
</body>
</html>
字体
@font-face 字体图标
2D/3D转换/过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
height: 100px;
background-color: #1b94bf;
/*position: absolute;*/
transition-duration: 2s;/*渐变时长*/
/*把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：*/
transition-property: all;
}
.box:hover{
transform: translate(500px,0px);
width: 300px;
}
.pox {
width: 260px;
height: 360px;
overflow: hidden;
}
.pox img {
width: 260px;
transition: 3s all;/*渐变时长*/
}
.pox:hover > img {
/*scale(x,y) 对元素进行缩放 ,x表示对x轴放缩倍数，y表示对y轴放缩倍数*/
/*只有一个元素表示x，y放缩倍数一样*/
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="box"> Hello</div>
<div class="pox">
<img src="../img/dog1.jpg" alt="">
</div>
</body>
</html>
动画
@keyframes 规则
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<!--
1. 声明动画
2. 引用动画
-->
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
background-color: red;
/*动画属性 ，名称，一个周期所花时间，播放次数*/
animation: my 6s infinite;
animation-direction: alternate;/*下一周期逆向地播放*/
}
/*@keyframes 规则是创建动画。*/
@keyframes my {
/*将动画的时候设定 100% */
0% {
/*七点*/
left: 0;
top: 0;
}
20% {
/*从上一状态到现在的状态*/
left: 300px;
top: 0;
}
40% {
left: 300px;
top: 300px;
}
80% {
left: 0px;
top: 300px;
}
100% {
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
