通常在<head>中编写<style type="text/css">
在该标签中采取以下语法格式:
选择器{
属性名1:属性值1；
属性名2:属性值2；
……
}代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1{
color: red;
}
p{
font-size:130px
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
<p>我是一个段落<p>
</body>
</html>1常见属性
（1）color——颜色
（2）font-size——字体大小
font-size:130px（3）font-weight——字体粗细 100-900
（4）position：absolute;——绝对定位
（5）positon:relative;——相对定位
（6）上下边距和左右边距
left和top表示距左边和顶部的偏移量，right和bottom表示右边和底部的偏移量
（7）width——布局
（8）height——高度
示例1： height: 100%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#bodyright{
float: left;
position: absolute;
right: :0px;
left: 200px;
height: 100%;
background-color: gainsboro;
}
</style>
</head>
<body>
<div id="body">
<div id="bodyleft"></div>
<div id="bodyright"></div>
</div>
</body>
</html>指的是高度填充满
示例2：height：30px
（9）backgroundcolor——背景色
(10）margin——边距
示例1：margin:auto
在 CSS 中是一个常用的技巧，用于在块级元素（block-level elements）上实现水平居中。然而，这个技巧有几个限制条件：
元素必须有一个确定的宽度：如果元素的宽度是 auto（即根据内容自动调整宽度），则 margin: auto; 不会使其居中，因为它没有一个固定的宽度来确定左右外边距应该是多少。
左右外边距必须设置为 auto：margin: auto; 实际上是 margin: auto auto auto auto; 的简写，分别对应上、右、下、左的外边距。但为了实现水平居中，通常只需要将左右外边距设置为 auto。
元素必须有一个父元素，且父元素有确定的宽度：元素需要有一个包含块（通常是父元素）来确定其可用的水平空间。如果父元素的宽度是 auto 或者没有设置（例如，它是 body 元素且没有设置 width），那么子元素也无法实现水平居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background-color:hotpink;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
</head>
<body>
<div id="d1"><p id="p1">1</p></div>
</body>
</html>示例2：
margin: 0px;
边距为0
（11）float——浮动效果，不换行
float：left就是贴着左边，
#d2{
width: 100px;
height: 100px;
background-color:greenyellow;
float:left}
#d3{
width: 100px;
height: 100px;
background-color:blue;
float:left
}这两个容器会向左贴在一行
（12）border——边框样式
border-collapse:collapse;-------合并内外边框
注意：多个标题逗号分隔，*选择所有选择器
示例：
h1,h2,h3{
color: red;
}*{
color: red;
}所有选择器都为红色，但如果具体定义那么按照具体定义的颜色
div——这是一个容器，里面可以存放任意元素节点用于页面的布局
上下边距和左右边距
（13）cursor——当鼠标移动到该标签时，鼠标的形状变化
cursor（鼠标手型）属性_cursor属性-CSDN博客
(14)panding
2、id选择器
#id值——用来选择某个元素节点
#p2{
color:green;
}
<p id="p2">我是一个段落</p>https://so.csdn.net/so/search?spm=1001.2014.3001.4498&q=id%E9%80%89%E6%8B%A9%E5%99%A8&t=&u=
①派生选择器
先选中某个元素，然后接一个空格，后面再写某个元素名，表名在某个元素下的子节点中选中对应的元素名
3、类选择器
.class名——类选择器，class名可以重复，我们可以同时选中一类元素
类选择器同样支持派生选择器的写法
元素名.类名---元素基于类而被选择，相当于取交集
一个标签可以有多个class名,以空格分隔
[属性名]——属性选择器
[属性名=“属性值”]--------指定属性值的属性选择器
hover——当鼠标移动到指定元素上时触发的选择器
background-image——背景图片
background-repeat——是否重复显示
background-position——背景图片的位置
line-height——行间距
border-radius——圆角边框
声明：
转载内容：
1、
margin: auto; 在 CSS 中是一个常用的技巧，用于在块级元素（block-level elements）上实现水平居中。然而，这个技巧有几个限制条件：
元素必须有一个确定的宽度：如果元素的宽度是 auto（即根据内容自动调整宽度），则 margin: auto; 不会使其居中，因为它没有一个固定的宽度来确定左右外边距应该是多少。
左右外边距必须设置为 auto：margin: auto; 实际上是 margin: auto auto auto auto; 的简写，分别对应上、右、下、左的外边距。但为了实现水平居中，通常只需要将左右外边距设置为 auto。
元素必须有一个父元素，且父元素有确定的宽度：元素需要有一个包含块（通常是父元素）来确定其可用的水平空间。如果父元素的宽度是 auto 或者没有设置（例如，它是 body 元素且没有设置 width），那么子元素也无法实现水平居中。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/2302_79483741/article/details/139623099
3663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
