CSS样式表详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22082055/article/details/78487764

本文详细介绍了CSS层叠样式表的概念及其应用，包括内联式、外嵌式和行内样式的使用方法，以及标签选择器、类选择器、ID选择器等多种选择器的使用技巧。

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

概念: CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
（简单理解为：男生眼中－－游戏装备，女生眼中－－化妆品）
位置：

<head>
    /*内联式*/
   <style type=”text/css”>
    样式代码
   </style>
   /*外嵌式（建议）*/
   <link rel=”stylesheet” href=”1.css”>
</head>
/*行内样式*/
<h1 style="color: red">行内样式表</h1>

选择器：即选择某个标签（嗯，接下来给你加装备或者给你化妆啦～～）

常见属性：(标签可去w3c,菜鸟教程等网站上查询)

    Width: 20px ;   --宽
    Height: 20px ;  --高
    Background-color: red ; --背景颜色
    font-size: 24px ;   文字大小
    text-align: left | center | right      --内容的水平对齐方式
    text-indent: 2em;   --首行缩进
    Color: red ;    --文字颜色

基础选择器：
标签选择器：标签{属性：值;} (页面所有该标签样式都改变)

<style type="text/css">
        div{
            font-size: 10px;
            color:red;
        }
    </style>

tips：#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。

类选择器：.自定义类名{属性:值; 属性:值；} （类名自定义，但不要low）

    <style type="text/css">
        .content{
            font-size: 10px;
        }
        .fox{
            color:red;
        }
    </style>
</head>
<body>
<!--一个标签可同时使用多个类选择器-->
<div class="fox content">
    一如昨日烛火 <br>
    伴扁舟相随 
</div>

ID选择器：#自定义名称{属性:值;}

 <style type="text/css">
        .content{
            font-size: 20px;
        }
       #fox{
            color:green;
        }
    </style>
</head>
<body>
<!--一个标签可同时使用类选择器和ID选择器，但ID选择器一个标签只能使用一个,而且同一个ID选择器在同一个页面只能调用一次-->
<div id="fox" class="content">
    一如昨日烛火 <br>
    伴扁舟相随
</div>

通配符选择器 *{属性:值;} 给所有标签统一样式（一般人不会这么用）

*{
    color:red;
}

复合选择器使用（多个选择器连接）

交集选择器（同时满足两者的标签）
标签＋类／ID 选择器｛属性：值｝

        div.box{
            color:red;
        }
        div#fox{
            color: yellow;
        }
<div class="box">
    孤独是诗人具有的体会
</div>
<div id="fox">
    写首小调名字叫一库！
</div>

后代选择器：选择器+空格+选择器{属性：值;}
要求：
1）后代选择器首选要满足包含（嵌套）关系。
2）父集元素在前边，子集元素在后边。

    <style type="text/css">
        div span{

            font-size:20px;
        }
        .box .fox{
            color:red;
        }
        .box span{
           background-color: green;
        }
    </style>
</head>
<body>

<div class="box">
   <span class="fox">
       小酒窝
   </span>
</div>

子代选择器：选择器>选择器{属性:值;}（只能选择对应父级的直接子代）

    <style type="text/css">
        div>span{
            font-size:20px;
            color:red;
        }
        p>span{
            font-size: 30px;
            color:green;
        }
    </style>
</head>
<body>
<div>
   <span>小酒窝</span>
    <p><span>长睫毛</span></p>
</div>

并集选择器：选择器+，+选择器+，选择器{属性:值;}（都使用同一个样式）

<style type="text/css">
        div,p,span{
            font-size: 30px;
            color:red;
        }
</style>
</head>
<body>
<div>a</div>
<p>b</p>
<span>c</span>

选择器的优先级：
默认样式<标签选择器<类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style  type="text/css">
        /*链接默认显示*/
        a:link{
            color:darkgoldenrod;
        }
        /*链接鼠标悬浮显示*/
        a:hover{
            color:green;
        }
        /*链接在激活（触发）显示*/
        a :active{
            color:red;
        }
        /*链接访问之后显示*/
        a:visited{
            color:black;
        }
        /*获取光标的焦点*/
        a:focus{
            color:yellow!;
        }
    </style>
</head>
<body>
    <a href="#">这是一条链接</a>
</body>
</html>

链接的文本修饰：

text-decoration:none | 无下划线
text-decoration:underline | 有下划线
text-decoration:line-through | 穿越线,删除线（中间有线）

        /*链接默认显示，无下划线*/
        a:link{
            color:darkgoldenrod;
            text-decoration: none;
        }
        /*链接鼠标悬浮显示，有下划线*/
        a:hover{
            color:green;
            text-decoration: underline;
        }

背景属性
- 在设置背景属性的时候，需要给予宽度或者高度，否则将不会显示

.box{
           height: 500px;
           background-color: darkgoldenrod;
           background-image: url("1.jpg");
           background-repeat:no-repeat;
           background-position:20px 30px;
           background-attachment: fixed;
       }
       /*背景连写*/
        .fox{
            height:400px;
            background:red url(2.jpg) no-repeat 20px 30px fixed;
        }

background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺 repeat（默认）| no-repeat | repeat-x | repeat-y
background-position 背景定位
- 方位值：left | right | center | top | bottom (一个方位值，另外的值默认居中；两个方位值，可不排序)
- 具体数字：（两个值，第一个为水平方向，第二个为垂直方向）
background-attachment 背景是否滚动 fixed | scroll

背景属性连写更方便，无顺序要求，但是背景图片的url为必写
备注：当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)，和标签调用选择器的顺序没有关系。

关于a标签悬浮显示的案例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a{
            display:inline-block;
            width:67px;
            height:32px;
            background:url("../image/110.png")
        }
        a:hover{
            background:url("../image/110.png") bottom;
        }
    </style>
</head>
<body>
<a href="#"></a>
</body>
</html>

行高：上下边距+文字高度，一般浏览器默认文字大小是16px
(两个基线之间的距离等于行高，当然感觉这个没啥需要注意的地方23333~~)
行高基线

之所以说没啥意思的地方是因为：
除了文字单位是px外，行高=文字大小*行高数值

盒子模型：
box模型

box

属性：
border-top-style: solid 实线 | dotted 点线 | dashed 虚线
border-top-color 边框颜色
border-top-width 边框粗细
（top可以换成其它方向：left | right | bottom）
简写：
border-top: solid red 5px;（无排序，线型必写）
border:solid green 10px;（四个方向统一）

边框合并：（将边框合并为一）
border-collapse:collapse;