我的第一个css

最新推荐文章于 2022-01-26 00:05:59 发布

一什么欧

最新推荐文章于 2022-01-26 00:05:59 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/weixin_44199948/article/details/118462426

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件

利用SEO，容易被搜索引擎收录！

Vue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
<!--    规范 编写css代码 每个声明最好用分号结尾
语法：
    选择器 {
    声明1;
    声明2;
    声明3;
    }
-->

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

1.css的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式和外部样式的优先级取决于在head标签中的前后顺序-->

    <!--    内部样式表-->
  <style>
    h2{
      color: green;
    }
  </style>
    <!--    外部样式表-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式 在标签元素中，编写一个style属性，编写样式即可-->
<h2 style=“color:red”>我是标题</h2>
</body>
</html>

扩展：外部样式两种写法

链接式：html
导入式：css 2.1特有！
```
@import url("css/style.css");
```

2.选择器

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

2.1 基本选择器

标签选择器选择一类标签
类选择器 class 选择有所class属性一致的标签跨标签 .类名{}
id选择器全局唯一 #id名{}

不遵循就近原则
id选择器>class选择器>标签选择器

2.2层次选择器

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

/*后代选择器*/
/*body p{*/
/*  background: red;*/
/*}*/

子选择器：一代父子

/*子选择器*/
/*body>p{*/
/*  background: green;*/
/*}*/

相邻兄弟选择器：同辈向下只有一个弟弟选择器

/*相邻兄弟选择器 active类标签周围的p标签 唯一*/
.active+p{
  background: #0924d4;
}

通用选择器：

/*通用选择器 当前选中元素向下的所有兄弟*/
.active~p{
    background: aqua;
}

2.3结构伪类选择器

/*选中ul的第一个子元素*/
ul li:first-child{
  background: red;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
  background: green;
}

/*鼠标移动到该区域才显示的属性*/
a:hover{
  background: red;
}

2.4属性选择器

id+class结合

/*存在id属性的元素*/
/*a[id]{*/
/*  background: yellow;*/
/*}*/
/*属性名 属性名 = 属性值（正则）*/
/*a[id=first]{*/
/*  background: #0924d4;*/
/*}*/
/*class中有Links的元素*/
/*
= 绝对等于
*=包含
*/
/*a[class*="links"]{*/
/*  background: yellow;*/
/*}*/
/*选中以href中以http开头的元素*/
/*a[href^="http"]{*/
/*  background: yellow;*/
/*}*/
/*选中a标签中以href中以pdf结尾的元素*/
/*a[href$=pdf]{*/
/*  background: yellow;*/
/*}*/

一什么欧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一个css

css的优势内容和表现分离网页结构表现统一，可以实现复用样式十分的丰富建议使用独立于html的css文件利用SEO，容易被搜索引擎收录！Vue：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title><!-- 规范编写css代码每个声明最好用分号结尾语法：
复制链接

扫一扫

专栏目录