CSS样式
1、css的使用
（1）外链式
创建一个stylesheet文件存储css代码，再在head部分使用link标签连接外部的css文件
<link rel="stylesheet" href="style.css">
（2）嵌入式
在style标签当中编写css，style标签可以放在head中，也可放在body中，放在不同的位置会有所不同，因页面内容的加载是从上到下，style标签放在前面就先加载，放在后面就后加载。
</head>
<body>
<p class="head" >尊敬的先生/女生：</p>
<style>
.p{
color:red;
height:50px;
width:200px;
}
</style>
</body>
（3）行内式
在标签内部使用style属性指出样式
<p style="color: red">尊敬的先生/女生：</p>
2、css的选择器
（1）行间选择器
<p style="color: red">尊敬的先生/女生：</p>
（2）id选择器
<style>
#head{
color:red;
}
</style>
<p id="head" >尊敬的先生/女士：</p>
（3）class选择器
<style>
.head{
color:red;
}
</style>
<p class="head" >尊敬的先生/女士：</p>
（4）标签选择器
p{
color:red;
}
（5）优先级
行间>id>class>标签
3、关系选择器
（1）同伴关系
用逗号分割，各个选择器都选择
p,span{
color:red;
}
/* 同时选择p和span标签 */
（2）后代关系
指定的后代都选择
p span{
color:red;
}
/* 选择p中的所有span标签 */
（3）子关系
p>span{
color:red;
}
/* 选择作为p标签的子标签中所有span标签 */
4、伪类选择器
.link:link{
color:blue;
}
.link:visited{
color:blue;
}
.link:hover{
color:blue;
}
.link:active{
color:blue;
}
:target{
color:#bababa;
}
<a class="link" href="#h2">返回顶部</a>
/*
link：链接没有被访问的样式
visited：链接被访问过后的样式
hover：鼠标经过的样式
active：鼠标选择（点击）的样式
target：点击链接跳转到指定锚点，跳转到的锚点的样式
*/
5、文字的样式
<p style="font-size:30px">style</p>
<p style="font-weight:normal">style</p>
<p style="font-weight:500">style</p>
<p style="font-family: JetBrains Mono">style</p>
<p style="font-style: italic">style</p>
<p style="text-indent:30px">style</p>
<p style="text-align:center">style</p>
<p style="line-height:40px">style</p>
<p style="text-decoration:underline">style</p>
/*
style：样式
font-size：字体大小，单位一般是用px
font-weight：字体的粗细
normal：正常
bold：粗
相对粗细法：相对于上一级
bolder：更粗
lighter：更细
自定义粗细：100-900，只能是整百的数值
font-family：字体
font-style：字体倾斜
text-indent：首行缩进
text-align：水平位置
left
right
center
line-height：行高，不管高度多上，文字都垂直居中
text-decoration：
underline：定义文本下的一条线。类似下划线
overline：定义文本上的一条线。
line-through：定义穿过文本下的一条线。类似删除线
*/
6、背景
<style>
#div1{
background-image: url("01.png");
background-position: center;
}
</style>
/*
background-color：背景颜色
background-image：背景图片
background-position：背景图片定位
left
center
right
top
bottom
background-repeat：背景重复
no-repeat
repeat-x：水平向右重复
repeat-y
background-size：背景图片的大小
width
height
*/
7、边框
border-bottom: 1px red solid;
border: 1px red solid;
border-radius: 20px
/* --给html标签外部添加边框样式
方向：
left
right
top
bottom：下边框，和下划线类似
直接写border代表四个方向
线条类型：
solid：实线
dotted：点状线
dashed：虚线
px：线条粗细，以像素点为单位
圆角：
border-radius：边框角的弧度
*/
8、大小
通用的大小是宽和高：weight、height
9、边距
padding:40px 60px; /*上下和左右方向的内边距*/
padding:40px 60px 70px; /*上、右、下方向的内边距*/
padding:40px 60px 70px 90px; /*上右下左方向的内边距*/
margin:40px 60px; /*上下和左右方向的外边距*/
/*内边距
当前标签距离内部内容的距离。padding
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
外边距
当前标签距离其他标签的距离。margin
margin-left
margin-right
margin-top
margin-bottom
margin:40px 60px; /*上下和左右方向的外边距*/
*/
10、标签类型
（1）块级元素
常用标签： div、p、ul、li、h1-h6、dl、dt、dd。
特征：
1、支持CSS全部的样式
2、如果不设置宽度，默认宽度占满全屏
3、一个元素单独占据一行
（3）行内元素
常用标签： a、span、em、b、strong
特征：
1、不支持CSS的部分样式
2、宽和高由内容决定
3、多个元素在一行
4、代码换行的时候，盒子有间距
（3）行内块元素
需要用display来设置
特征：
1、支持CSS全部的样式
2、如果不设置宽度，默认宽度占满全屏
3、多个元素在一行
4、代码换行的时候，盒子有间距
（4）设置标签类型，可以让标签转换为块、行内、行内块元素
display: block;
/*参数：
none： 隐藏并且不占用显示控件
block：将非块元素转换为块元素
inline：将非行内元素转换为行内元素
inline-block：将非行内块元素转换为行内块元素
*/
11、位置
（1）浮动
将指定标签浮动到指定的位置上，浮动之后，不再和之前的元素保持同一层。
特点
1、浮动是将元素进行位置的移动
2、浮动会导致元素脱离当前层
3、浮动后没有子元素撑开，布局容易出现问题
浮动是为了左右布局标签，浮动之后，布局容易出现问题
解决方法
1、设置父元素的高度
2、清除浮动
.clean{
clear: both;
}
<div><div>
<div class="clean"><div> # 清除浮动，此标签位置前浮动后的标签布局不再受后面标签布局的影响
（2）定位
position：absolute;
/*
参数:
absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位。
relative：相对定位，相对于其正常位置进行定位。
fixed：固定定位，参照物是浏览器窗口
static：静态定位，始终会处于页面给予的位置
*/
12、元素溢出
.text{
overflow: hidden;
text-overflow: ellipsis; /*超出部分省略号代替*/
white-space: nowrap;
}
/*
子元素超出父元素导致的问题，可以通过给父元素设置overflow来处理这件事情
参数：
visible：采用超出部分不处理的方式
hidden：采用超出部分隐藏
scroll：超出部分父元素添加垂直和水平滚动条
auto：采用超出去方向父元素添加滚动条
*/
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
