CSS知识总结
CSS的作用
CSS(层叠样式表)用于设置和布置网页——例如,更改内容的字体、颜色、大小和间距,将其拆分为多个列,或添加动画和其他装饰功能。
简单来说就是使网页更加美观。
如何将HTML和CSS进行关联
- 内部关联 via
<style>
- 外部关联 via
<link rel="stylesheet" href="styles.css">
- 内联关联 via 元素的 style 属性
元素+id选择器
通过一个元素的id选择某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素选择器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="hello"></div>
<div id="world"></div>
</body>
</html>
/* 选择所有的 body 元素,但 body 元素只有一个 */
body {
background-color: blue;
}
div {
width: 400px;
height: 200px;
}
/* 所有 id 是 hello 的元素,听我号令 */
#hello {
background-color: yellow;
}
/* 所有 id 是 world 的元素,听我号令 */
#world {
background-color: green;
}
类选择器
通过指定的类别,选择某批元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="large red square"></div>
<div class="small red circle"></div>
<div class="medium yellow square"></div>
<div class="large blue circle"></div>
<div class="large blue square"></div>
</body>
</html>
.large {
width: 300px;
height: 300px;
}
.medium {
width: 200px;
height: 200px;
}
.small {
width:100px;
height:200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.square {
}
.circle {
border-radius:30%;
}
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
/* 所有的元素都遵守该号令,一般设置一些页面的基础样式,例如字体大小、颜色、模型布局 */
* {
font-size: 60px; /* 字体大小 */
color: blue; /* 字体颜色 */
font-weight: normal; /* 取消字体加粗和斜体 */
}
</style>
</head>
<body>
<h1>你好</h1>
<p>世界</p>
</body>
</html>
组合选择器
把元素选择和类选择器进行了组合。
1.所有class中有hello的div元素,听我号令。
div.hello{}
2.所有class中既有hello,又有world的div元素,听我号令。
div.hello.world{}
3.所有id是hello的div元素,听我号令。
div#hello{}
一次选择多种元素
所有的p标签和所有id是hello的标签和所有的class中有world的标签,听我号令。
p,#hello,.world{} //
子孙选择器
1.所有body 元素的子孙(包含孩子以及孩子的孩子…)中的所有p元素
body p {}
2.先找到id 为 hello 的元素,然后在其所有子孙中,满足class 中有world 的div 元素,听我号令.
#hello div.world{}
直系孩子选择器
body 元素的孩子 (只有孩子)中的所有 p元素
body > p {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子孙后代选择器</title>
<style>
<!-- ol > ul {-->
<!-- list-style: none; /* 更改列表的默认样式 */-->
<!-- }-->
ol > li {
color: pink;
}
</style>
</head>
<body>
<ol>
<li>你好</li>
<li>中国</li>
<li>世界</li>
<li>
<ul>
<li>亚洲</li>
<li>非洲</li>
</ul>
</li>
</ol>
<ul>
<li>再见</li>
<li>地球</li>
<li>太阳系</li>
</ul>
</body>
</html>
伪类选择器
关于 a 标签
a标签的几种状态
初识状态 :link
鼠标悬停在a标签上 :hover
鼠标按下不松开 :active
鼠标访问过 :visited
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于 a 标签</title>
<style>
a:link {
font-size: 10px;
}
a:visited {
color: yellow;
}
a:hover {
font-size: 20px;
}
a:active {
font-size: 20px;
}
</style>
</head>
<body>
<a target="_blank" href="https://www.baidu.com/">A</a>
<br>
<a href="#">B</a>
<br>
<a href="#">C</a>
<br>
<a href="#">D</a>
</body>
</html>
关于焦点
某个元素获得焦点时 (1.鼠标点击该元素;2.通过tab 切换焦点),该选择器生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于焦点</title>
<style>
input {
height: 100px;
}
input:focus{
height: 300px;
}
</style>
</head>
<body>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
</body>
</html>
常用元素属性
关于字体
body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei'; }
大小
p {
font-size: 20px; }
粗细
p {
font-weight: bold;
font-weight: 700; }
文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
文本属性
文本颜色
color: rgb(红、蓝、绿)
color: rgb(255, 0, 0); 纯红色 #FF0000
color: rgb(0, 255, 0); 纯绿色 #00FF00
color: rgb(0, 0, 255); 纯蓝色 #0000FF 省略#00F
color: rgb(0, 0, 0); 纯黑色 #000000 省略#000
color: rgb(255, 255, 255); 纯白色 #FFFFFF 省略#FFF
文本对齐
<style>
.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
</style>
<div class="text-align">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>
文本装饰
underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]
<style>
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
</style>
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>
文本缩进
控制段落的 首行 缩进 (其他行不影响)
<style>
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
</style>
<div class="text-indent">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于字体</title>
<style>
body {
font: 53px '幼圆';
}
h1 {
text-align: center;
text-decoration: underline dashed #C52749 .1em;
}
a {
text-decoration: none;
}
p {
text-indent: 2em;
/* -webkit- 开头的,代表兼容性不是最好的,很多浏览器不支持 */
-webkit-text-stroke: 1px red;
}
</style>
</head>
<body>
<h1>CSS 学习</h1>
<p>我爱我的祖国,她是那么的壮丽辽阔
东海霞光四射,屋脊星光闪烁
江南盎然春色,塞北银装素裹
我爱我的祖国,繁荣昌盛
锦绣大地,江南如此多娇
万丈高楼平地起,五星红旗神采飞扬
锦绣中华风流还看今朝,蛟龙入海神舟飞上天
我爱我的祖国,我爱我的祖国
她是那么的欣欣向荣,四大发明创造五千年的奇迹
富饶的土地孕育五十六个民族,中国制造传遍世界各地
中华儿女那么勤劳勇敢,江南如此多娇
中华民族五千年文化智璀璨,锦绣中华风流还看今朝</p>
<p>Hello, I'm a chinese.</p>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
行高练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
div {
width: 100%;
height: 500px;
font-size: 100px;
background-color: #31a5e7;
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
<div>你好中国</div>
</body>
</html>
关于背景图片
<style>
body {
background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
background-repeat: no-repeat;
background-size: cover;
}
</style>
关于box
生成圆形
让 border-radius 的值为正方形宽度的一半即可
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%; }
生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px; }
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于 box</title>
<style>
div {
width: 400px;
height: 200px;
background-color: #3927e5;
}
div {
border-radius: 14px 120px 30px;
}
div {
border-top: 30px double #000;
border-bottom: 30px solid #000;
border-left: 30px dotted #000;
border-right: 30px dashed #000;
}
div {
box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, .7);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
元素的显示模式
块级元素
h1 - h6
p
div
ul
ol
li
行内元素/内联元素
a
strong
b
em
i
del
s
ins
u
span
盒模型
边框 border
内容 content
内边距 padding 设置内容和边框之间的距离.
外边距 margin 控制盒子和盒子之间的距离.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>初识盒模型</title>
<style>
div {
width: 0;
height: 0;
background-color: blue;
margin: 30px;
border: 40px solid black;
padding: 50px;
}
</style>
</head>
<body>
<div id="d1">Hello World Yes No</div>
<div id="d2"></div>
</body>
</html>
弹性布局
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
justify-content: 设置主轴上的子元素排列方式.
align-items:设置侧轴上的元素排列方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style>
div {
width: 100%;
height: 500px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
span {
background-color: yellow;
width: 120px;
margin: 30px;
height: 40px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>