CSS快速学习

发热的嘤嘤怪(2003计科胜胜同学)

已于 2022-10-17 21:08:25 修改

阅读量267

点赞数

分类专栏： css快速学习文章标签： css 学习 javascript html 前端

于 2022-10-12 16:11:33 首次发布

本文链接：https://blog.csdn.net/o676448/article/details/127282081

版权

css快速学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS快速学习

一. 概述、
二. 导入方式
三. 选择器和属性
- 1. 基本选择器
- 2. 包含选择器
四. 深入css

一. 概述、

CSS 是一门语言，用于控制网页表现。我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：

结构：HTML
表现：CSS
行为：JavaScript

好处：

功能强大
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）

二. 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

1. 内联样式

定义：在标签内部使用style属性，属性值是css属性键值对

<div style="color: red;">鸡你太美</div>

给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

2. 内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码
在这里插入图片描述

3. 外部样式

方法1

定义css资源文件。
在head标签内，定义link标签，引入外部的资源文件

如：
a.css文件：

				div{
				    color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

在这里插入图片描述

方法2

注意：对于样式表而言，后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中，也可以放在body中，一般建议放在head中，以便于浏览器渲染样式，因为样式在加载完成前需要渲染

注意

css也提供了一种在css文件中到导入其他css文件的功能 – @import，这样就可以也可以导入css文件。

<style>
  /* @import 是在css中使用url函数导入其他的css文件，是css本身的能力*/
  @import url("css/index.css");
</style>

link和@import的区别

从本质上说，这两种方式都是为了加载css文件，但它们还是存在细微的差别。

link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。
兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
使用dom控制样式时的差别：当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

三. 选择器和属性

一般我们会根据使用的频繁率和定义的标准，将css的选择器分为如下几种，方便于我们理解和掌握

1. 基本选择器

基本选择器是使用概率最高，也是最常被使用的选择器，必须要掌握它。基本选择器包括如下选择器：

标签选择器（根据标签名称获取）
ID选择器（获取id为xx的标签）
类选择器（获取标签中class=xxx的标签）
通用选择器（通配符）

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    /*不建议使用通配符选择器，建议使用reset.css * { color: red; }*/
    /* 标签选择器 */
    div {color: aqua; }
    /* id选择器 */
    #myprogram { background: yellow; }
    /* 类选择器题 */
    .mylove2 { color: red; }
  </style>
</head>
<body>
  <div id="first" class="mylove" >
   这个是一个div
  </div>
  <p id="myprogram">这个是段落标签</p>
  <div class="mylove mylove2">这个是一个div</div>
  <h1>这个是标题</h1> <hr />
  <div class="list">
    <ul>
      <li>这是是一个列表1</li>
      <li>这是是一个列表2</li>
      <li>这是是一个列表3</li>
      <li>这是是一个列表4</li>
      <li>这是是一个列表5</li>
      <li>这是是一个列表6</li>
      <li>这是是一个列表7</li>
      <li>这是是一个列表8</li>
      <li>这是是一个列表9</li>
      <li>这是是一个列表10</li>
    </ul>
    <li>这是是一个列表8</li>
    <li>这是是一个列表9</li>
    <li>这是是一个列表10</li>
  </div>
</body>

注意：

标签选择器就是以标签名称为标准选择对应的标签，id则是#id属性来选中标签，
一个页面上id必须是唯一的，所以id选择器只能选择一个标签，类选择器是.class属性选择，class
属性的值一个页面上允许出现多次，所以class选择器更加灵活，在开发中一般使用最多，通配符选择器不建议使用（*匹配所有标签）

2. 包含选择器

<style>
  /* 子代选择器 */
  div.list>ul { border: 1px solid red; }
  /* 后代选择器 */
  .list li { border: 1px solid red; }
  /* 逗号选择器 */
  .mylove, #myprogram, h1 { color: #eee; width: 200px; height: 30px;
background: skyblue;}
</style>

层次选择器

在这里插入图片描述

<body>
	<span>和div平级的span元素</span>
	<div>
		 <p>我的div下的p元素</p>
		 <span>我是div下的span元素</span>
		 <p> <span>我是div下 的p下的span元素</span> div下的p </p>
		 <h1>div下的h1 <span>h1中的span</span> </h1>
	</div>
	<span>和div平级的span元素</span>
	<h2>和div平级的h2</h2>
	<span>和div平级的span</span>
</body>

概述:
后代选择器:div span:选择div下的所有的span元素，包括子元素的子元素
子选择器:div>span:div下的子元素span元素
相邻兄弟选择器:div+span:和div相邻的兄弟选择器
通用兄弟选择器:div~span:通用兄弟选择器,和div相邻的span元素

结构伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么
状态，点击后是什么状态。所以，就叫做“伪类”

在这里插入图片描述

概述
ul li:first-child : 选取ul下的第一个子元素是li的。如果第一个子元素不是li则定位不到
ul li:first-of-type :选择ul li下的第一个类型是li的元素
ul li:nth-of-type(2):找li这个类型第二个的元素
ul li:nth-child(2) :第二个子元素是li的
注意：
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
- u E F:nth-hild(n)在父级里从一个元素开始查找，不分类型
- u E F:nth-of-type(n)在父级里先看类型，再看位置(推荐使用！！！！)