CSS 学习笔记（一）

作者：lxmoe

2022-11-07
辽宁
本文字数：1198 字
阅读完需：约 4 分钟

`Css`基础

继 HTML 学习后，我又进入了css的学习，刚开始我并不知道css是什么东西，直到前端的学长告诉我css的主要作用就是美化网页，比如说设置文本字体、大小、图片边框、边距、排版等，它也是一种标记语言，而他的功能却是HTML很难做到的。

Css 规范

“无规矩，不方圆”,css也要遵从一定的规则，他的规则主要由两个主要部分构成：选择器以及一条或多条声明。比如：

<html>  <head>    <style>      h3 {       color: white;        fontsize:15px;      }    </style>  </head></html>

复制代码

代码规范：代码采用展开格式；在属性值前面，冒号后面，保留一个空格；在选择器和大括号中间保留空格；尽量用小写字母；

Css 选择器

选择器分为基础选择器和复合选择器两大类。

基础选择器

基础选择器分为：标签选择器、类选择器、id 选择器和通配符选择器。

标签选择器

标签选择器使用HTML标签名称作为选择器，为某一类标签添加CSS样式，但是不可以设计差异化样式

类选择器

如果想要差异化单独选一个或者某几个标签，我们就要用到类选择器,基本格式如下：

<html>  <head>    <style>    .hot {       color: white;      }    </style>  </head>  <body>       <p class="hot"> 文本内容 </p>  </body></html>

复制代码

我们可以在“."后进行自定义类名，不要使用纯数字、中文等命名，命名要有意义，让别人一目了然，可以在网上查找一些 web 前端开发命名规范,我们可以简单记为：样式.定义，结构 class 调用。

接下来我们用类选择器来一波实战吧：

<html>    <head>        <title>让我们用类选择器画三个盒子吧</title>        <style>            .pink{                width:50px;                height:50px;                background-color:pink;            }            .purple{                width:50px;                height:50px;                background-color:purple;            }        </style>    </head>    <body>        <div class="pink">粉色</div>        <div class="pink">粉色</div>        <div class="purple">紫色</div>    </body></html>

复制代码

这样我们就成功的画出来了竖向排列的两个粉色的盒子和一个紫色的盒子，由此我们也可以验证div标签本身就是一个盒子。

就像人有很多个名字一样，大名，小名，明星还有艺名，我们也可以给一个标签指定多个类名，那多类名具体的使用方式是什么呢？具体格式如下：

<html>    <head>        <title>为一个标签指定两个类名</title>        <style>            .blue{                color:blue;            }            .font            {                font-size:40px;            }        </style>    </head>    <body>       <div class="blue font">嘻嘻</div>    </body></html>

复制代码

这样我们就可以把嘻嘻设置成字体大小为 40px,字体颜色为蓝色的字啦，但多个类名要用空格隔开。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/0bfb34cd2da8491829fde88c6】。文章转载请联系作者。

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

发布

暂无评论

创作场景

CSS 学习笔记（一）

Css基础

Css 规范

Css 选择器

基础选择器

标签选择器

类选择器

lxmoe

评论

`Css`基础