2025教会你CSS3·基础篇

最新推荐文章于 2025-04-01 14:40:57 发布

爱爬山的老虎

最新推荐文章于 2025-04-01 14:40:57 发布

阅读量272

点赞数 4

分类专栏：前端学习文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/m0_73001740/article/details/146529322

版权

前端学习专栏收录该内容

12 篇文章

订阅专栏

基础：

基础知识：

css优点：

内容和表现分离，易于读懂
网页结构表现统一，可以实现复用
样式十分丰富
利用SEO，容易被搜索引擎收录！

样式优先级

行内样式>内部样式>大于外部样式

行内样式：

<h2 style="color: aqua">我是二级标题</h2>

内部样式：

<head>
    <style>
        h3{
            color: red;
        }
    </style>
</head>

外部样式：

html：

<!--链接到css文件中，写在head中-->
    <link rel="stylesheet" href="css/001.css">

css：

h1{
    color: chartreuse;
}

基础框架：

代码：

结果：

三种基本选择器：

1.标签选择器：

选中的是所有所选标签

h1{
    color: chartreuse;
}

2.类选择器：

选中的是所有所选class

html：

<h1 class="one">标题</h1

CSS中的代码：

.one{
    color: #1e3fea;
}

3.id选择器：

选中的是所有所选id

html：

<h1 id="five">标题</h1>

CSS：

#five{
    color: brown;
}

注意点：

class和id不能以数字开头

优先级：

id选择器>类选择器>标签选择器

层次选择器：

1.后代选择器：

选择后面的所有

/*后代选择器*/
body{
    color: brown;
}
ul li{
    color: #0335f8;
}

2.子选择器：

选择后面的一代

/*子选择器*/
body>p{
    color: chartreuse;
}

3.相邻兄弟选择器：

选择已选的下一个兄弟

/*相邻兄弟选择器*/
.cx+p{
    background: aqua;
}

4.通用选择器：

选择已选的下面所以兄弟

/*通用选择器*/
.xhl~p{
    background: brown;
}

整体HTML代码：

<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
  <link rel="stylesheet" href="./CSS/003.css">
</head>
<body>
  <p>第一</p>
  <p>第二</p>
  <p class="cx">第三</p>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
  <p>第四</p>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
  <p class="cx">第五</p>
  <p>第六</p>
  <p class="xhl">第七</p>
  <p>第八</p>
  <p>第九</p>

</body>
</html>

效果：

结构伪类选择器：

形式是带 "：”

比如：

ul li:first-child {
    background: #1e3fea;
}
ul li:last-child {background: aqua}

body p:last-of-type {background: chartreuse}

属性选择器：

形式：标签[属性名=属性值（符合正则表达式）]{

}

形如：

p[class="cx"]{
    background: #1e3fea;
}

常用正则表达式：

= 绝对等于
*= 包含这个元素
^= 以这个为开头
$= 以这个为结束