理解CSS样式：从内联到外部样式-CSDN博客

本文链接：https://blog.csdn.net/linuxvfast/article/details/117439440

这篇博客详细介绍了CSS样式的三种形式：内联样式、嵌入式样式和外部样式，并讲解了选择器的定义，如ID选择器和类选择器。此外，还涵盖了常见的CSS属性，包括颜色、字体、背景、文本和列表的样式设置，帮助读者深入理解CSS在HTML中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源：Python爬虫开发与项目实战，没有链接记录下

html中css的样式：

1、内联样式：

<body style="background-color: green;margin: 0;padding: 0;"></body>

2、嵌入式样式：

<head>
    <meta charset="UTF-8">
    <title>Python</title>
    <style type="text/css"></style>
</head>

3、外部样式：

<head>
    <meta charset="UTF-8">
    <title>Python</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

html标记定义：p{属性：属性值；属性1：属性值1}，p叫做选择器

ID选择器定义：#word{text-align:center;color:red;}

class选择器定义：.center{text-align:center;}或者p.center{text-align:center;}

css常见属性：

1、颜色：color:green

或者color:#ff6600

或者color:#f60a

或者rgb(255,255,255)红（R），绿（G），蓝（B）的取值范围为0-255，

或者color:rgba(255，255，255，1)RGBA表示Red（红色）、Green（绿色）、Blue（蓝色）和Alpha（色彩空间）透明度

2、字体：font-size：字体大小，如font-size:14px

font-family：定义字体，font-family：微软雅黑

font-weight:定义字体加粗，

使用名称：normal（默认值）、bold（粗）、bolder（更粗）、lighter（更细）

使用数字：100、200、300~900，400=normal,700=bold

3、背景：background-color定义背景颜色

background-image：定义背景图片，如background-image:url（图片路径）， background-image:none（不用图片）

background-repeat:定义背景重复方式，值为repeat，表示整体重复平铺；值为repeat-x，表示只在水平方向平铺；值为repeat-y表示只在垂直方向平铺；值为no-repeat表示不重复

background-position:定义背景位置，横向使用left、center、right；纵向使用top、center、bottom

简化使用：

background: #f60 url(images/bg jpg) no-repeat top center

4、文本：text-align：设置文本对齐方式

line-height:设置文本行高

text-indent：代表首行缩进

letter-spacing：设置字符间距，normal（默认值），inherit从父元素继承

5、列表：list-style-type：指明列表项类型，常用属性值：none（没有标记）、disc（默认，标记是实心圆）、circle（空心圆）、square（实心方块）、decimal（数字）、decimal-leading-zero（0开头的数字标记）、lower-roman（小写罗马数字i、ii、iii、iv、v等）、upper-roman（大写罗马数字I、II、III、IV、V等）、lower-alpha（小写英文字母a、b、c、d、e等）、upper-alpha（大写英文字母A、B、C、D、E等）如：ul.a{list-style-type:circle;}是将class选择器值为a的url标记设置为空心圆标记。

6、list-style-position：指明列表项目中标记的位置。

值为inside时，列表项标记放置在文本以内，且环绕文本根据标记对齐；

值为outside时（默认值），保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。

值为inherit时，规定应该从父元素继承list-style-position属性的值。

7、list-style-image：设置图像列表标记。属性值可以为URL（图像的路径）、none（默认无图形被显示）、inherit（从父元素继承list-style-image属性的值），如ul{list-style-image:url('image.gif);}意思是给ul标记前面的标记设置为image.gif图片

嵌入式样式html例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Python</title>
    <style>
        h1 {
            background-color: #6495ed; /*--背景颜色--*/
            color: red; /*字体颜色*/
            text-align: center; /*文本居中*/
            font-size: 40px; /*字体大小*/
        }

        p {
            background-color: #e0ffff;
            text-indent: 50px; /*首行缩进*/
            font-family: "Times New Roman", Times, Serif; /*设置字体*/
        }

        p.ex {
            color: rgb(0, 0, 255)
        }

        div {
            background-color: #b0c4de;
        }

        ul.a {
            list-style-type: square;
        }

        ol.b {
            list-style-type: upper-roman
        }

        ul.c {
            list-style-image: url("http://www.cnblogs.com/images/logo_samll.gif");
        }
    </style>
</head>
<body>
<h1>CSS background-color 演示</h1>
<div>
    该文本插入在div元素中。
    <p>该段落有自己的背景颜色。</p>
    <p class="ex">这是一个类为“ex”的段落。这个文本是蓝色的。</p>
    我们任然在同一个div中。
</div>
<p>无序列表实例:</p>
<ul class="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="b">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>
<p>图片列表示例</p>
<ul class="c">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
</body>
</html>

css学习记录