web -- CSS样式-CFANZ编程社区

CSS使用方式

1 行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

CSS样式声明：由CSS属性和值组成

例如：style="属性:值;属性:值;"

常用CSS属性：

设置文本颜色 color:red;
设置背景颜色 background-color:green
设置字体大小:font-size:32px

示例：

<body>
      <p style="color:red">和乐天春词
          新妆宜面下朱楼，
          深锁春光一院愁。
          行到中庭数花朵，
          蜻蜓飞上玉搔头。</p>
</body>

浏览器效果：

2 内嵌样式

借助于style标签，在HTML稳定中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助选择器到HTML中匹配元素并应用样式。

使用方式：

<style>
    选择器 {
        属性：值；
        属性：值;
    }
</style>

选择器：通过标签名或某些属性值到页面中选取相应的元素，为其应用样式。

示例：

<style type="text/css">
    p {
            color: blue;
    }
    #div1 {
          background-color: red;
    }
</style>

<body>
    <p>和乐天春词 新妆宜面下朱楼，
        深锁春光一院愁。行到中庭数花朵，蜻蜓飞上玉搔头。
    </p>
    <div id="div1">
        更深月色半人家，北斗阑干南斗斜。 今夜偏知春气暖，虫声新透绿窗纱。
    </div>
</body>

浏览器效果：

3 外链样式表

创建外部样式表文件，后缀使用.css
在HTML文件中使用<link>标签引入外部样式表：<link rel="stylesheet" href="URL" type="text/css">
样式表文件中借助选择器匹配元素应用样式

样式表特征

1. 层叠性

多组CSS样式共同作用于一个元素

2. 继承性

后代元素可以继承祖先元素中的某些样式。例：大部分的文本属性都可以被继承

3. 样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式，在不同地方多次进行设置，最终选用哪一种样式：

离元素最近的样式优先级最高（就近原则）
文档内嵌与外链样式表，优先级一致，看代码书写顺序，后来者优先级高
浏览器默认样式和继承样式优先级较低

CSS选择器

1. 作用

匹配文档中的某些元素为其应用样式

2. 分类：

1）标准选择器

根据标签匹配文档中所有该元素

语法：

标签名 {
    属性名：属性值;
}

2) id选择器

根据元素的id属性值匹配文档中唯一的元素，id具有唯一性，不能重复使用。

注意：
id属性值自定义，可以由数字，字母，下划线，-组成，不能一数字开头，尽量见名知意，可以使用连字符，下划线，小驼峰标识。

#id属性值{
}

3） class选择器/类选择器

根据元素的class属性值匹配相应的元素，class属性值可以重复使用，实现样式的复用

特殊用法：

类选择器与其它选择器结合使用，注意标签与类选择器结合时，标签在前，类选择器在后
class属性值可以写多个，共同应用类选择器的样式

.class属性值 {
}

4）群组选择器

为一组元素统一设置样式

语法：

selector1,selector2,selector3{
}

5) 后代选择器

匹配满足选择器的所有后代元素（包括直接子元素和间接子元素）

匹配selector1中所有满足selector2的后代元素

语法：

selector1 selector2{
}

示例：

div p{
       color: purple;
     }
div p span{
       color: aqua;
    }


<div>
    <p>
        我时div中的p元素
        <span>我是div下p中的span</span>
    /p>
</div>

6）子代选择器

匹配满足选择器的所有直接子元素

语法：

selector1>selector2{
}

7) 伪类选择器

为元素的不同状态分别设置样式，必须与基础选择器结合使用

分类：

:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过的状态
:active 鼠标点按不抬起的状态(激活)
:focus 焦点状态(文本框被编辑时旧称为获取焦点)

用法示例：

a:link{
}
a:visited{
}
.c1:hover(
)

注意：

超链接如果需要为四种状态分别设置样式，必须按照以下顺序书写：

:link
:visited
:hover
:active

超链接常用设置：

a{
    /* 统一设置超链接默认样式(不分状态) */
}
a:hover{
    /* 鼠标滑过时改样式 */
}

3. 选择器优先级

使用选择器为元素设置样式，发生样式冲突时，主要看选择器的权重，权重越大，优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代，子代，伪类)最终的权重伪各个选择器权重之和，群组选择器权重以每个选择器单独的权重为准，不进行相加计算。

示例：

/*  群组选择器之间相互独立，不影响优先级 */
body,h1,p{  /* 标签选择器权重为1 */
    color:blue;
}
.c1 a{   /* 当前组合选择器权重为10+1 */
    color:green;
}
#d1>.c2{ /* 当前组合选择器权重为100+10 */
    color:blue;
}

元素的尺寸和颜色

1.元素尺寸

px像素单位
百分比%相对父元素
相对单位em （1em=16px，通常用于移动端的页面开发，常用1.5em）
rpx=小程序页面的单位
当页面元素的内容大小超过了元素的宽度，可以使用overflow属性来解决超出部分的显示方式，建议使用auto；

2. 颜色

元素的字体，背景，边框
使用方式color:red;
1. 英文单词
2. rgb
  1. rgb（0-255）rgb(2,3,5)
  2. rgba(0-1)
3. 16进制
  1. 长的16进制：#ffffff; #000000
  2. 短的16进制：#fff;#000

示例：

css代码：

   <style>
        body{
            font-size: 12px;
        }
        table {
            width: 990px;
            border-bottom: solid 1px #ccc;
        }
        .w610 {
            width: 610px;
        }
        th{
            border-bottom: solid 1px #ccc ;
        }
        table tr td {
            text-align: center;
            border-bottom: dashed 1px #eee;
            color: #9a9c9a;
        }
        .left {
            text-align: left;
        }
        a{
            text-decoration: none;
        }
        a:link{
            color: #005aa0;
        }
    </style>

html代码：

<body>
    <table>
        <tr>
            <th class="w610">主题</th>
            <th>回复/浏览</th>
            <th>作者</th>
            <th>时间</th>
        </tr>
        <tr>
            <td class="left"><a href="#">关关雎鸠，在河之洲。窈窕淑女，君子好逑。</a></td>
            <td>0/0</td>
            <td><a href="#">张三</a></td>
            <td>2022-04-10</td>
        </tr>
        <tr>
            <td class="left"><a href="#">关关雎鸠，在河之洲。窈窕淑女，君子好逑。</a></td>
            <td>0/0</td>
            <td><a href="#">张三</a></td>
            <td>2022-04-10</td>
        </tr>
        <tr>
            <td class="left"><a href="#">关关雎鸠，在河之洲。窈窕淑女，君子好逑。</a></td>
            <td>0/0</td>
            <td><a href="#">张三</a></td>
            <td>2022-04-10</td>
        </tr>
        <tr>
            <td class="left"><a href="#">关关雎鸠，在河之洲。窈窕淑女，君子好逑。</a></td>
            <td>0/0</td>
            <td><a href="#">张三</a></td>
            <td>2022-04-10</td>
        </tr>
    </table>
</body>

浏览器效果：