CSS入门学习第一天 | 青训营笔记

玛卡巴卡111
170 阅读5分钟

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

一、什么是CSS？

CSS是层叠样式表(Cascading Style Sheets)的简称，也称为CSS样式表或级联样式表。 CSS是一种标记语言，主要用于设置HTML页面中的文本内容、图片外形以及版面的布局和外观显示样式。

CSS最大的价值：由HTML专注去做机构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。

二、CSS声明规则

由两个主要的部分构成：选择器以及一条或多条声明。 示例：

p {/*这里P是选择器*/
   color: red;
   font-size: 16px;
   /*color和font-size是属性，后面跟的是值，每一条语句都是一个声明*/
}

1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式；

2.属性和属性值以键值对的形式出现；

3.属性是对指定的对象设置的样式属性，例如文字大小、文本颜色等等；

4.属性和属性值中间用英文符号 ':'分开。

三、选择器

选择器就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

选择器分为基础选择器和复合选择器两个大类，其中基础选择器是由单个选择器组成的，基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。

1.标签选择器：

标签选择器(元素选择器)是指用HTML标签名作为选择器，按标签类名分类，为页面中某一类标签设置统一的样式。

语法：

标签名{ 
     属性1: 属性值1; 
     属性2: 属性值2; 
     属性3: 属性值3; 
     ... 
 }

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

2.类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法示例：

.red {
      color: red;
}

<div class='red'>变红色</div>
/*结构需要用class属性来调用class类*/

注意：类选择器使用'.'（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。命名尽量要有意义，让别人一眼就知道这个类名的目的。

类选择器是开发最常用的。同时，class属性可以拥有多个类名，类选择器都可以调用。

3.id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。以HTML元素的id属性来设置id选择器，CSS中id选择器以'#'来定义。

语法示例：

#red {
    color: red;
}
/*将id为red的元素内容设置为红色*/

注意：id属性只能在每个HTML文档出现一次，id选择器只能调用一次。

4.通配符选择器

通配符选择器使用'*'定义，它表示选择页面中所有元素(标签)。

语法：

* { 
    属性1: 属性值1; 
    ... 
}

通配符不需要调用，自动就给所有的元素使用样式。

四、字体属性

1.font-size设置文字的字号，常用单位px像素，谷歌默认字体大小是16px,一定要跟上单位。示例：

p{
   font-size: 20px;
}

注意：标题标签比较特殊，需要单独指定文字大小。

2.font-family设置文字的字体样式。示例：

p{
   font-family: 'Microsoft YaHei';
}

3.font-weight设置字体的粗细。示例：

p{
   font-weight: 700;
}

image.png 实际开发中，更倾向于数字表示粗细。

4.font-style设置字体的样式。示例：

p{
   font-style: normal;
}

image.png 实际开发中，不经常使用斜体，反而要给斜体标签<em>、<i>改为不加斜体。

5.字体复合属性：示例：

p {
   font: font-style font-weight font-size/line-height font-family
}

注意：使用此属性时，必须按照上列属性的顺序书写，不能跟换顺序，各个属性间用空格隔开。 不需要设置的属性可以省略，但是必须保留font-size和font-family属性。

五、文本属性

1.color设置文本颜色，通常写16进制。

image.png

2.text-align设置文字水平的对齐方式

image.png

3.text-indent设置文本缩进，首行缩进两个字的距离：text-indent: 2em。

image.png

4.text-decoration文本修饰

image.png

5.line-height设置行高，控制行与行之间的距离。

image.png 注意：行间距=上间距+文本高度+下间距

六、CSS引入方式

1.内部样式表

内部样式表是写到html页面内部，将所有的CSS代码放到一个<style>标签里。 示例：

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

理论上<style>标签可以放在HTML文档的任何地方，当一般会放在<head>标签中。

2.行内样式表

行内样式表就是在元素标签内部的style属性里设定CSS样式。适合简单的样式。 示例：

<div style="color: red; font-size: 20px;">人生苦短，及时行乐</div>

3.外部样式表

样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。 示例：

<link rel="stylesheet" href="CSS文件路径">

image.png 外部样式表是开发中最常用的方式。

结束语

这是CSS入门学习的第一天，我学习跟的黑马的入门教程视频，视频链接：www.bilibili.com/video/BV14J… 笔记到这就结束了。欢迎观看的各路大佬批评、讨论和指正。我的QQ号：2531549812，有问题欢迎联系哦。

avatar
文章
阅读
粉丝