CSS学习

最新推荐文章于 2025-04-27 21:14:46 发布

不进大厂不改名--

最新推荐文章于 2025-04-27 21:14:46 发布

阅读量107

点赞数

文章标签： css html5

本文链接：https://blog.youkuaiyun.com/xpc1998/article/details/120237443

版权

这篇博客介绍了CSS的基础知识，包括如何创建第一个CSS程序，详细讲解了基本选择器（标签选择器、类选择器、ID选择器）及其优先级。还探讨了结构伪类选择器的应用，如`:first-child`和`:hover`。此外，还涉及了属性选择器的使用，以及字体样式、行内元素和块元素的显示方式。最后，提到了定位技术，如相对定位和绝对定位的概念。

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

CSS 学习

基础入门，第一个CSS程序

//html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个CSS程序</title>
 //注意此处就是链接到css文件
    <link rel="stylesheet" href="CSS/h1.css">

</head>
<body>
<h1>你好世界</h1>
</body>
</html>

//CSS代码
h1 {
    color: aqua;
}

基本选择器

标签选择器
类选择器
ID选择器
注意：类选择器和ID选择器的区别就是类选择器可以被多个元素使用，而ID选择器是唯一只能被一个元素使用
如果一个元素使用了多个选择器，那么看优先级，ID选择器>类选择器>标签选择器

//html代码
<p>内容填充</p>
<p class="tagPbyClass"></p>
<p id="tagPbyID"></p>
//CSS代码
p {
    color: black;
}
.tagPbyClass {
    color: rebeccapurple;
}
#tagPbyID {
    border-radius: 5px;
}

结构伪类选择器

记住基本语法

//html代码
<ol>
    <li>你</li>
    <li>好</li>
    <li>世</li>
    <li>界</li>
</ol>
//css代码
//此处是选中ol li 中的第一个元素li
ol li:first-child {
            background: aqua;
        }
//伪类还可以让鼠标放上去有颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个CSS程序</title>
    <style>
        a:hover {
            color: red;  //鼠标放上去a标签会变成红色
            font-size:50px;//鼠标放上去字体会变大
        }
        a:active {
            color: yellow;//鼠标点击不放会变成黄色
        }
    </style>

</head>
<body>
<a href="#">点我会变色</a>
</body>
</html>

标签属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器练习</title>

    <style>
        p a {
            float: left;
            display: block;
            width: 50px;
            height: 50px;
            color: red;
            text-decoration: none;
            font-size: 30px;
            margin: 10px;
            background: gray;
            text-align: center;
        }
        p[id="1"] a[id] {    /*表示id为1的p标签下面的属性含有id的a标签被选中*/
            background: green;
        }
        a[class="five"] {  /*属性class=five的a标签被选中*/
            background:green;
        }
        a[class*="linked"] {/*class属性包含linked的a标签被选中*/
            background: yellow;
        }
        a[href$="html"] {/*href属性中以html结尾的a标签被选中*/
            background: yellow;
        }
        a[href^="img"] {/*href属性中以img开头的a标签被选中*/
            background: yellow;
        }
    </style>
</head>
<body>

<p id="1">
    <a href="img/1.html" id="111" class="linked woshi">1</a>
    <a href="https://www.baidu.com/1.jpg" title="two">2</a>
    <a href="img/1.html" class="linked nihao">3</a>
    <a href="img/1.png" class="four">4</a>
    <a href="img/1.txt" class="five">5</a>
</p>

</body>
</html>

字体样式

文本样式

圆角样式

div {
            height: 100px;
            width: 50px;
            background-color: red;
            /*顺时针旋转，对应的角分别是左上 右上 右下 左下*/
            border-radius: 0 50px 50px 0;  
        }

行内元素和块元素

//用display可以改变
display：inline  //行内元素，不会独占一行
display:block   //块元素，会独占一行
display:inline-block //既是块元素，也可以和别的块在一行

//用float也可以让块元素在一行
但是会有父级边框塌陷的问题（用到再搜）