CSS学习总结

最新推荐文章于 2024-07-19 19:08:32 发布

Charondown

最新推荐文章于 2024-07-19 19:08:32 发布

阅读量163

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Charondown/article/details/114807205

版权

CSS学习总结

开发工具与浏览器的选用
CSS基本内容
关于CSS使用过程中的思考

开发工具与浏览器的选用

开发工具	浏览器
Vs_Code	Chrome

CSS基本内容

CSS基本介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 特点

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

1、丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4、页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

5、层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

6、权重

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：
specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值重要的	∞ 无穷大？

关于CSS使用过程中的思考

一、CSS和HTML的结合方式有3种：

行内样式：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式表：在页面的head里采用<style>标签。范围针对此页面。
引入外部样式表css文件的方式。这种方式又分为两种：
1、采用<link>标签。例如：<link rel = “stylesheet” type = “text/css” href = “a.css”></link>
2、采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签,但是可以写import语句。

二、关于学习盒子模型的思考

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

注意： 两个相邻的盒子之间的距离由外边距(margin)更大的决定，如果这两个盒子的外边距(margin)相同，则会发生叠加而非扩大。

比如: 两个相邻盒子的外边距(margin)均为20px，那么它们之间的距离不是40px，二是20px。

三、选择器的选择与使用

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
（3）尽可能地选择class选择器，除非特殊情况下使用id选择器。

因为id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

1、三种基本选择器的区别：

标签选择器针对的是页面上的一类标签。
ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
类选择器可以被多种标签使用。

2、伪类选择器

对于<a>标签，其对应几种不同的状态：

link：超链接点击之前
visited：超链接点击之后
focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时

CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接
动态伪类：针对所有标签都适用

(1) 静态伪类：

用于以下两个状态：

link：超链接点击之前
visited：超链接点击之后

注意：上面这两个状态只能使用于超链接。

eg:

  <style type="text/css">
  /*
    伪类选择器：静态伪类
  */
   /*
    让超链接点击之前是红色
   */
    a:link{
        color:red; 
    }
    /*
    让超链接点击之后是绿色
    */
    a:visited{
        color:green; 
    }
 
  </style>

效果如下：
访问过后
访问之前

a{}和a:link{}的区别：

a{}定义的样式针对所有的超链接(包括锚点)
a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

（2）动态伪类:

用于以下几种状态：

focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时

注意：上面这三种状态针适用于所有的标签。

eg:

<style type="text/css">
  /*
    伪类选择器：动态伪类
  */
 
   /*
    让文本框获取焦点时：
    边框：#FF6F3D这种橙色
    文字：绿色
    背景色：#6a6a6a这种灰色
   */
    input:focus{
        border:3px solid #FF6F3D;
        color:white;
        background-color:#6a6a6a;
    }
 
    /*
    鼠标放在标签上时显示蓝色
    */
    label:hover{
        color:blue; 
    }
 
    /*
    点击标签鼠标没有松开时显示红色
    */
    label:active{
        color:red; 
    }
 
  </style>

效果如下：

点击之前
点击之后

3、后代选择器与直接后代选择器

1.后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。

参见如下代码：

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

段落1、2、3都将有黄色的背景，而段落4、5没有。

2.子选择器

也称为直接后代选择器，以>作为分隔，如：.hehe > p 代表在有.hehe类的元素内的直接<p>元素。

参见如下代码：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="hehe">
    <p>Paragraph 1 in the div <div class="hehe"></div></p>
    <p>Paragraph 2 in the div <div class="hehe"></div></p>
    <span>
      <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div <div class="hehe"></div></p>
  <p>Paragraph 5. Not in a div <div class="hehe"></div></p>
</body>
</html>

虽然段落3在.hehe类中，但它的直接父元素是span，不是.hehe的直接后代，所以不能选择。只有段落1、2有黄色背景。

注意： 如果两个选择器用，分隔会使选择器失去正常的功能。

Charondown

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结

CSS学习总结开发工具与浏览器的选用CSS基本内容CSS基本介绍CSS 特点丰富的样式定义易于使用和修改多页面应用页面压缩层叠CSS特殊性(Specificity)开发工具与浏览器的选用开发工具浏览器Vs_CodeChromeCSS基本内容CSS基本介绍层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配
复制链接

扫一扫