理解CSS（上）| 青训营笔记

Melan
89 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

本次笔记主要为CSS基础知识

一、什么是CSS

1、定义

image.png

上次笔记已经讲到，页面内容主要以上上部分构成

CSS，即Cascading Style Sheets，用来定义页面元素的样式

  • 设置字体颜色
  • 设置位置和大小
  • 添加动画效果

2、CSS语法

632877C9-2462-41D6-BD0E-F7317E4C42AC.jpg 图片来源：CSS 语法 | 菜鸟教程 (runoob.com)

CSS规则主要有两个部分组成：选择器，一条或者多条声明。 选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

3、CSS的引入

3.1、内联

<h1 style="color: red;">内联</h1>

这种方式的耦合度很高，不利于页面的后期维护，建议尽量不使用这种方式

3.2、嵌入

<style>
        body {
            background-image: url(./4kbdimg.png);
            background-size: 100% 100%;
            background-attachment: fixed;
            background-color: lightgreen;
            background-repeat: no-repeat;
        }
    </style>

在页面内使用style标签，然后在标签里写CSS代码 这种方式可以在代码量较少的情况下使用，代码量很多的情况下还是建议使用外链的方式

3.3、外链

<link rel="stylesheet" href="./7.21-2.css">

这种方式是通过link标签将CSS文件引入，这样我们在新的CSS文件里写的CSS代码就可以定义HTML文件的样式啦

4、CSS的工作原理

image.png CSS的简容工作原理如图所示

二、CSS选择器

1、选择器的作用

找出页面内的元素，以便给他们设置样式 选择方式有多种

  • 按照标签名，类名或者id

  • 按照属性

  • 按照DOM树结构

2、几种选择器

2.1、通配选择器

* {
  color: red;
  font-size: 20px;
}

一个 * 表示选择所有

2.2、标签选择器

p {
  color: red;
  font-size: 20px;
}

此时所有的p标签将被选中

2.3、类选择器

在HTML文件中我们可以给一些标签加上class的属性

        <div class="btn">1</div>
        <div class="btn">2</div>
        <div class="btn">3</div>

然后用类选择器选中这些元素，定义他们的样式 格式为 .类名

.btn {
  color: red;
  font-size: 20px;
}

2.4、id选择器

<div id="btn">1</div>

#btn {
  color: red;
  font-size: 20px;
}

与类选择器不同的是，类可以设置给多个标签，id通常为唯一的

2.5、属性选择器

当标签具有某种属性时，我们可以通过属性选择器将其选中

<a href=""></a>

a[href] {color:red;}

此时具有href属性的标签将会被选中

3、伪类选择器

伪类选择器是不基于标签和属性的选择器

伪类选择器主要分为两类

状态伪类

a:hover{
  color: red;
  font-size: 20px;
}

当a标签，鼠标放上去的时候生效

结构伪类

<div>1</div>
<div>2</div>
<div>3</div>

div:nth-child(1) {
    width: 396px;
    height: 96px;
    background-color: rgb(214, 200, 200);
}

选择出第一个div

4、选择器的组合

在使用选择器的时候，可以将组合器进行组合，达到一次选择多个或多种元素的作用

规则如下图所示

image.png

仅仅定义多个不用的选择器时直接用","分隔

a:hover,h1,h2,li,p{
  color: red;
  font-size: 20px;
}

这样 a:hover,h1,h2,li,p都会被选中

三、CSS的颜色表示

在CSS中有两种颜色表示方式，小白只用过第一种QAQ

RGB表示

image.png

RGB分别表示红绿蓝三原色，三原色的组合可以表示所有颜色 有两种写法:

16进制写法和rgb(x,y,z)

h1 {
  color: red;
  color:#3f2f1f;
  color:rgb(23,25,24);
}

或者直接用英文单词表示即可

HSL表示

image.png

如上图所示，颜色有新的（对于我来说是新接触的）三个值衡量，色相，饱和度，亮度

两种颜色表示各有优势，在合适的情况下使用即可

透明度

透明度：alpha

或许用“不透明度”来形容更为准确，数值范围为0~1，数值越小越透明

直接在rgb或者hsl表示的后面添加即可，由于浏览器的差距问题，具体问题具体解决

四、字体

4.1、字体系列-font-family

p{
    font-family:"Times New Roman", Times, serif;
}

像示例那样，设置字体系列，在设置时字体列表最后写上通用字体族，英文字体放在中文字体前

此外还可以使用Web Fonts引入其他的字体

4.2、字体大小-font-size

image.png

通过以上几种方式进行设置

4.3、字体粗细-font-weight

四种关键字

  • normal
  • lighter
  • bold
  • bolder

设置数值100~900，每个数值不一定生效，得看字体系列是否支持

五、其他文本样式

行高-line-height

image.png

文本对齐-text-align

举例：

h1 {
    text-align:center;/*居中*/
} 
p.date {
    text-align:right;/*右对齐*/
} 
p.main {
    text-align:justify;/*两端对齐*/
}

字间距-spacing

字符之间间距：letter-spacing

单词之间间距：word-spacing

缩进-text-indent

p {text-indent:50px;}

对于中文的话可以设置em为单位，2em刚好是两个汉字长

文字修饰-text-decoration

多用于去除a标签的下划线

a {
    text-decoration:none;/*无修饰*/
    /*underline 下划线 line-through 删除线 等等还有其他的*/
}

留白-white-space

增加单词间的留白空间

p
{ 
	word-spacing:30px;
}

六、调试CSS

在开发的过程中难免会遇到一些问题，这时我们可以使用浏览器的调试功能帮助进行开发工作 方法如下

image.png

或者 按f12之后点击这个 image.png

七、总结

以上就是本次笔记的全部内容，CSS的内容很多，需要我们不断去尝试，不断是探索，从而到达更加熟练的效果，能够写出精美的页面来。继续前行！

参考

菜鸟教程，MDN，青训营资料

avatar
文章
阅读
粉丝