CSS基础复习

最新推荐文章于 2023-04-15 16:54:29 发布

greenhand coder

最新推荐文章于 2023-04-15 16:54:29 发布

阅读量659

点赞数

分类专栏：前端学习笔记文章标签： css html

本文链接：https://blog.csdn.net/qq_43249043/article/details/113831198

版权

建议选择器，属性名，属性关键字全都使用小写选择器和{}中间保留空格内联式 style里面(控制整个html页面) 嵌入式写在标签中外联式 css作为单独文件外联式link标签：<link rel="stylesheet" href="css文件路径">通常写在style标签的同一个位置属性：rel(定义文档间的联系，连接css的时候需要指定为stylesheet, 表示被连接的文档是一个样式表), href(所连接样式表的url)1...

摘要由CSDN通过智能技术生成

建议选择器，属性名，属性关键字全都使用小写
选择器和{}中间保留空格
内联式 style里面(控制整个html页面) 嵌入式写在标签中外联式 css作为单独文件
- 外联式link标签：
  - ```
  <link rel="stylesheet" href="css文件路径">
```
- 通常写在style标签的同一个位置
- 属性：rel(定义文档间的联系，连接css的时候需要指定为stylesheet, 表示被连接的文档是一个样式表), href(所连接样式表的url)

1. CSS选择器

1.1 选择器分类

选择器分为基础选择器和复合选择器

1.1.1 基础选择器

基础选择器由单个选择器组成，包括标签选择器，类选择器，id选择器，通配符选择器
标签选择器：
- 用HTML标签名作为选择器，按照标签名分类，为页面中某一类标签指定统一CSS样式，如 div{}

类选择器：

.class, 长名称可以用-来为选择器命名

多类名

使用方式 :<div class="green box">green</div>

使用场景：将不同标签样式相同的地方放到一个类里，节省CSS代码，方便统一修改

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box {
            
      width: 100px;
      height: 100px;
    }
    .red {
            
      background-color: red;
    }
    .green {
            
      background-color: green;
    }
  </style>
</head>
<body>
<div class="red box">red</div>
<div class="green box">green</div>
<div class="red box">red</div>
</body>
<!--对比上下两处代码-->
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .red {
            
      background-color: red;

      width: 100px;
      height: 100px;
    }
    .green {
            
      background-color: green;

      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
<div class="red">red</div>
<div class="green">green</div>
<div class="red">red</div>
</body>

id选择器： #id
通配符选择器：用*定义，表示选取页面中的所有标签，给所有标签附上样式，从html标签开始

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签比如p	不能差异化选择	较多	p{color：red;}
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav{color: red;}
id选择器	一次只能选择一个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color: red;}

1.1.2 复合选择器

复合选择器可以更加高效地选择目标元素
复合选择器由多个基础选择器组合而成
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器

1.1.2.1 后代选择器

后代选择器可以选择父元素里面的子元素

写法：元素1 元素2 {样式} 表示选择元素1里面的所有元素2(后代元素)
- 元素1是父级元素2是子级，最终选择的只是元素2，元素1里其余元素不会被选择
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代就可以,但是最好写全一点ul li div a {样式}这样，不容易出错
- 元素1 2可以是任意的基础选择器 .class #id都可以

<style>
  ul li {
    
    color: green;
  }
  ul div {
    
    color: blueviolet;
  }
  ul a {
    
    color: aqua;
  }
</style>
<body>
<ul>
  我不是li
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
  <li>
    <div>
      <a href="#">我是ul曾孙</a>
      我是ul的孙子元素
    </div>
    我是li
  </li>
  <li>我是li</li>
</ul>
</body>

1.1.2.2 子选择器

子选择器只能选择某元素的下一级子元素，不能选择孙子及以下的
写法元素1>元素2 {样式} 表示选择元素1里面的所有直接后代(子元素)元素2
- 元素2必须是亲儿子，孙子都不可以

<style>
  .father>div {
    
    color: green;
  }
</style>
<body>
<div class="father">
  <div>
    我是son
  </div>
  <a href="#">
    <div>我是grandson</div>
  </a>
</div>

最低0.47元/天解锁文章

greenhand coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础复习

建议选择器，属性名，属性关键字全都使用小写选择器和{}中间保留空格内联式 style里面(控制整个html页面) 嵌入式写在标签中外联式 css作为单独文件外联式link标签：<link rel="stylesheet" href="css文件路径">通常写在style标签的同一个位置属性：rel(定义文档间的联系，连接css的时候需要指定为stylesheet, 表示被连接的文档是一个样式表), href(所连接样式表的url)1...
复制链接

扫一扫