CSS-小结1
Posted zhixuChen333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS-小结1相关的知识，希望对你有一定的参考价值。
CSS
三大引入方式
1.内部导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1
color: red;
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
行内导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color:red;">我是标题</h1>
</body>
</html>
优先级： 行内导入>内部导入>外部导入 （就近原则）
选择器
基本选择器
- 标签选择器
- 类选择器
- id选择器
优先级 id选择器>class选择器>便签选择器
层次选择器
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:first-child
background-color: aquamarine;
ul li:last-child
background-color: red;
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
属性选择器(常用)
可以使用正则表达式，很方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 存在id属性的a */
/* a[id]
background-color: yellow;
*/
/* a[id=fourth]
background-color: green;
*/
/* 可以使用正则表达式 */
a[class^=link]
background-color: yellow;
</style>
</head>
<body>
<p>
<a href="http://wwww.baidu.com" class="link aa" id="first">1</a>
<a href="" id="second">2</a>
<a href="">3</a>
<a href="" id="fourth" class="link">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
</p>
</body>
</html>
美化网页元素
字体样式
/* 字体的主要样式
font: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 颜色
*/
p
font: 宋体;
font-size: 20px;
font-weight: bolder;
color: greenyellow;
盒子模型
- margin 外边距
- padding 内边距
- border 边框
浮动
display
- block 块级元素
- inline 行内元素
- inline-block 是块元素，但是可以内联，在一行！
- none
float 浮动
overflow
定位
相对定位 relative
相对于原来的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box
width: 300px;
height: 300px;
border: 2px solid red;
padding: 10px;
a
height: 100px;
width: 100px;
text-decoration: none;
background-color: blue;
color: white;
display: block;
text-align: center;
line-height: 100px;
#a2,
#a4
position: relative;
left: 200px;
top: -100px;
#a5
position: relative;
left: 100px;
top: -300px;
</style>
</head>
<body>
<div id="box">
<a id="a1">链接1</a>
<a id="a2">链接2</a>
<a id="a3">链接3</a>
<a id="a4">链接4</a>
<a id="a5">链接5</a>
</div>
</body>
</html>
绝对定位 absolute
固定定位 fixed
z-indenx CSS层级
以上是关于CSS-小结1的主要内容，如果未能解决你的问题，请参考以下文章