目录
CSS书写位置
行内式
<body>
<!-- 行内式,写在标签内部,通过style属性,里面的属性和属性值通过冒号连接,多个样式属性之间用分号 -->
<!-- 注意用冒号连接,用分号结束一个属性 -->
<p style="color: purple;font-size: 60px;">我是段落2(行内式)</p>
</body>
内嵌式
<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标签,开辟了一个书写css代码的区域 -->
<!-- 书写规范:通过标签,然后书写{},把要设置的样式都书写在这个括号里面,属性和属性值之间用冒号隔开,用分号结束 -->
<style>
p{
color:pink;
font-size: 50px;
}
</style>
</head>
<body>
<p>我是段落3(内嵌式)</p>
</body>
外链式
<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>
<!-- 外链式:通过link标签 href属性 找到css文件 -->
<link rel="stylesheet" href="./css/01.css">
</head>
<body>
<p>我是段落4(外链式)</p>
</body>
基础选择器
标签选择器
类选择器
id选择器
通配符选择器
<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>
/* 标签选择器,会选择到页面中所有p标签 */
p{
color: blueviolet;
font-size:30px;
}
/* 类选择器,通过给标签起名字:class=“名字” 通过.+名字 找到标签 */
.one{
color:aquamarine;
}
.two{
color: brown;
}
.three{
color:coral;
}
.big{
font-size: 30px;
}
/* id选择器:#+id名 找到标签 */
#a{
color: aquamarine;
}
#b{
color: blueviolet;
}
#c{
color: brown;
}
/* 通配符选择器 选择到页面中的所有标签 包括body标签,一般用于页面初始化 */
*{
font-size: 30px;
}
</style>
</head>
<body>
<p>我是第一个(标签选择器)</p>
<p>我是第二个(标签选择器)</p>
<p>我是第三个(标签选择器)</p>
<!-- 类选择器:注意是用class给标签起名 -->
<!-- 起名规范: 不建议用下划线,可以用-(短横线)连接
不能以数字开头
起有意义的名字
不能包含特殊字符(除了$,-)-->
<div class="one">我是第一个(类选择器)</div>
<!-- 多类名选择器:一个标签拥有多个类名,类名之间用空格隔开 -->
<div class="two big">我是第二个(多类选择器)</div>
<div class="three">我是第三个(类选择器)</div>
<!-- id选择器,id名不能重复 -->
<div id="a">我是第一个(id选择器)</div>
<div id="b">我是第二个(id选择器)</div>
<div id="c">我是第三个(id选择器)</div>
<span>我是span标签</span>
</body>
一个小练习
<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>
/* 多个标签一种颜色,.标签名用逗号隔开 */
/* .blue,.darkgrey{
color: aqua;
} */
/* 多个标签的样式相同则给标签起相同的类名 */
.blue{
color:blue;
}
.red{
color:red;
}
.yellow{
color: yellow;
}
.green{
color:greenyellow;
}
.darkgrey{
color:darkgray;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red" >o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
<span class="darkgrey">b</span>
<span class="darkgrey">o</span>
<span class="darkgrey">t</span>
</body>
字体样式
<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>
p{
/* 字体大小 font-size 单位px 像素 */
font-size: 30px;
/* 字体粗细 font-weight normal 正常 lighter 细 bold 粗 */
/* 100细 400正常 700加粗 以数字表示字体粗细的时候 取值范围是100-900 */
font-weight: 300;
/* 字体 font-family 尽量不用中文 */
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
/* 字体风格 font-style 通常不写斜体,用于把斜体的文字变正常(normal) */
font-style: italic;
}
em{
font-style: normal;
}
div{
/* 综合设置样式 */
/* font:font-style font-weight font-size/line-height font-family; */
/* 不可缺少的两个属性:font-size 和font-family 书写顺序固定 */
font:italic bold 50px "Franklin Gothic Medium";
}
</style>
</head>
<body>
<p>我是一段文字</p>
<em>我本来是倾斜的</em>
<div>综合设置样式</div>
</body>
字符之间的距离
<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>
p{
/* letter-spacing:字符和字符之间的距离 */
letter-spacing:10px;
/* word-spacing:单词和单词之间的距离,中文无效 */
word-spacing: 40px;
}
</style>
</head>
<body>
<p>我是多啦不能没有梦</p>
<p>I like pizza.</p>
</body>
行间距
<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>
p,
h2{
background-color: aqua;
/* line-height: 行高; */
line-height: 60px;
}
</style>
</head>
<body>
<p>我是文字</p>
<h2>我是标题</h2>
</body>
文字阴影
<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>
body{
background-color: #333;
}
div{
font:700 50px "Microsoft YaHei";
/* 水平阴影位置, 竖直阴影距离, 模糊的距离(负值阴影会消失),阴影颜色 */
text-shadow: 1px 1px 1px red;
}
p{
font:700 50px "Microsoft YaHei";
text-shadow: -1px -1px 1px white,1px 1px 1px black;
color: #333;
}
</style>
</head>
<body>
<div>我是一个有影子的文字</div>
<p>
我是凸起的文字
</p>
</body>