CSS优点 CSS导入方式选择器

2022-03-02 18:20:24

1.什么是CSS

CSS的优点：

1‘ 内容和表现分离

2’ 网页结构统一可以实现复用

3‘ CSS文件可以独立于HTML使用

4’ 通过SEO容易被搜索引擎收录

CSS文件的三种导入方式：

优先级：就近原则

第一种：外部样式

在IDEA中，CSS文件建立方法，在文件夹上右键，新建file，然后在文件命名的时把后缀名改成 .css
在header中建立link或者style标签里通过url导入css文件，实现内容和表现分离

链接式：一起渲染出来

<link rel="stylesheet" href="xxx.css">

? 导入式：先显示框架再渲染

<style>
		@import url("css/style.css");
</style>

第二种：行内样式

在HTML的body部分的标签元素中，编写一个style属性，编写样式
```
<xxx style="color:red;"></xxx>
```

第三种：内部样式

在HTML head部分中，编写style标签，写CSS

<style>
		选择器
</style>

2.选择器

作用：选择页面上的某一个或某一类元素

2.1 基本选择器

优先级：id>class>标签

标签选择器

选中一类标签标签{}

<head>
    	<style>
            h1{}
        </style>
</head>
<body>
        <h1></h1>
    	<h1></h1>
    	<h1></h1>    
</body>

类选择器 class .class名{}

选择class属性一致的标签，可以跨标签

<head>
		<style>
			.zhangwenqing{}
		</style>
</head>
<body>
		<p class="zhangwenqing"></p>
</body>

id 选择器

id保持全局唯一 #id名{}

<head>
		<style>
			#zhangwenqing{}
		</style>
</head>
<body>
		<p id="zhangwenqing"></p>
</body>

2.2层次选择器

后代选择：在某个元素的后面祖爷爷后面的爷爷爸爸你

body p{
    background:red;
}

子选择器，一代，儿子
```
body>p{
    background: aqua;
}
```

相邻兄弟选择器同辈（

/*兄弟选择器:只有一个，相邻（向下）*/
.test + p{
    background: chocolate;
}

通用选择器

/*通用兄弟选择器*/
.test~p{
    background: blue;
}

2.3 结构伪类选择器

/--选中标签的子标签--/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
            选中了ul标签中li标签的第一个子标签
            ul li:first-child{
                background: #768e80;

            }
            选中了ul标签中li标签的最后一个子标签
            ul li:last-child{
                background: #8e5752;
            }
            选中了p标签的父标签的第二个子标签并判断它是否是p标签
            p:nth-child(2){
                background: #8e6d7a;
            }
            选中了p标签中第四个p类型的子标签
            p:nth-of-type(4){
                background: #8e3f3d;
            }
    </style>
</head>
<body>
<h1>标题1</h1>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<ul>
    <li>行1</li>
    <li>行2</li>
    <li>行3</li>
    <li>行4</li>
</ul>
</body>
</html>

2.4 属性选择器（常用）

像是class+id选择器，像是标签＋属性

=绝对等于

*=包含这个元素

$=以这个结尾

^=以这个结尾

标签[属性统配符条件]{}

例如：p[href^=xxx] 就是p标签中href属性值以xxx结尾的

? a[id] 是a标签中有id属性的