CSS3学习之基础知识

最新推荐文章于 2023-08-18 20:40:23 发布

大雷哥～

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量240

点赞数

分类专栏： Web前端 Css3 文章标签： Css3

本文链接：https://blog.csdn.net/JJJKJJ/article/details/93745631

版权

Web前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Css3

4 篇文章 0 订阅

订阅专栏

CSS介绍

CSS概述

css 指层叠样式表
css样式表极大地提高了工作效率

CSS基础语法

1.selector{
		  property:value
		  }

selector是属性选择器，下面是对应的属性和属性值

例：h1{color:red;font-size:14px}

属性大于一个之后，属性之间用分号隔开
如果值大于1个单词，则需要加上引号：

例：p{font-family:"sans serif";}

小demo：
MyCss.css文件内容：

h1{
    color: brown;
}

index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet"><!--引入链接-->
</head>
<body>
    <h1>
        这是应用样式表
    </h1>
</body>
</html>

结果如下：
在这里插入图片描述

CSS高级语法

1.选择器的分组：

h1,h2,h3,h4,h5{color:red;}//可以给多个元素加入同一个样式

demo：
index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet"> <!--引入链接-->
</head>
<body>
    <h1>
        这是应用样式表
    </h1>
    <a>这是一个a标签的样式</a>
    <h2>二级标题的样式</h2>
    <h3>三级标题的样式</h3>
</body>
</html>

css文件内容：

h1,h2,h3,a{
    color: brown;
}

2.继承：

body{
	color:green;
}

demo：
index.html 文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet"> <!--引入链接-->
</head>
<body>
    <h1>
        这是应用样式表
    </h1>
    <a>这是一个a标签的样式</a>
    <h2>二级标题的样式</h2>
    <h3>三级标题的样式</h3>
</body>
</html>

css 文件内容：

h1,h2,a{
    color: brown;
}
body{
    color: aqua;
}

结果：
在这里插入图片描述
可以看出：body中的样式不能覆盖已经被定义好的样式。

CSS 派生选择器

通过依据元素在其位置的上下文关系来定义样式
demo：
index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet"> <!--引入链接-->
</head>
<body>
    <p><strong>p标签hello Css</strong></p>
    <ul>
        <li><strong>li标签hello css </strong></li>
    </ul>
</body>
</html>

MyCss.css文件内容：

li strong{
    color: brown;
}
strong{
    color: darkkhaki;
}

结果：

id选择器：

1.id选择器：
可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
2.id选择器和派生选择器：
目前比较常用的方式是id选择器常常用于建立派生选择器
demo
index.html文件内容：

<body>
    <p id="pid">hello css <a href="###">我爱你没道理</a></p>
</body>

MyCss文件内容：

#pid a{
    color: cornflowerblue;
}

结果：
在这里插入图片描述

类选择器

1.类选择器以一个点来显示，而id选择器以#显示
2.class额叶可以作派生选择器
demo：
index.html文件内容：

<body>
    <p class="pclass">我爱你没道理<a href="$$">嘤嘤嘤</a></p>
    <div class="divclass">
        小莹最美<p>天生丽质难自弃</p>
    </div>
</body>

MyCss文件内容：

.pclass a{
    color: #ff182f;
}
.divclass p{
    color: #ff1def;
}

结果：
在这里插入图片描述

属性选择器

1.对带有指定属性的HTML元素设置样式
2.属性和值选择器

demo：
index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [title]{
            color:blue;
        }
        [title=te]{
            color:red;
        }
    </style>
</head>
<body>
  <p title="t">压寨夫人</p>
  <p title="te">人比黄花瘦</p>
</body>
</html>

运行结果：
在这里插入图片描述