css
CSS3 Study
总览
- 什么是CSS
- 怎么使用CSS
- CSS 选择器
- 美化网页(文字, 阴影, 背景, 超链接, 列表, 渐变效果…)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效)
什么是CSS
什么是CSS
cascading Style Sheet 层叠级联样式表, 用于美化网页, 比如高度, 宽度, 文字, 阴影, 背景, 超链接, 列表, 渐变效果…
CSS发展史
CSS1.0 只能做一些简单的样式调整,比如字体加粗等.
CSS2.0 DIV + CSS, HTML 与 CSS结构分离, 代码变得简洁, 利于SEO
CSS2.1 浮动, 定位
CSS3.0 圆角, 阴影, 动画…
快速入门(怎么使用)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>标题h1>
body>
html>
h1{
color: aqua;
}
CSS 的优势:
- 内容和表现分离
- 网页结构表现统一, 可以实现复用
- 样式丰富
- 利于SEO, 搜索引擎优化
CSS的导入方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: black;
}
/*外部样式写法2*/
@import url("css/style.css");
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1 style="color: blanchedalmond">标题h1>
body>
html>
样式优先级: 就近原则.
外部样式的两种写法区别:
- link标签引入: CSS3 推荐使用的方法
<link rel="stylesheet" href="css/style.css">
- @import 导入: CSS2.1, 预览一些复杂的页面时, 会先渲染出一个页面的骨架, 然后再渲染样式. 不推荐使用.
@import url("css/style.css");
CSS 选择器
基本选择器:标签选择器, 类选择器, id选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*标签选择器,格式: 标签名{}, 会选择到页面上所有这个标签的元素*/
h2{
color: black;
}
/*类选择器, 格式: .类名{}, 可以多个标签归类, 是同一个class, 可复用*/
.h21{
color: aquamarine;
}
/*id 选择器, 格式: #id{}, 全局唯一*/
#h22{
color: beige;
}
/*优先级: id选择器> 类选择器> 标签选择器*/
style>
head>
<body>
<h2 class="h21">选择器h2>
<h2 id="h22">选择器h2>
<p class="h21">选择器p>
body>
html>
层次选择器:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*后代选择器,选择元素内部的所有标签的元素*/
body p{
background: aqua;
}
span h1{
background: aqua;
}
/*子选择器, 选择所有父级是 元素的 元素*/
body>p{
background: blanchedalmond;
}
/*相邻兄弟选择器,选择所有紧接着元素之后的元素, p3*/
span+p{
background: coral;
}
/*通用选择器,选择p元素之后的每一个ul元素*/
p~ul{
background: #c8ff97;
}
style>
head>
<body>
<p>p1p>
<p>p2p>
<span>
<h1>111h1>
<h1>121h1>
<h1>122h1>
span>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
结构伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*ul的第一个元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个元素*/
ul li:last-child{
background: blue;
}
/*选择每个p元素是其父级的第二个子元素*/
p:nth-child(2){
background: aquamarine;
}
/*选择每个p元素是其父级的第二个p元素*/
p:nth-of-type(2){
background: aqua;
}
style>
head>
<body>
<p>p1p>
<p>p2p>
<span>
<h1>111h1>
<h1>121h1>
<h1>122h1>
span>
<p>p3p>
<ul>
<li>
<p>p4p>
<p>p4p>
li>
<li>
<p>p5p>
<p>p5p>
li>
<li>
<p>p6p>
<p>p6p>
li>
ul>
body>
html>
属性选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.demo a{
display: block;
background: red;
border-radius: 5px;
text-align: center;
width: 50px;
height: 50px;
text-decoration: none;
float: left;
margin-right: 10px;
font: bold 20px/50px Arial;
}
/*选中有id属性的a标签*/
a[id]{
background: aqua;
}
/*选中有id属性为first的a标签*/
a[id=first]{
background: blue;
}
/*选中有class属性包含links的a标签*/
a[class*=links]{
background: beige;
}
/*选中有href属性以https开头的a标签*/
a[href^=https]{
background: coral;
}
/*选中有href属性以pdf结尾的a标签*/
a[href$=pdf]{
background: #ff58ee;
}
style>
head>
<body>
<div class="demo">
<a href="https://www.baidu.com" class="first items" id="first">1a>
<a href="https://www.baidu.com" class="first items">2a>
<a href="https://www.baidu.com" class="first items">3a>
<a href="https://www.baidu.com" class="first items">4a>
<a href="http://www.baidu.com" class="first items">5a>
<a href="http://www.baidu.com" class="first items">6a>
<a href="http://www.baidu.com" class="first items">7a>
<a href="http://www.baidu.com" class="first items">8a>
<a href="http://www.baidu.com" class="first items links">9a>
<a href="http://www.baidu.pdf" class="first items links">10a>
div>
body>
html>
更多参考:CSS 选择器
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 | 1 |
| #id | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有 元素 |
1 |
| element,element | div,p | 选择所有
元素和
元素 |
1 |
| element element | div p | 选择
元素内的所有
元素 |
1 |
| element>element | div>p | 选择所有父级是
元素的
元素 |
2 |
| element+element | div+p | 选择所有紧接着
元素之后的
元素 |
2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择 lang 属性以 en 为开头的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个 元素的第一个字母 |
1 |
| :first-line | p:first-line | 选择每一个 元素的第一行 |
1 |
| :first-child | p:first-child | 指定只有当 元素是其父级的第一个子级的样式。 |
2 |
| :before | p:before | 在每个 元素之前插入内容 |
2 |
| :after | p:after | 在每个 元素之后插入内容 |
2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有 元素 |
2 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| [attribute^=value] | a[src^=“https”] | 选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [attribute*=value] | a[src*=“runoob”] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not§ | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 “readonly”（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 “required” 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
美化网页
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
-
最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
-
元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
<html>
<head>
<meta charset="utf-8">
<title>titletitle>
<style>
.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
style>
head>
<body>
<img src="250x250px.gif" width="250" height="250" />
<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。div>
body>
html>
浮动
display
float
父级边框塌陷问题
- 增加父级边框的高度
- 增加一个空的div标签, 清除浮动
- 设置overflow属性
overflow: scroll;
- 父类增加一个伪类
.demo:after{
content: '';
display: block;
clear: both;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.demo{
border: solid 1px red;
/*1.设置高度*/
/*height: 1200px;*/
/*2.overflow属性*/
/*overflow: scroll;*/
}
/*4.父类增加一个伪类(推荐用法)*/
.demo:after{
content: '';
display: block;
clear: both;
}
.img1{
border: coral dashed 1px;
display: inline-block;
float: left;
}
.img2{
border: coral dashed 1px;
display: inline-block;
float: left;
}
.img3{
border: coral dashed 1px;
display: inline-block;
float: left;
}
.img4{
border: coral dashed 1px;
display: inline-block;
float: left;
line-height: 20px;
font-size: 20px;
}
/*3.新增一个空的div标签,清除浮动*/
/*.img5{*/
/* clear: both;*/
/*}*/
style>
head>
<body>
<div class="demo">
<div class="img1">
<img src="images/one.jpg" alt=" ">
div>
<div class="img2">
<img src="images/two.jpg" alt="">
div>
<div class="img3">
<img src="images/three.jpg" alt="">
div>
<div class="img4">
lalalallalalaaaaaaaaaaaaaaaaaaaaaaa
div>
div>
body>
html>
定位
相对定位
position: relative;
相对于原来的位置,进行指定像素的偏移, 任然在标准文档流中,原来的位置会被保留.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位title>
<style>
div{
margin: 0px auto;
padding: 0px;
line-height: 10px;
}
.position{
border: solid 1px coral;
width: 300px;
height: 300px;
}
a{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: aqua;
display: block;
text-decoration: none;
}
a:hover{
background: #4b9fff;
}
.a1{
position: relative;
top: 0px;
left: 0px;
}
.a2{
position: relative;
top: -100px;
right: -200px;
}
.a3{
position: relative;
top: -100px;
left: 100px;
}
.a4{
position: relative;
bottom: 100px;
left: 0px;
}
.a5{
position: relative;
bottom: 200px;
right: -200px;
}
style>
head>
<body>
<div class="position">
<div class="a1">
<a href="https://www.baidu.com">a1a>
div>
<div class="a2">
<a href="https://www.baidu.com">a2a>
div>
<div class="a3">
<a href="https://www.baidu.com">a3a>
div>
<div class="a4">
<a href="https://www.baidu.com">a4a>
div>
<div class="a5">
<a href="https://www.baidu.com">a5a>
div>
div>
body>
html>
绝对定位
position: absolute;
相对于原来的位置,进行指定像素的偏移, 不在标准文档流中,原来的位置不会被保留.
没有父级元素定位的前提下,相对于浏览器定位.
假设父级元素存在定位, 相对于父级元素进行偏移. 在父级元素范围内移动.
固定定位
position: fixed;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
height: 1200px;
}
/*绝对定位*/
div:nth-of-type(1){
width: 100px;
height: 100px;
background: aqua;
position: absolute;
bottom: 0px;
right: 0px;
}
/*固定定位*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background: coral;
position: fixed;
bottom: 0px;
right: 0px;
}
style>
head>
<body>
<div>div1div>
<div>div2div>
body>
html>
z-index
用于设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。仅能在定位元素上奏效例如：（position: absolute）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-indextitle>
<style>
.index{
margin: 0px;
padding: 0px;
width: 450px;
font-size: 12px;
line-height: 25px;
border: coral 1px solid;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
.index,ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 450px;
height: 25px;
top: 262px;
}
.tipText{
color: aliceblue;
z-index: 999;
}
.tipBg{
background: #000000;
opacity: 0.2;
}
style>
head>
<body>
<div class="index">
<ul>
<li><img src="images/two.jpg" alt="">li>
<li class="tipText">imgagesli>
<li class="tipBg">li>
<li>time:2020-06-28li>
<li>lalalali>
ul>
div>
body>
html>