CSS基础概述

最新推荐文章于 2025-04-30 14:38:26 发布

原创最新推荐文章于 2025-04-30 14:38:26 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

Java前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS，它全称层叠样式表，是表现HTML文件样式的语言。阐述了CSS内容与表现分离等优势，讲解了基础语法、Style标签。还介绍了行内、内部、外部三种引入CSS的方式及样式优先级，详细说明了基础和高级选择器的使用。

什么是CSS

全称 Cascading Style sheet 层叠样式表
表现HTML文件样式的语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势

✦ 内容与表现分离
✦ 网页的表现统一，容易修改
✦ 丰富的样式，是的页面布局更加灵活
✦ 减少网页的代码量，增加网页的浏览速度，节省网络宽带
✦ 独立运行于页面的的CSS，有利于i网页被搜索引擎收录
✦ 。。。。。

CSS的基础语法

选择器{
声明1；(属性:值;)
声明2；(属性:值;)
…
}

Style标签

Style标签在HTML文档中位置，在和之间

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            font-size: 12px;
            color: red;
        }
    </style>
</head>

引入CSS的方式

1、行内样式

使用style属性引入CSS样式

<body>
<h1 style="font-size:12px">hello,CSS</h1>
</body>

#####2、内部样式表
CSS代码写在的

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1{
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
<h1>hello,CSS</h1>
</body>

3、外部样式表

（1）链接式
标签属于XHTML，使用连接的CSS文件先加载到网页当中，再进行编译显示。

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="StyleSheet" href="wcss.css" type="text/css" />

</head>
<body>
<h1>hello,CSS</h1>
</body>

h1{
    font-size: 12px;
    color: yellow;
}

（2）导入式
@import属于CSS2.1,使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中，@import是CSS2.1特有的。

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        @import "wcss.css";
    </style>

</head>
<body>
<h1>hello,CSS</h1>
</body>

h1{
    font-size: 12px;
    color: yellow;
}

CSS样式优先级（就近原则）

行内样式>内部样式表>外部样式表

CSS基础选择器

1、标签选择器

格式：
标签名{属性：值}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{font-size: 20px;color: blue}
    </style>
</head>
<body>
<h1>Hello,CSS</h1>
</body>

2、类选择器

格式：
<标签名 class=“类名称”>标签内容</标签名>
.类名称{属性：值;}

    <style>
        .a{
            font-size: 25px;
            color: red;
        }
    </style>
</head>
<body>
<h1 class="a">Hello,CSS</h1>
</body>

3、ID选择器

格式：
<标签名 id=“名称”>标签内容</标签名>
#id名称{属性:值;}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #b{
            font-size: 30px;
            color: yellow;
        }
    </style>
</head>
<body>
<h1 id="b">Hello,CSS</h1>
</body>

注意：
类选择器可在页面中多次使用，但ID选择器在同一个页面只能使用一次

基本选择器的优先级

ID选择器>类选择器>标签选择器

CSS高级选择器

1、层次选择器

在这里插入图片描述
首先设一个模板，接下来的选择器都是对这个进行

<body>
<p class="a">1</p>
<p id="b">2</p>
<p>3</p>
<ul>
    <li><p>4</p></li>
    <li><p>5</p></li>
    <li><p>6</p></li>
</ul>
</body>

(1)后代选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p,ul{
            border:1px solid red;
        }
        /*后代选择器
        获取body下面所有的p标签
        */
        body p{
            background-color: red;
        }
    </style>
</head>

(2)子选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p,ul{
            border:1px solid red;
        }
        /*子选择器*/
        /*body>标签名
        获得body下的第一层元素
        */
        body>p{
            background-color: blue;
        }
    </style>
</head>

(3)相邻兄弟选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p,ul{
            border:1px solid red;
        }
        /*相邻兄弟选择器*/
        /*首先要定位到一个元素*/
        /*接着查看向下的第一个元素是否是符合条件的标签*/
        /*如果是则获取,否则无效*/
        #b+p{
            background-color: yellow;
        }
    </style>
</head>

(4)通用兄弟选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p,ul{
            border:1px solid red;
        }
        /*通用兄弟选择器 E~F*/
        /*首先定位一个元素E*/
        /*然后向下获取所有同级的元素F*/
        .a~#b{
            background-color: red;
        }
    </style>
</head>

2、结构伪类选择器

在这里插入图片描述

结构伪类选择器 :
概念 : 伪元素和伪选择器,是CSS已经定义好的 ,我们拿来就可以用
格式 :
选择器 :伪元素{
}

<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>

（1）first-child&last-child

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,li{
            border: 1px solid red;
        }
        
        ul li:first-child{
            /*父类的第一个子元素,并且会判断是不是li*/
            background-color: red;
        }
        /*父类的最后一个子元素,并判断是不是li*/
        ul li:last-child{
            background-color: green;
        }
    </style>
</head>

（2）first-of-type&last-of-type

<style>
        p,li{
            border: 1px solid red;
        }

        p:nth-child(2){
            /*寻找p元素的父级元素的第n个子元素,判断是不是p元素,如果不是,不选择*/
            background-color: red;
        }
        /*寻找p元素的父级元素的第n个p元素,注意它和nth-child的区别*/
        p:nth-of-type(3){
            background-color: green;
        }
    </style>

（3）nth-child(n)&nth-of-type(n)

 <style>
        p,li{
            border: 1px solid red;
        }

        p:first-of-type{
            /*寻找p元素的父级元素的第一个E元素*/
            background-color: red;
        }
        /*寻找p元素的父级元素的最后一个p元素*/
        p:last-of-type{
            background-color: green;
        }
    </style>

3、属性选择器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .show a{
            float: left; /*浮动*/
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: white;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 5px;
        }
        /*属性选择器*/
        a[href*="https"]{
            background-color: red;
        }
        a[class="links"]{
            background-color: orange;

        }
        a[href$="png"]{
            background-color: yellow;
        }
        a[href$="jpg"]{
            background-color: green;
        }
        a[id=apple]{
            background-color: cyan;
        }
        a[class="link"]{
            background-color: blue;
        }
        a[href*="aaa"]{
            background-color: purple;
        }
    </style>
</head>
<body>
<p class="show">
    <a href="https://www.baidu.com" id="name">1</a>
    <a href="" class="links">2</a>
    <a href="/1.png">3</a>
    <a href="/1.jpg"  class="links">4</a>
    <a href="/1.png" id="apple">5</a>
    <a href="https://www.bilibili.com"  class="link">6</a>
    <a href="aaa">7</a>
</p>

</body>