css——层叠样式,用来美化页面

通常在<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

css中padding是什么意思-css教程-PHP中文网

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