CSS(级联样式表)
什么是CSS
控制HTML文档控制外观\定义布局
级联:关联 将两个内容联系起来 比如省市县
样式表:css修饰网页的语法集
优点:将页面内容与表现形式(css)分离达到重复使用
CSS能做什么
HTML写入内容
CSS定义页面的布局
CSS的基本语法
行内样式表
<!--
行内样式表
在标签内直接定义样式,只对在本标签内的内容进行修饰
-->
<h1 style="color: aqua;
font-size: 80px;
font-family: "agency fb";">行内样式表</h1>
内嵌样式表
<!--
内嵌样式表
在head中用
<style type="text/css">
通过连接器p{属性:属性值;}
</style>
-->
<h2 >内嵌样式表</h2>
外部样式表
<!--
外部样式表
在项目中新建CSS文件
将修饰内容放在CSS文件中
通过<link href="CSS文件" rel="stylesheet" />联系起来
-->
<p>外部样式表</p>
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
color: #0000FF;
}
.p1 {
color: #FF0000;
}
.p2 {
color: aqua;
}
.p3,.p4 {
color: brown;
}
#title{
color: darkgray;
}
*{
color: darkorange;
}
</style>
</head>
<body>
<!--
标签选择器
选中网页中指定的标签
<p>第一行</p>
<p>第二行</p>
-->
<!--
类选择器
对标签进行分组
<p class="p1">第三行</p>
<p class="p2">第四行</p>
<p class="p3">第五行</p>
<p class="p4">第六行</p>
-->
<!--
id选择器
<p id="title">标题</p>
<p class="p1">第三行</p>
<p class="p2">第四行</p>
<p class="p3">第五行</p>
<p class="p4">第六行</p>
-->
<!--
通配选择器,优先级最低
*{}选择所有标签
<h3>第一种</h3>
<tr>第二种</tr>
-->
</body>
</html>
选择器2
选择器优先级:通配选择器<标签选择器<类选择器<id选择器
行级样式表优先级高于所有选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p1下的i标签 */
.p1 b{
color: red;
}
/* p1的子b标签 */
.p1>i{
color: bisque;
}
/* p1的相邻p标签 */
.p1+p{
color: blue;
}
/* 兄弟标签 */
.p3~b{
color: blueviolet;
}
</style>
</head>
<body >
<p class="p1">
<b>子标签</b>
<b>
<i>子标签</i>
</b>
<i>i标签</i>
</p>
<p>相邻标签</p>
<p class="p2">
<b class="p3">子标签</b>
<b>
<i>子标签</i>
</b>
</p>
</body>
</html>
文本样式
<style type="text/css" >
.p1{
width: max-content;
height: max-content;
/* color: #ff0022;字体颜色 */
/* background-color: #00FFFF;背景颜色 */
/* font-size: 3rem;字体大小 */
/* font-family: "新宋体";字体样式 */
/* text-align: center; */
/* text-decoration: line-through;删除线 */
/* text-align:文本对齐 */
/* text-decoratiom:none;正常文本 */
/* font-style:italic;斜体文本 */
/* font-weight:字体粗细 */
/* letter-spacing:字符间距 */
/* text-indent首行缩进 */
}
</style>
背景样式
<style type="text/css">
.u1{
width: 50rem;
height:40rem;
background-color: #87CEEB;/*背景颜色*/
background-image: url(./img/.png);/*背景图片*/
background-repeat: no-repeat;/*背景重复*/
list-style: none url(img/未标题-1.png) inside;
text-align:center;
}
<body >
<ul class="u1">
<li>列消息</li>
<li>列消息</li>
<li>列消息</li>
<li>列消息</li>
<li>列消息</li>
</ul>
</body>
</style>
伪类
<style type="text/css">
/*
:link 表示没访问的链接,只对超链接使用
:visited 表示访问过的链接,之对超链接使用
:hover 表示鼠标移入的状态(还可以设置字体)
:active 被点击的状态
:focus 焦点,输入类组件
*/
a:link{
color: #87CEEB;
}
a:visited{
color: #FF0000;
}
a:hover{
color: aqua;
font-size: 20px;
}
a:active{
color: chartreuse;
font-size: 5px;
}
a:focus{
color: darkorange;
background-color: deeppink;
}
</style>
透明
透明:opacity 从0.0到1.0
块级.行级.行级块级标签
块级:无论内容多少,都独立占一行
默认宽:与父级标签一致
默认高:0或者内容的高度
通过width和height设置宽高
<p><h1><ul><ol><hr><li>表格表单
行级:只占自身大小,不会占一行,不能设置宽高
<a><b><i>
行级块:可以设置宽高,不占一行
<img/><input/>
注意p标签不可以包含任何的块标签
display:inline;变成行级标签
display:block;变成块级标签
display:inline-block;变成行级块标签
div标签:纯净的块级标签(没有任何附加的标签)
span标签:纯净的行级标签(没有任何附加的标签)