<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的三种引用方式</title>
<!--3.外部样式:引入link-->
<link rel="stylesheet" href="./css/css01.css">
<style>
/*2.内部样式*/
p{
color: green;
}
</style>
</head>
<body>
<!--1.行内样式(不推荐,一般用于样式比较少或测试)-->
<p style="color: red">我是段落标签1</p>
<p>我是段落标签2</p>
<p>我是段落标签3</p>
<!--新建一个css的样式表-->
<!--样式优先级:行内 > 内部=外部(就近原则:显示后执行的颜色,离它近的样式)-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器1</title>
<style>
/*1.标签选择器*/
/*直接以当前页面的标签名字为例,当做一个选择器来选择对应的标签让它来实现不同样式的效果*/
p{
color: green;
/*所有的段落标签内容都变为绿色*/
}
/*2.class选择器(类选择器):class属性*/
/* . class选择器;p1属性值*/
.p1{
color: aqua;
}
/*3.id选择器:当前页面唯一的*/
#sp1{
color: blueviolet;
}
#p2{
color: aquamarine;
}
</style>
</head>
<body>
<span id="sp1">我是文本标签</span>
<p>我是段落标签1</p>
<p class="p1" id="p2">我是段落标签2</p>
<p class="p1">我是段落标签3</p>
优先级:id选择器 > class选择器 > 标签选择器(作用范围越大,优先级越低)
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器2</title>
<style>
/*4.群组选择器*/
h2,.p1,#sp1{
color: cornflowerblue;
}
/*5.全选择器*/
*{
color: darkorange;
}
/*6.层次选择器*/
/*后代选择器:空格隔开*/
div p{
color: aquamarine;
}
/*子代选择器: >隔开*/
div>ul{
/*color: cadetblue;
颜色是会继承的,子代的颜色继承给了孙子……*/
list-style: none;/*去掉列表样式*/
}
/*兄弟选择器:从p2往下执行*/
.p2~p{
color: blue;
}
/*相邻选择器(相邻兄弟选择器)*/
.p2+p{
color: blueviolet;
}
</style>
</head>
<body>
<h2>我是二级标题标签</h2>
<span class="p3" id="sp1">我是文本标签</span>
<p>我是段落标签1</p>
<p class="p2" id="p2">我是段落标签2</p>
<p class="p1">我是段落标签3</p>
<div>
<p>我是段落1
<span>我是段落1中的span</span>
</p>
<p class="p2">我是段落2</p>
<p>我是段落3</p>
<ul>
<li>1111
<ul>
<li>111222</li>
</ul>
</li>
<li>2222</li>
</ul>
<p>我是段落4</p>
</div>
<p class="p2">我是段落标签3</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器3</title>
<style>
/*属性选择器name*/
p[name]{
color: blueviolet;
}
p[name='p2']{
color: aquamarine;
}
</style>
</head>
<body>
<p name="p1">我是段落标签</p>
<p name="p2">我是段落标签1</p>
<span name="p1">我是文本标签</span>
<span name="sp">我是文本标签</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器4</title>
<style>
/*伪类选择器:用来添加一些特殊的效果(超链接,(无序)列表)*/
/*未访问的状态下*/
a:link{
color: darkorange;
}
/*访问过后*/
a:visited{
color: aquamarine;
}
/*鼠标滑入连接:放在link和visited之后才有效*/
a:hover{
color: darkorchid;
}
/*激活状态下:点击未松开,放在hover之后有效*/
a:active{
color: bisque;
}
</style>
</head>
<body>
<a href="#">我是超链接</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的常用样式</title>
<style>
p {
/*!*字体类型*!
font-family: 宋体;
!*字体大小*!
font-size: 30px;
!*字体样式*!
font-style: italic;
!*字体粗细*!
font-weight: bold;
!*字体的小大写:针对英文*!
font-variant: small-caps;*/
/*综合样式*/
/*顺序:样式 小大写 粗细 大小 类型*/
fond: italic small-caps normal 50px 黑体
}
</style>
</head>
<body>
<!--所有字体和文本都会继承-->
<p>我是段落标签哈哈哈</p>
<p>hello</p>
<p>HELLO</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本常用样式</title>
<style>
p{
/*对齐方式*/
text-align: left;
/*首行缩进*/
text-indent: 2em;
/*文本线*/
/*text-decoration: line-through;*/
text-decoration: underline;
text-decoration-style: double; /*两条下划线*/
/*字距*/
letter-spacing: 20px;
/*词距:空格隔开的表示一个词*/
word-spacing: 100px;
/*行高*/
/*当高度等于行高的时候会起到垂直居中的效果,高度>行高*/
line-height: 100px;
height: 100px;
}
span{
text-align: center;
/*块状标签以当前标签的宽度为准,进行宽度上的居中,而
行内标签的宽度就是文本内容的宽度,所以自始至终都是居中状态*/
}
</style>
</head>
<body>
<p>我是段落,我有很多文字,我就是文本内容</p>
<span>我是文本</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景的常用样式</title>
<style>
div {
width: 1500px;
height: 1500px;
/* border: 1px solid red;
!*背景颜色*!
background-color: orange;
!*背景图片*!
background-image: url("../VIPC/images/one.png");
!*背景平铺*!
background-repeat: no-repeat;
!*背景大小:宽*高*!
!*background-size: 800px 400px;*!
background-size: 50%;
!*背景定位 top/buttom/left/right/center*!
!*background-position: left;*!
!*距离左边50%,距离上面20%*!
background-position: 50% 20%;*/
/*复合样式:背景颜色,图片,平铺,定位/大小*/
background: red url("../VIPC/images/one.png") repeat center/300px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>