CSS基本使用复习(1)

最新推荐文章于 2025-07-02 22:08:27 发布

原创最新推荐文章于 2025-07-02 22:08:27 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

样式表加入到Html中的三种方式：
一、内联样式表(在标签内设置元素的样式)
二、嵌入样式表（需要在head标签内写<style type="text/css"></style>）
三、外部样式表 link

优先级：

内敛样式表>嵌入样式表>外部样式表

样式表加入到Html中的三种方式：
一、内联样式表(在标签内设置元素的样式)
二、嵌入样式表（需要在head标签内写<style type="text/css"></style>）
三、外部样式表 link

优先级：
内敛样式表>嵌入样式表>外部样式表

同一种样式，HTML选择器样式最为简单
都选择同一类样式，用Class类选择器
id每个标签都要尽量保证唯一，才选择ID选择器，如果非得两个都显示相同样式，就用Class选择器
单一的话，选择ID选择器，同一类的话，选择Class选择器

样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)
1）、HTML Selector
2）、Class Selector（需要给要设置样式的元素的class属性赋值）
3）、ID Selector（需要给要设置样式的id属性赋值）
4）、关联选择器 PEM{background-Color:Yellow}
5）、组合选择器<table></table>
6）、伪元素选择器
伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。
例如，对于超链接标签(<a></a>)的正常状态（没有任何动作前）、访问过的状态、选中
状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素
选择器来定义。
目前的伪元素有以下几种：
A:active选中超链接时的状态
A:hover 光标移动到超链接上的状态
A:link 超链接的正常状态
A:visited 访问过的超链接状态
P:first-line 段落中第一行文本
p:first-letter 段落中第一个字母

HTML.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="Testcss.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        p{
            background: yellow;
            font-size: xx-small;
        }
    </style>
</head>
<body>
<p style="background: red;font-size: xx-large">处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>

<tt>床前明月光</tt>
</body>
</html>

Testcss.css

tt{
    background: green;
    font-size: xx-large;
}
p{
    background: green;
}

HTML选择器.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            background-color: yellow;
        }
        tt{
            background-color: green;
        }
    </style>
</head>
<body>
<p>处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>

<tt>床前明月光</tt>
<tt>床前明月光</tt>
<tt>床前明月光</tt>
<tt>床前明月光</tt>
</body>
</html>

Class类选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        tt.tt1{
            background-color: red;
        }
        tt.tt2{
            font-size: xx-large;
        }
        tt.tt3{
            background-color: red;
        }
    </style>
</head>
<body>
<tt class="tt1">床前明月光</tt>
<tt class="tt1">床前明月光</tt>
<tt class="tt2">床前明月光</tt>
<tt class="tt3">床前明月光</tt>
</body>
</html>

ID选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .p1{
            background-color: red;
        }
        #p2{
            background-color: green;
        }
        #p3{
            background-color: blue;
        }
        #p4{
            background-color: black;
        }
    </style>
</head>
<body>
<p class="p1">处处好风光</p>
<p class="p1">处处好风光</p>
<p id="p2">处处好风光</p>
<p id="p3">处处好风光</p>
<p id="p4">处处好风光</p>

</body>
</html>

关联选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p em{
            background-color: red;
        }
    </style>
</head>
<body>
<p><em>今天天气不错</em></p>
<em>Ha</em>
<em>Ha</em>
<em>Ha</em>
<em>Ha</em>
<em>Ha</em>
<p>天气不错</p>
<p>天气不错</p>
<p>天气不错</p>
<p>天气不错</p>
<p>天气不错</p>
</body>
</html>

组合选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        h1,h2,h3,h4,h5,h6,td{
            background-color: red;
        }
    </style>
</head>
<body>
<h1>我是一个粉刷匠</h1>
<h2>我是一个粉刷匠</h2>
<h3>我是一个粉刷匠</h3>
<h4>我是一个粉刷匠</h4>
<h5>我是一个粉刷匠</h5>
<h6>我是一个粉刷匠</h6>
<table border="1px" cellspacing="0px" cellpadding="0px">
    <tr>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
    </tr>
    <tr>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
    </tr>
    <tr>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
    </tr>
    <tr>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
        <td>粉刷本领强</td>
    </tr>
</table>
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        A:active{
            text-decoration: none;
        }
        A:hover{
            font-size: xx-large;
        }
        p::first-letter{
            font-size: xx-small;
        }
        p::first-line{
            font-size: xx-large;
        }
    </style>
</head>
<body>
<p>晋太元中，武陵人以捕鱼为业，<br/>
    缘溪行</p>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>