CSS基础 —css介绍+选择器讲解（入门学习笔记-超详细）

最新推荐文章于 2023-12-07 16:22:58 发布

lerrel1

最新推荐文章于 2023-12-07 16:22:58 发布

阅读量342

点赞数

文章标签：前端 css css3 学习笔记 html

本文链接：https://blog.csdn.net/lerrel1/article/details/131867144

版权

CSS基础

一. CSS概述

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）

添加样式，字体，间距和颜色等的计算机语言，CSS 文件扩展名为 .css。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，

拥有对网页对象和模型样式编辑的能力。

CSS 指层叠样式表 (Cascading Style Sheets)；

样式定义如何显示 HTML 元素；
样式通常存储在样式表中；
把样式添加到 HTML 中，是为了解决内容与表现分离的问题；
外部样式表可以极大提高工作效率；
外部样式表通常存储在 CSS 文件中；
多个样式定义可层叠为一个；

二. CSS引入规则

2.1 CSS语法

CSS 规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明[规则]：

选择器通常是您需要改变样式的HTML元素(我们可以通过各种选择器灵性的选择页面的各种元素)。
每条样式声明由一个属性[样式属性]和一个值[样式值]组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来。

注：为了让CSS可读性更强，你可以每行只描述一个属性.

2.2 三种CSS样式引入规则

插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

内联样式(Inline style)

行内样式(内联样式)引入规则：样式写在标签的style属性中行内样式的语法规则:
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内样式。

其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

注：行内式也是通过标记的属性来控制样式的，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

行内样式的语法规则:

<div style="font-size: 30px; color: brown;">孙悟空</div>

内部样式表(Internal style sheet)

内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表；

注：内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果在一个网站，不建议使用这中方式，因为它不能充分发挥CSS代码的重用优势

内嵌样式的语法规则:

<head>
    <style>
        p {
            font-size: 50px;
            color: blue;
        }
    </style>
</head>
<body>
    <p>猪八戒</p>
</body>

外部样式表(External style sheet)

外部样式[链入式]引入规则：一个单独的样式文件,存放我们的样式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过like标记将外部样式表文件链接到HTML文档中。

注：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个

站点的外观。每个页面使用 link标签链接到样式表。link标签在文档的头部。

链入式的语法规则:

<head>
    <like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

该语法中， link标记需要放在head头部标记中，并且必须指定 link 标记的三个属性。如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

注：不要在属性值与单位之间留有空格

样式引入优先级

一般情况下，优先级如下：

内联样式（Inline style） >内部样式（Internal style sheet） =外部样式（External style sheet）> 浏览器默认样式

浏览器从上往下读取数据，所以内部样式和外部样式谁更靠下，谁优先级高（就近原则）

2.3 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束。

  /* p {
            font-size: 50px;
            color: blue;
        } */

三. 基本选择器

3.1 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

 p {
      font-size: 50px;
      color: blue;
 }

3.2 id选择器

id 选择器根据元素的id属性来选择特定的 HTML 元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id 。

  #book1{
       text-align: center;
       color: blue;
  }
  #book2{
       text-align: left;
       color: blueviolet;
  }
 <p id="book1">西游记</p>
 <p id="book2">红楼梦</p>

3.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

.center{
     text-align: right;
     color: yellowgreen;
}
 <div class="center">水浒传</div>

你还可以指定只有特定的 HTML 元素会受类的影响。

div.center{
        text-align: right;
        color: yellowgreen;
}
<div class="center">水浒传</div>
<div class="center">三国演义</div>

HTML 元素也可以引用多个类。

 .center{
     font-size: 50px;
 }
.large{
     color: yellowgreen;
 }
  <p class="center large">lianggelei</p>

3.4 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

 *{
   text-align: center;
   color: aquamarine;
  }

3.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

 p,div{
     text-align: center;
     color: violet;
}

四. 组合选择符

4.1 后代选择器

后代选择器用于选取某元素的后代元素。

 div p{
     color: brown;
 }
 <div>
      <p>擎天柱</p>
 </div>

4.2 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

 div>p{
     color: brown;
 }
 <div>
       <p>擎天柱</p>（可以选择）
 </div>
 <div>
       <span><p>红蜘蛛</p></span>（不可以选择）
 </div>

4.3 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p{
     color: brown;
 }
 <div>
        <p>擎天柱</p>（不可以选择）
 </div>
 <p>救护车</p>（可以选择）
 <p>大黄蜂</p>（不可以选择）

4.4 后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

div~p{
     color: brown;
 }
 <div>
        <p>擎天柱</p>（不可以选择）
 </div>
 <p>救护车</p>（可以选择）
 <p>大黄蜂</p>（可以选择）

五. 属性选择器

5.1 [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

 a[target] {
      background-color: red;
 }
 <a href="https://www.baidu.com" target>百度</a>（选择）
 <a href="https://www.taobao.com" target>淘宝</a>（选择）
 <a href="https://www.jd.com">京东</a>（不选择）

5.2 [attribute=“value”]选择器

[attribute=“value”] 选择器用于选取带有指定属性和值的元素。

 a[target="_blank"] {
      background-color: red;
 }
  <a href="https://www.baidu.com" target="_blank">百度</a>（选择）
  <a href="https://www.taobao.com" target="_top">淘宝</a>（不选择）
  <a href="https://www.jd.com">京东</a>（不选择）

5.3 设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

 input[name="username"]{
            width: 200px;
            margin-bottom: 10px;
            background-color: green;
 }
 input[type="submit"]{
            width: 50px;
            margin-left: 50px;
            display: block;
 }
 <input type="text" name="username">
 <input type="submit">

六. CSS三大机制

6.1 CSS样式来源

CSS中的样式一共有三种来源：创作人员、读者和用户代理（浏览器）
权重排序：

（1）创作人员的样式 > 读者人员的样式 > 用户代理的默认样式

（2）标记为重要声明（!important）的读者样式 > 一切样式

6.2 CSS三大机制

CSS的三大机制是：特殊性[冲突]、继承、层叠。样式最终的呈现由层叠机制决定，但层叠与特殊性、继承又有关系。

6.2.1 特殊性

所谓的特殊性，其实是CSS样式一种计算声明权重的规则。

选择器类型：

ID	#id
class	.class
标签p
通用	*****
属性	[type=“text”]
伪类	:hover
伪元素	::first-line
子选择器，相邻选择器

权重计算规则:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值

注意：!important，权值为10000

重要性！important:有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

6.2.2 继承

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

继承的机制需要注意的点:

并不是所有的属性都可以继承，一般情况下，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。能被继承的属性大多数是和内容相关的

6.2.3 层叠

文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;

lerrel1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础 —css介绍+选择器讲解（入门学习笔记-超详细）

CSS指的是层叠样式表（CascadingStyleSheets）CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素CSS节省了大量工作。它可以同时控制多张网页布局。
复制链接

扫一扫