超详细！！！CSS知识点：编辑网页文本+设置背景样式

CSS设置字体样式：

<span>标签：能让某几个文字或者某个词语凸显出来

就可以用span设置样式了

    <p>
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈<span id="nihao">哈哈哈哈</span>哈哈哈哈哈哈
    </p>

font-family：设置字体类型

<style>
        #s1{
            font-family: "隶书"; }
    </style>
下头是html的：

 <p id="s1">中国话，作为世界上使用人数最多的语言之一，拥有悠久的历史和丰富的文化底蕴。
它的优美之处体现在多个方面：</p>  

font-size：设置字体大小

单位：像素px，em，rem，cm，mm，pt

em：父元素字体大小*em

rem：根元素字体大小*rem

cm：厘米，打印那种官方产品会用到，不同浏览器上可能显示不一样

mm：毫米

pt：排字印刷术，不常用

<style>
        #s1{
            font-family: "隶书";
            font-size: 12px; }
    </style>

font-style：设置字体风格

normal：正常

italic：斜体

oblique：斜体

字体风格涉及字体的斜体、加粗或正常样式。使用CSS中的font-style和font-weight属性进行控制，可以设置文字为斜体或加粗，以强调某些文本或进行区分。

<style>
        #s1{
           
            font-style: italic;}
    </style>

font-weight：设置字体的粗细

normal：默认值，定义标准的字体

bold：粗体字体

bolder：更粗的字体

lighter：更细的字体

100、200、300、400、500、600、700、800、900

400等同于normal，700等同于bold

  <style>
        #s1{
       
            font-weight: lighter;
        }
    </style>

font：在font中可以声明所有字体属性

字体属性的顺序：字体风格->字体粗细->字体大小->字体类型

风格和粗细可以交换和省略

最少两个，分别是字体大小和字体类型，而且不能省略

字体黑色，意大利风格，36px大小，宋体类型

<style>
        #s1{
           
            font: italic bold  36px "宋体";
           font: 36px "宋体";
        }
    </style>

CSS设置文本属性：

color：设置文本颜色

RGB：

1.十六进制的方法表示颜色。

2.前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

<style>
        #s1{color:#743 }                           #十六进制表示
</style>

<style>
        #s1{ color: rgb(0, 255, 255); }            rgb表示
</style>

RGBA：

在RGB的基础上增加了alpha来控制透明度，其中这个透明度的通道值为0-1

<style>
        #s1{
           
           color:rgba(0, 0, 255, 0.5)
        }
    </style>

text-align：设置元素水平对齐方式

left，right，center

text-align: justify 使文本两端对齐

text-align: center; 使文本居中对齐

<style>
        #s1{
           text-align: center;
        }
    </style>

text-indent：设置首行文本的缩进

text-indent：20px

    <style>
        #s1{
           text-indent: 30px;
        }
        
    </style>

首行缩进两个字符

p {
  text-indent: 2ch;
}

line-height：设置文本行高

注意：当文字行高与容器高度一致时，会居中

<style>
        #s1{
           line-height: 25px;
        }
        
    </style>

text-decoration：设置文本的装饰

text-decoration:none 使文本保持原始样式，可以消除超链接的下划线

text-decoration:underline 在文本下方添加一条下划线。

text-decoration:overline 在文本上方添加一条上划线

text-decoration:line-through 在文本中间添加一条删除线。

<style>
        #s1{
           text-decoration: line-through;
        }
        
    </style>

vertical-align属性：垂直对齐方式

文字和图片的对齐方式

middle、top、bottom

中间 上边 下边

文本阴影：

text-shadow:color x-offset y-offset blur-radius

阴影颜色 x轴偏移 y轴偏移 阴影模糊半径
 

用CSS设置超链接：Hover

超链接伪类：

1.标签名:hover：选择鼠标悬停在链接上时的样式。

p:hover{
  color: rgb(16, 124, 124);
  text-decoration: underline;
}

鼠标没放上去

鼠标放上去后

列表样式：

定义一个无序列表，这里的实心圆是默认的，这些就是用来修改这个实心圆的

list-style-type属性：

none：消除标记符号

list-style-type: none;

disc：实心圆，默认的那个

circle：空心圆

square：实心正方形

deciaml:数字

list-style-image：自定义列表图形

li{
            list-style-image: url(./image/manor-7.jpg);
 }

网页背景：

background-color：背景颜色16进制表示

background-image：背景图像

例子background-image: url("");

li{
  background-image: url("image/manor-4.jpg");
}

*background-position：背景定位

1.background-position：水平方向，垂直方向

background-position: 10px 20px; /* 水平偏移 10px，垂直偏移 20px */

2.background-position：水平方向%，垂直方向%

background-position: 50% 50%; /* 水平和垂直居中 */

3.background-position：字母

X方向：left，center，right

Y方向：top，center，bottom

background-repeat： 背景重复方式

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即值显示一次

li{
  background-image: url("image/manor-4.jpg");
  background-repeat: no-repeat;
}

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

background：简写属性：

将位于当前目录下image文件夹中的book.jpg作为背景图像，并将其放置在距离左边200像素、距离顶部20像素的位置，并且不重复显示。

背景图像-->背景定位-->背景不重复出现

 background: url(./image/book.jpg) 200px 20px no-repeat;

no-repeat值

background-size的属性

auto：默认值，使用背景图片保持原样

百分比：可以设置宽和高百分之百，就可以展示全，但是可能会变形

li{
  background: url(./image/book.jpg);
  background-size:100% 100%;
  
}

cover：等比例放大，对形状有要求

li{
  background: url(./image/book.jpg);
  background-size:cover
  
}

contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

CSS渐变：

CSS3兼容渐变：

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

线性渐变：

linear-gradient(渐变方向，颜色一，颜色二)

body {
  background: linear-gradient(to right, #00c6ff, #0072ff);
}

在早期CSS3中实现渐变是需要加前缀，现在已经不需要了

方向（Direction）: 通过指定一个角度或关键词来确定渐变的方向。可以使用角度值（如 45deg）或关键词（如 to right、to left、to top、to bottom）。