首页 > 其他分享 >CSS总复习（一）基础

CSS总复习（一）基础

时间：2023-03-31 09:55:08浏览次数：54  
标签：浏览器 复习 样式 元素 基础 选择器 CSS 属性

CSS是什么

CSS（层叠样式表）用来规定HTML文档的呈现形式（外观和格式编排）。CSS样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。

PS：书中有句话很nice：“笨蛋才会为完美的CSS方案纠缠不休”。因为一种效果的实现方式可能有很多种，你只要能实现，且代码写着舒服就行了。

有关CSS知识，参考：

HTML文档中使用css的三种方式

1、引用CSS文件，即外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML文档引入样式表时的媒体类型

当我们给页面添加样式表时，可以指定样式要应用的媒体类型。大多数情况下，我们使用screen类型。然而，我们还可以使用print类型来定义一个只在页面打印（或者用户使用打印预览功能）时才加载的样式表。media="print"如：

<link rel="stylesheet" href="print.css" type="text/css" media="print">

注意：可以用@import语句将样式从一个样式表导入另一个样式表。

2、直接在文档内利用<styel>标签写页面样式

当单个HTML文件需要特别样式时，就可以使用内部样式表。你可以在 head 标签里通过 <style> 标签定义内部样式表。

<head>
    <style type="text/css">
    	body { color: rgb(57, 57, 57); letter-spacing: 0pt; font-size: 14pt;"}
    	p {margin-left: 20px}
	</style>
</head>

3、内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性（style）。样式属性中可以包含任何 CSS 属性。以下示例代码显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">测试用代码</p>

页面元素样式的另外两个来源

每个元素都有一套浏览器呈现页面时要用到的CSS属性。对于每一个这种属性，浏览器都需要查看一下其所有的样式来源。前面已经讲过三种定义样式的方式（元素内嵌、文档内嵌和外部样式表），但是要知道，样式还有另外两个来源：

  • 浏览器样式，即默认样式。如<a>标签，如果你不对它进行任何的样式设置，那么他可能会在浏览器上显示为蓝色、带有下划线，鼠标放上去是手型的等，不同浏览器中，同一元素的默认显示效果可能不太一样。
  • 用户样式。大多数浏览器都允许用户定义自己的样式表，添加到这个文件中的任何样式都会被用于用户访问的所有网站。这类样式表中包含的样式称为用户样式。这个情况很少见，可以忽略。

浏览器要显示元素时求索一个CSS属性值的次序

明白了浏览器所要查看的所有样式来源之后，现在可以看看浏览器要显示元素时求索一个CSS属性值的次序。这个次序很明确：

(1) 元素内嵌样式（在HTML标签的style属性中定义的样式）；

(2) 文档内嵌样式（定义在style标签中的样式）；

(3) 外部样式（用link标签导入的样式）；

(4) 用户样式（用户定义的样式）；

(5) 浏览器样式（浏览器应用的默认样式）。

设想用户需要显示一个a元素。浏览器需要知道的一件事情是其文字应显示为哪种颜色。为了解决这个问题，它需要为CSS属性color找到一个值。首先它会查看所要呈现的那个元素是否具有一条设定了color值的元素内嵌样式。比如下面这种：

<a style="color:red" href="http://apress.com">Visit the Apress website</a>

如果不存在元素内嵌样式，那么接下来浏览器会看看是否有一个style元素包含着作用于那个元素的样式。比如下面这种：

<style type="text/css">
    a {
        color: red;
    }
</style>

如果不存在这样的style元素，那么浏览器接下来会查看用link元素载入的样式表。依次类推，直到找到一个color属性值或查完用户定义样式。在后面一种情况下，最终使用的将是浏览器默认样式中的值。

用重要样式调整层叠次序：

把样式属性值标记为重要（important），可以改变正常的层叠次序。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            a {
                color: black !important;
            }
        </style>
    </head>
    <body>
        <a style="color:red" href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

在样式声明后附上!important即可将对应属性值标记为重要。不管这种样式属性定义在什么地方，浏览器都会给予优先考虑。在上面代码中，就是第一个<a>标签的字体颜色不是红色，而是黑色。

如果同一个元素的最终的样式是根据之前的五种样式来源确定的，如果某个元素的样式在同一层次的来源中被重复定义，那么往往取后面定义的样式值，或者谁的选择器越详细就取谁的样式值。如下面这个场景：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            a.myclass2 {
                color:white;
                background:grey;
            }
            a.myclass1 {
                color: black;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

第二个<a>标签的颜色是黑色的。

样式属性值的继承

如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的这个样式属性值。

令人挠头的是，并非所有CSS属性均可继承。这方面有条经验可供参考：与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行实施继承，明确指示浏览器在该属性上使用父元素样式中的值。如下面代码中的<span>：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            p {
                color:white;
                background:grey;
                border: medium solid black;
            }
            span {
                border: inherit;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

css中的颜色

在CSS中设置颜色有好几种方法。最简单的办法是使用规定的颜色名称，或者设置红、绿、蓝三种颜色成分的值（十进制或十六进制）。设置颜色成分值时，十进制值以逗号分隔，十六进制值前面通常要加上一个#符号（例如#ffffff，它代表白色）。

比如：p{color:black/#000000/rgb(254, 2, 8)}

除了RGB，CSS3还支持HSL（Hue Saturation Lightness，色相、饱和度、亮度）颜色系统。

有人可能会问，为什么放着用了那么多年的可靠的十六进制颜色值不用，突然要使用HSL或RGB颜色值呢？HSL或RGB与十六进制值的区别在于，它们支持透明通道，可以让原来被元素挡住的东西透过来。

HSLA声明与标准的HSL声明类似，只是必须声明值为hsla（在hsl后面加个a），同时再多指定一个不透明度值，取值范围为0（完全透明）到1（完全不透明）。比如：

color: hsla(359, 99%, 50%, .5); color: rgba(255, 255, 255, 0.8)

CSS3也支持设置元素的opacity属性，取值范围也是0到1（.1表示10%）。

与RGBA和HSLA不同，对元素设置opacity影响整个元素，而RGBA和HSLA则只影响元素特定的方面，比如背景。这样就可以实现元素中不透明的文字和透明的背景。

CSS中的长度

单位很多，一般记住px这个单位就得了。主流浏览器将1像素视为1英寸（2.54CM）的1/96即0.26毫米。

顺便提一下，在CSS中，对于以0开头的数值，可以将0省去。如0.14s就可以写成.14s。

浏览器厂商前缀

不同浏览器对同一个CSS属性的支持情况可能不同，某个属性可能这个浏览器支持那个浏览器不支持，为了解决这个情况，可以在定义CSS样式的时候，加上特定前缀，这样浏览器可以根据特定前缀来取样式：

于是，每个新特性要在所有浏览器中生效，就得写好几遍。首先是带各家厂商前缀的，最后一行才是W3C标准规定的。

p {
    -webkit-border-image: url(bordergrid.png) 30 / 50px;
    -moz-border-image: url(bordergrid.png) 30 / 50px;
    -o-border-image: url(bordergrid.png) 30 / 50px;
    border-image: url(bordergrid.png) 30 / 50px;
}

image-20210803175601079

工具推荐

当使用试验性CSS功能时，记得使用工具而不是手动去添加相关的浏览器私有前缀。这确保了跨浏览器的兼容性，也防止你添加不再需要的前缀。完成这项任务的推荐工具：Autoprefixer（https://github.com/postcss/autoprefixer）

盒模型

image-20210803175900079

元素盒子有两个部分是可见的：内容和边框。内边距是内容和边框之间的空间，外边距是边框和页面上其他元素之间的空间。理解这四部分之间的相互关系对于高效利用CSS至关重要。元素还可以包含其他元素。这种情况下，父元素的内容盒子称为子元素的块容器（container block），通常称为容器。

重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

一些盒子的属性

overflow：设置内容横向和竖向溢出盒子时处理方式的简写属性
clear：设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素
display：设置元素盒子的类型
float：将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界
visibility：设置元素的可见性
position：设置元素的定位方法
z-index：设置定位元素的堆叠顺序

CSS3选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

注意：HTML5规范不鼓励我们使用类名来定义表现内容，应尽量使用css选择器来定位目标元素，进而对其进行css设置。

0、选择器参考，详见：

CSS 选择器 | 菜鸟教程 (runoob.com) https://www.runoob.com/cssref/css-selectors.html

上面这个，应该每天读两遍，多熟悉下对流畅的写CSS或JS都有好处。

1、使用:nth-of-type给表格行设置条纹

nth-of-type选择器通过一个公式或关键字，来找出特定类型的所有n个元素。

例如：我们希望表格相邻行有不同的颜色，即斑马纹那种效果，最简单的方式就是找出所有的偶数行，然后设置它们的背景颜色。之后，再对所有的奇数行做相同的处理。CSS3针对这种具体场景，提供了even和odd关键字。

tr:nth-of-type(even){
    background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
    background-color:#ddd;
}

上述代码中，选择器的意思是：“帮我找出每个偶数行，并给这些行设置颜色。然后再找出所有的奇数行，也给它们设置颜色。”这种方式不用依赖脚本处理，也不用给表格行添加额外的类名，就可以实现表格的“斑马纹”效果。

2、nth-child选择器查找某个元素的子元素

如果打算选择表格所有行，我们可以这么做。

table tr:nth-child(n)

不使用倍数，也不需要偏移量。

然而，如果这时候我们想获取除第一行以外的所有行，这种情况下，将使用带偏移量的选择器。

table tr:nth-child(n+2)

计数器是从0开始计算的，在这里偏移量为2，意思是不从表格第一行开始计算，而是从第二行开始算起。

JavaScript和jQuery都是从0开始计数的。换句话说，JavaScript和jQuery中的1实际上代表第二个元素。但CSS3则从1开始计数，因此1就是第一项。

如果我们想隔行选择表格行，则需要用到倍数2，即2n。

table tr:nth-child(2n)

如果要每隔两行选择一行，则使用3n。

你也可以使用偏移量，以便向前选择表格行。下面的公式将找出从第四行开始的相隔行。

table tr:nth-child(2n+4)

因此，根据以上说明，我们可以使用以下规则右对齐第一列以外的所有列。

td:nth-child(n+2), th:nth-child(n+2){
    text-align: right;
}

在nth-child后面使用(odd)和(even)分别选择奇数和偶数个元素

表示HTML表格中的奇数行：

tr:nth-child(odd)

表示HTML表格中的偶数行。

tr:nth-child(even)

3、last-child获取元素组中的最后一个子元素

将表格最后一行文字加粗显示：

tr:last-child{
    font-weight: bolder;
}

将表格右下角的单元格字体设为24px：

tr:last-child td:last-child{
    font-size:24px;
}

4、nth-last-child选择器用于反向遍历子元素，以最后一个子元素为起点

这使得该选择器很容易获取元素组中的倒数第二个元素

tr:nth-last-child(-n+3) td{
    text-align: right;
}

5、一些CSS选择器举例：

  • 如果你想选择属于多个类的元素，可指定类名（不同类名之间用句点隔开）。例如，span.class1.class2会选择同时指定class1和class2的元素。
  • img[alt] ，属性名选择，选择任何包含alt属性的元素
  • input[name=”userTel”], 属性值选择，选择所有name属性值为userTel的input元素。
  • 后代选择器：p img ，选择所有p标签里的img元素。
  • div>p，选择所有div元素中的p元素，且该p元素是div的直接子级，div里的div里的p不在选择之列。
  • div.goodsTitle+a，选择类名为goodsTitle的div后面的第一个同级的a标签。
  • div.goodsTitle~a，选择类名为goodsTitle的div后面的所有同级的a标签。
  • .a-div:not(.not-me) , 选择有.a-div类名的元素，且所有这些当中不包含.not-me类的元素

伪类和伪元素

详见：伪类和伪元素 - 学习 Web 开发 | MDN (mozilla.org)

image-20210803183821457

伪类用于定义元素的特殊状态下的样式。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
  • 等等

伪类通常在css中，结合冒号跟着元素标签名使用，例如：

div:hover {
  background-color: blue;
}

CSS伪元素是用来添加一些选择器的特殊效果。CSS不仅可以设置文档中已存在元素的样式，也能够通过:before与:after伪元素，以及content属性向文档中注入内容。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

参考：

  • 《HTML5权威指南》
  • 菜鸟教程

更新于：2023-3-31

标签：浏览器,复习,样式,元素,基础,选择器,CSS,属性
From： https://www.cnblogs.com/idasheng/p/17275292.html

相关文章

  • 纯CSS3实现多行文本截断
    纯CSS处理多行文本展开和收起，直接上代码和效果图1<html>2<header>3<style>4.wrap{5position:relative;6padding:5px25px25px;7border-radius:5px;8box-shadow:05px20px3px#cc......
  • css实现横向滚动文字
    css如何做横向滚动文字在css中，想要实现横向滚动的文字，需要利用animation属性和@keyframes规则来实现元素缩放的动画效果，通过@keyframes规则，能够创建动画。创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套CSS样式。以百分比来规定改......
  • 后端基础——congestion
    congestion，中文名是拥塞。这是一个反应设计绕线资源一个重要指标参数。通常在还没有finalrouting的阶段使用，拥塞程度越高，一般意味着后期绕线越容易出现metalshort,spacingviolation等drc。  1，通常分为以下几类congestion（1）ChannelCongestion：此种现象比较常见，也比较简单，......
  • linux设备树-基础介绍
    一、介绍1.1为什么引入设备树我们首先回顾一下我们之前学习过的驱动程序。比如：linux驱动移植-lcd驱动基础；在arch/arm/plat-samsung/devs.c文件中定义了platform设备s3c_device_lcd，在arch/arm/mach-s3c24xx/mach-smdk2440.c文件定义了platform数据smdk2440_fb_info。linux驱动......
  • python基础学习总结
    python关键字也是以下划线或者字母开头。python关键字可以通过导包获取关键字如下： ['False','None','True','and','as','assert','async','await','break','class','continue'......
  • 基本背包问题复习(01背包,完全背包,多重背包,分组背包)
    背包问题，本质上就是给几种物品，每个物品有体积有价值，可能有个数限制有一个容量有限的背包，在背包能装下的前提下，能装的最大价值是多少 背包问题一般分为这几种：01背包：每件物品只有一个完全背包：每件物品有无限个多重背包：每件物品有Si个（有限个）分组背包：所有物品被分为多个组，每一组......
  • 前端基础小复习
    目录1.HTTP协议四大特性2.HTTP协议数据传输格式3.状态码4.基本选择器会前端基础在IT行业很有帮助，无论是做爬虫数据分析，解析数据，做数据清洗都有帮助，因为我准备做数据获取过程中发现浏览器的HTML看不懂，直接影响了我的工作进度，因此直接暂停，网页结构有三个部分组成的即HTML、CSS......
  • 03-网络安全-web渗透环境搭建（基础篇）
    01--所需系统环境：虚拟主机系统部署（vmware，虚拟主机创建、虚拟主机网络配置（桥接，便于网络中多个主机都能访问虚拟主机）、虚拟软件功能，快照、克隆、镜像文件加载，ova文件制作）（模拟被攻击者、攻击者、通讯方）windows2003/2008windows 7/10linux系统  kail/contos02--网站服务架......
  • MySQL数据库怎么创建表？MySQL数据库基础知识
    MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发，目前属于Oracle旗下产品。MySQL最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的RDBMS(RelationalDatabaseManagementSystem，关系数据库管理系统)应用软件之一。MySQL是一种关联数据库管理系统，关联数据库......
  • Python计算机视觉基础实验3-显著性检测(HC&FC)
    一、实验基础图像显著性检测图像的显著性是指对于给定一副真实世界中的场景图像，人们会自动地识别出感兴趣区域，忽略掉不感兴趣的区域，即将注意力集中在图像中某些显著的部分区域。图像的注意预测，也称视觉显著性检测，指通过智能算法模拟人的视觉系统特点，预测人类的视觉凝视点（就是全神贯......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99