3day-css基础，选择器

最新推荐文章于 2024-11-01 12:26:05 发布

DaB210

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量657

点赞数 12

分类专栏： HTML&CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/DaB210/article/details/137167739

版权

HTML&CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

css基础

称作层叠样式表，是Cascading Style Sheets 的缩写。是一种用来表现HTML等文件的计算机语言。他的作用就是为了给HTML穿上衣服。当然也不仅仅只是添加一些简单样式，更多的是负责网页的布局、框架等等内容。

历史

94年：web开始流行，css的第一个提案发布了，同年css诞生
01年：微软发布IE6浏览器，由于IE6有一套自己的解析渲染体系，最终成为前端开发的一大绊脚石
14年：微软发布IE10，情况开始好转
至今用户的视线开始从pc端转向了移动端，开发人员又要面临大量机型的适配调整，为了解决这些问题，大批的css预处理工具诞生。
现在较流行的预处理工具：sass、Less，后处理器：postcss、Autoprefixer等等。

css语言特点

表现与结构相分离
- 将样式部分写到css文件中，让HTML独立负责页面结构，使HTML更加清爽简洁；
简化设计开发
- css具有完善的继承和丰富的层叠效果，在页面中子元素可以很好的继承父元素的css属性，同样也可以通过叠加样式去设置不同的效果
提高页面浏览速度
- 页面的css样式效果由独立的css引擎渲染，就像开了双核处理器一样，加载速度显著提升
支持多种设备
- css可以支持多种设备，比如：手机、PDA、打印机、电视机、游戏机等等
易于维护和改版
- 表现与结构分离后，只要修改css文件中对应的代码，那么整个站点的所有页面都会随之发生变动

css三大特性

继承性：
- 子标签会继承父标签的某些样式，如：文本颜色、字号。恰当的使用继承可以简化代码。降低css样式的复杂性。
- 子元素可以继承父元素的样式：text-\font-\line-这些属性开头的可以继承，以及color属性
层叠性：
- 相同选择器给同一元素设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要就是解决样式冲突的问题
- 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式（权重相同时），样式不冲突，不会重叠
优先级（权重）：当同一个元素指定多个选择器设置样式，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行

基本语法结构

一个css规则表由两个基本部分组成：选择器和声明块，声明块中包含对应的属性和属性值。声明块里可以包含多个属性

Selector {proerty:value}
    |        |      |
  选择器     属性   属性值

    p    { color:  red;}

引入方式

行内样式（內联样式）不太建议使用的方法
因为非常耗时且不易于维护，且让css失去了它的优点—集中样式管理。同时也将html和css耦合在一起。
用处：由于行内样式权重高，如果在项目上线阶段，需要应急处理，可以使用行内样式或只想为单个元素添加少量的样式，不值得去使用外联或页面，也可以使用行内样式解决。

通过标签中的style属性设置行内样式

<p style="color: green">
      这是一个例子
    </p>

除了body以外的标签，所有的HTML标签都能设置style属性。

页内样式（嵌入式样式表）
在页面内部书写css，将css代码同一放置在style标签中，通过选择器，将规定的样式和相应的标签建立联系
通常会将style标签放置在head标签内，进行提前加载

    <style>
      span{
        color: red;
      }
    </style>

外联样式(外部样式表)
通过独立的.css后缀文件来书写样式，将表现与结构完全分离；并通过link标签引入到HTML页面的head标签中。web浏览器遇到link标签时，会自动查找并加载指定的样式表。并使用样式表中的样式来渲染文档

<link rel="stylesheet" href="./index.css">

其中，href属性定义外部样式表的地址，可以使用相对路径或绝对路径

选择器

<p>
  <font color="pink">
    这是一个例子
  </font>
</p>
<p style="color: pink;">
  这是另一个例子
</p>

基础选择器

元素选择器

元素选择器能够大范围的将所有指定元素样式进行同一修改

<style>
  p {
    color: pink;
    font-size: 80px;
  }
</style>
<body>
  <p>这是一个例子</p>
  <p>这是一个例子</p>
  <p>这是另一个例子</p>
</body>

群组选择器

元素选择器只能让我们把样式作用在同一类型的元素上，如果想把这个样式作用在另一个不同类型的元素上，则需要做重复操作，造成代码冗余。

p,
span {
  color: pink;
  font-size: 80px;
}

群组选择器的规则，就是在元素选择器（也可以是类名选择器、id 选择器等等）之间以英文逗号分隔开来。

通配符选择器

能够匹配到所有的元素。（一般会用在简易的重置样式上或者用于设置页面中统一文字大小）
通过*号表示通配符选择器

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  font-size: 14px;
}

类名选择器（class 选择器）最常用

.warning {
  font-size: 30px;
}
.red {
  color: red;
}

<p>我不是警告</p>
<p class="warning red">警告警告</p>
<span class="warning">我也是警告，但我不想变红</span>
<span class="red">我是红色，但我字体不想变大</span>

只让带有 warning 类名的 p 标签样式生效

p.warninng {
  font-size: 30px;
}

让带有 warning 和 red 类名的元素样式生效

.warning.red {
  font-size: 30px;
  color: red;
}

ID 选择器

语法：与类名选择器相似，通过在目标元素上定义 id 属性之后写上自定义 ID 名称，然后在样式表中通过#加上对应的 ID 名称，来为目标元素设置样式

#red {
  color: red;
}

根据 HTML 规范，同一个 ID 值，在一个页面上只能出现一次（不可以像类选择器一样重复利用）
用处：一般用于配合 JS 获取页面元素进行操作或可用于样式的应急处理。

优先级

!important
行内样式
ID 选择器
类名选择器
元素选择器
通配符选择器
!important > 行内 > ID > class > 元素 > 通配符

关系选择器

子代选择器

语法：使用右尖括号>分隔，来选择子代的某个元素

div > span {
  color: red;
}

后代选择器

语法：使用空格分隔开，来选择后代的某个元素

div p {
  color: green;
}

兄弟选择器

语法：使用波浪号～来分隔，选择与该元素同级的元素.且兄弟元素的子元素也会被选中(并不准确)

h1 ~ p {
  border: 1px solid #000;
}

相邻选择器

语法：使用+号来分隔，选择与该元素相邻的元素
注意：相邻选择器只会向下去相邻，而不会往上相邻

p + p {
  color: blue;
}

复杂选择器

伪类选择器

伪类选择器大致分为两种

结构类的伪类选择器：他可以选择到具体的某一个元素；
与用户界面相关的伪类选择器：他能代表某个元素的状态

与用户界面相关伪类选择器

<style>
  a:link {
    color: red;
    /* 链接未访问 */
  }
  a:hover {
    /* 鼠标悬停时触发 */
    color: skyblue;
  }
  a:visited {
    color: green;
    /* 链接已访问 */
  }
  a:active {
    /* 链接被点击时触发 */
    color: blueviolet;
  }
  div {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  div:hover {
    background-color: antiquewhite;
  }
  div:active {
    background-color: black;
  }
</style>

link：当链接未访问时应用的样式
visited：链接被访问过后应用的样式
hover：鼠标悬停在元素上时，应用的样式
avtive：元素被点击时，应用的样式
focus：元素成为输入焦点时应用的样式
checked：当单选或复选框被选中时应用的样式（目前兼容性较差，只在欧朋浏览器中有效果）

结构类选择器

匹配元素中第一个标签为 x 的子元素
first-child：匹配元素中第一个与 X 对应的元素，如果对应则应用样式，否则无事发生。

div span:first-child {
  color: red;
}

匹配元素中最后一个为 X 的子元素
last-child：匹配元素中最后一个与 X 对应的元素，如果对应则应用样式，否则无事发生。

div span:last-child {
  color: red;
}

匹配第一个某种元素
first-of-type:匹配指定元素的第一个

div span:first-of-type {
  color: red;
}

匹配最后一个某种元素
last-of-type：匹配指定元素的最后一个

div p:last-of-type {
  color: red;
}

匹配第 n 个标签为 x 的元素
nth-child：匹配元素中第 n 个与 x 相对应的元素，如果对应则生效样式，否则无事发生

div p:nth-child(2) {
  color: red;
}

匹配奇数位或偶数位的元素

/* 偶数位的元素 2n */
ul li:nth-child(even) {
  color: red;
}
/* 奇数位的元素 2n+1 */
ul li:nth-child(odd) {
  color: red;
}

倒叙匹配第 n 个为 x 的元素
nth-last-child：倒叙匹配元素中第 n 个与 x 相对应的元素，如果对应则生效样式，否则无事发生

ul li:nth-last-child(8) {
  color: red;
}

匹配指定元素的第 n 个和倒叙匹配指定元素的第 n 个
nth-of-type:匹配指定元素的第 n 个
nth-last-of-type:倒叙匹配指定元素的第 n 个

匹配第二个 span 元素和倒数第二个 p 元素

div span:nth-of-type(2),
p:nth-last-of-type(2) {
  color: red;
}

伪元素选择器

为了实现特定的效果，会在文档中插入虚构的元素。有四个基本的伪元素，分别用于装饰元素的首字母、首行以及创建和装饰前置和后置内容

装饰首字母::first-letter
用于装饰任何非行内元素的首字母，或者开头的标点符号

p::first-letter {
  color: red;
  font-size: 200%;
}

这个规则相当于浏览器以一个虚构的元素包裹起了每个 p 元素中的首字符。

<p>This is a p Element</p>
<!-- 类似如下结构 -->
<p><p-first-letter>T</p-first-letter>his is a p Element</p>

装饰首行 ::first-line
用于装饰元素首行文本

p::first-line {
  color: red;
  font-size: 200%;
}

需要注意，由于首行的长度首很多因素的影响，例如字号、自间距、父级容器的宽度等等。所以首行到底有多少个词或字能被应用样式，完全是动态改变的。

注意事项：

这两个伪元素，只能应用于块级元素上。例如标题或段落，而不能在行内元素上生效。
浏览器识别到长单词时，不会进行换行
前置和后置内容元素 ::after ::before
::after ::before 伪元素可以直接将内容插入到元素的开头或结尾处

h2::after {
  content: "";
  color: green;
  width: 10px;
  height: 10px;
  background-color: green;
  display: inline-block;
}
h2::before {
  content: "";
  color: red;
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
}

除了可以在content中添加内容，也可以通过边框、背景、宽高去生成一个自定义的图形，但是要注意，伪元素属于行内元素，不允许设置宽高，要自定义图形时，需改变元素的显示模式，且content属性必须存在。

样式重置

由于HTML与css并不是同时出现的，HTML创造者在创建标签时，为标签设置了一些样式，这些样式就称为默认样式

随着css发展，我们已经可以通过css控制所有标签的样式，那么之前的默认样式反而成为了累赘，如果不清楚，可能会在布局时产生影响，所以我们需要清除掉它。

样式重置文件

简易样式重置

*{
  margin:0;
  padding:0;
  text-decoration:none;
  list-style:none;
}

实际开发中使用的样式重置

html,body,div~~~~~{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
~~~~~~~
}

样式重置文件网址：https://meyerweb.com/eric/tools/css/reset/

DaB210

关注

12
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录