CSS入门基础学习（上）

小侯不躺平.

已于 2022-06-14 10:59:45 修改

阅读量903

点赞数 11

分类专栏：前端学习文章标签： css 学习 html

于 2022-06-14 10:24:43 首次发布

本文链接：https://blog.csdn.net/m0_61886762/article/details/125197821

版权

前端学习专栏收录该内容

4 篇文章 29 订阅

订阅专栏

css是层叠样式表的简称，有时称为css样式表或级联样式表。

css是一种标记语言，用于设置HTML页面中的文本内容，图片的外形，以及版面的布局和外观显示样式。可以美化HTML的外观页面看起来更加简介美观（HTML是结构的呈现，css则是样式的实现）。

css由两部分组成：选择器以及一条或多条声明。

语法：

<style>

选择器{样式}

给谁改{改为什么}

<style>

例如：

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

（1）选择器是用于指定HTML标签，花括号内是对该对象设置的具体形式

（2）属性与属性位置之间用英文“：”分开

（3）多个键值对之间用英文“；”分开

CSS 代码风格

1.样式格式

一般情况下大多用于展开类型的模式。

如下所示：

<style>
    p {
        color:red;
        font-size:13px;
      }
</style>

2.样式大小写

全部使用小写字母，特殊的情况除外。

3.空格规范

（1）属性值前面，冒号后面都需要保存一个空格

（2）选择器和大括号之间保留一个空格

CSS 选择器的作用

根据不同的需求把不同的标签选择出来

选择器的分类：

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

基础选择器是有单个选择器组成的

基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器（按标签名分类）

格式：

标签名 {

属性1：属性值1；

属性2：属性值2；

........................

}

例如：如下代码将h4标题变成紫色

 <style>
        h4 {
            color: blueviolet;

        }
    </style>

类选择器：

可单独选择一个标签或者多个标签发生相应的该表

语法格式：

.类名 {

属性1：属性值1；

属性2：属性值2；

}

应用在HTML结构之中的形式如下：

<li class="类名称"> 内容 </li>

结构之中需要调用class属性来调用相关的class类

样式点定义，结构类（class）调用，一个或多个开发时常用。

注意：

（1）类选择器使用“.”（英文形式）进行标识，后面紧跟类名（自定义）

（2）可以理解为给这个标签起一个名字来表示

（3）长名称或词组可以使用横线来为选择器命名

（4）不要使用纯数字、中文等命名，尽量使用英文字母表示

（5）命名要有意义，尽量要是读代码的人可以看到懂以下是在写什么东西

（6）命名格式规范仍要遵循

单个类名的使用如下：

<style>
        .bule {
            color: blueviolet;
        }
</style>
<h4 class="bule">让我们在山的顶峰相遇吧</h4>

运行之后的结果如下图所示，只是将h4标签中的一个进行了色彩改变：

多类名：（一个标签可以使用多个类名）

使用方式如下：

<li class="red size">内容</li?

（1）债标签class属性之中可以写多个类名之间使用空格将其分开

（2）这个标签可以分别具有这些类名的形式

多类名的使用场景：

（1）可以把一些标签元素相同的样式共同放入一个类中

（2）这些标签都可以调用这个公共类，然后再调用独有的类

（3）节省了CSS的空间，也使修改整体格式变得简单

多类名的使用方式如下代码所示：

<style>
   .bule {
      color: blueviolet;
     }
   .size {
      font-size: 20px;
     }
</style>
<p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>

<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>

运行结果是将其中一个文字即变色也改变了大小，而一个文字段只进行了改变大小没有更改其颜色，运行的结果如下图所示：

id选择器：

HTML元素以id属性来设置选择器，CSS中id以“#”来定义

语法：

<style>
#id {
        color:....;
        background-color:....;
        .............;
    }
</style>

具体的相关使用方式如下：

<style>
    #nav {
            color:pink;
            font-size=12px;
         }
</style>
<body>
    <div id="nav">内容</div>
</body>

代码如下所示：

    <style>
        .bule {
            color: blueviolet;
        }
        .size {
            font-size: 20px;
        }
        #color {
            color:red;
        }
    </style>
   <p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>

    <p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
    <p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>

    <p id="color"> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
    </p>

color 这个id选择器只能使用一次

样式#定义，结构id调用，只能调用一次，一旦被调用之后其他标签则不可调用

与class之间的区别：

（1）类相当于人的名字，可以进行重复使用

（2）id则相当于人的身份证号码，一个人只能有一个

通配符选择器：

用“*”来定义，它表示选择页面中所有元素（标签）

语法：

<style>
    * {
        color:sky blue;
      }
</style>

通配符选择器不需要调用，自动给所有元素格式，只有在特殊情况下才会被使用。

例如：清除内外边距

* {
     margin:0;
     padding:0;
  }

对所有的文字进行更改颜色的代码如下所示:

   <style>
       * {
           color:aquamarine;
       }
    </style>

CSS字体属性：

CSS Font（字体）属性用定义字体系列、大小、粗细和文字样式（如斜体）

字体系列：

CSS使用 font-family属性定义文本的字体系列

（1）各种字体之间必须使用的英文逗号分开

（2）一般情况下，如果有空格隔开的多个单词组成的字体加引号

（3）尽量使用系统自带的字体，保证在每个用户处可以正常显示

（4）最常见的几个字体：Microsoft YaHei、tahoma,arial、Hiagino Sans

如果一个font-family有多个字体，那么先观察第一个字体是否在系统中存在，存在则应用第一个，不存在则依次向后寻找存在的字体。

使用方式如下:

<style>
    p {
        font-family="Microsoft YaHei"、"tahoma,arial"、"Hiagino Sans"
      }
</style>

字体大小：

CSS使用font-size定义字体大小

p {
    font_size:20px;
  }

（1）px（像素）大小是我们网页最常用的一个单位

（2）谷歌浏览器默认字体大小为16px

（3）不同浏览器可能的默认显示的字号大小不同，我们尽量给一个明确值大小，不要默认其大小

（4）可以给body指定整个页面文字的大小

标题、标签比较特殊，需要单独指定文字大小

字体粗细:（直接写数字，不用加像素值px）

使用font-weight属性设置字体的粗细

参数：

normal	正常默认字体相当于number=400
bold	粗体。相当于number=700
bolder	特粗体，IE5+
lighter	LE5+细体
number	后面直接跟数字便可调节字体的粗细

文字样式

使用font-style设置文本的风格

p {
    font-style:normal;
  }

属性值包含italic斜体样式，主要作用就是让倾斜的字体不再倾斜

字体复合属性：

字体属性可以把以上的文字样式都综合起来使用，可节省代码的长度。

形式如下：

body {

font: font-style font-weight font-size/line-height font-family

}

其中font-size和font-family必须得书写，否则将不会被正常执行。

body { font: italic 700 16px 'microsoft yahe'}

将body的代码改为p标签，则运行结果如下所示：

（1）使用font属性时，必须按照上面的语法格式书写其中的顺序不得进行更改，并且各个属性之间使用空格分开

（2）不需要设置的属性可以直接忽略（即取默认值）但必须保留font-size和font-family属性，否则font会不起作用

文本属性

css text（文本）属性可定义文本的外观，比如颜色，对齐文本，装饰文本，文本缩进，行间距等等。

文本颜色（color）

color属性用于定义文本的颜色

div {

color:red;

}

表示形式	属性值
RGB代码	rgb(255,0,0)或rgb(100%,0%，0%）
预定义颜色	red,green,bule,pink
十六进制	#FF0000,#FF6600,#29D794

开发中常用十六进制

对齐文本(text-align）

text-align属性用于设置元素内文本内容的水平对齐方式

例如：

div {
    text-align:center;
}

left	左对齐（默认）
center	居中对齐
right	右对齐

举一个实例，代码如下所示（将一个文本居中对齐）：

    <style>
        .align {
            text-align: center;
        }
    </style>
<body>
    <h4  class="align">让我们在山的顶峰相遇吧</h4>
    <h4 class="align"> 一起去吧，更远的地方</h4>
</body>

代码运行的结果如图所示：

装饰文本（text-decoration）

text-decoration属性规定添加到文本的修饰，可以给文本加下划线，删除线，上划线等等。

div {

text-decoration:underline;

}

属性值如下表所示：

属性值	描述
none	默认无装饰（可以使有下划线的不存在下划线）
underline	下划线，链接a自带下划线
overline	上划线（几乎不用）
line-through	删除线（不常用）

举一个实例，如下所示将链接a的下划线去掉，代码如下：

    <style>
        a {
            text-decoration: none;
        }
    </style>
<body>
    <a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
     <h1>对角巷乐队</h1>
    </a>
</body>

运行的结果如下图所示：

文本缩进（text-indent）

text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进

div {

text-indent: 20px;

}

通常设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至长度可以是负值

p {

text-indent:2em;

}

em是一个相对单位，就是当前元素一个文字的大小的距离，如果当前元素没有设置大小，则会按照父元素的一个文字大小。

一般常用em设置缩进，它只管缩进几个字对于开发人员来说很方便

我们已经学了这一部分内容了，那我们做一个让所有段落缩进的操作吧，代码如下：

    <style>
        p {
            text-indent: 2em;
        }
    </style>
<body>
    <p>千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>

    <p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
    <p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>

    <p> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
    </p>
</body>

运行之后的结果如下所示：

行间距（line-height）

line-height属性用于设置行间的距离（行高）

p {

line-height:26px;

}

CSS引入方式

内部样式表：

内部样式表是写到HTML页面内部，是将所有css代码抽取出来，单独放到一个<style>标签

<style>

div {

color:red;

font-size:19px;

}

</style>

（1）<style>标签可以放在html文档的任意地方，但一般放在<head>标签中

（2）通过此种方式，可以方便控制当前的整个页面中的元素样式设置

（3）代码结构清晰，但是并没有实现结构与样式完全分离

（4）使用内部样式设定，也被称为嵌入式引入

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定css样式

<div style="color :red; font-size:19px}内容</div>

（1）style其实就是标签的属性

（2）在双引号中间，写法要符合css规范

（3）可以控制当前的标签设置想要的样式

外部样式表

实际开发中都是外部样式表核心是将其单独写到css文件中，之后引入css到html文档中

引入分为两步：

（1）新建一个后缀名.css的样式文件，把所有css代码都放入此文件中

（2）在html页面中，使用<link>标签引入此文件

格式如下：

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

属性	作用
rel	定义当前文档与被链接的文档之间的关系，在这里需指定为stylesheet，表示被链接文档是一个样式表
href	定义所链接外部样式表文件的URL，可以为相对/绝对路径

使用外部样式表设定css，通常也被称为外链式和链接式引入

该<link>标签写在<head>标签之中

chrome调试工具

（1）Ctrl+滚轮可以放大放小代码

（2）左边是html，右边是css

（3）右边css可改动数值和查看颜色

（4）Ctrl+O复原浏览器大小

（5）点击元素，发现右侧无样式引入，极有可能是类名或样式引入错误

（6）如果有样式单眼视前有黄色感叹号提示，则为样式书写错误

Emmet语法

快速生成html结构语法

（1）生成标签直接输入标签名按tab键即可

（2）如果想要生成多个相同的标签加上*即可

div*3 可以生成三个div标签

（3）如果有父子级关系的标签可以用>

ul>li 表示li是ul的子标签

（4）如果有兄弟关系的标签，用+就可以了

div+p

（5）如果生成带有类名或者id名字的，直接写.demo或#two 按tab键即可

（6）如果生成的div类名是有顺序的，可以用自增符￥

（7）如果想要在生成标签内部写内容时，将内容写在{ }中

例 .nav <div class="nav"> </div>

#na <div id = "na" > </div>

p.nav则是对标签p进行处理

.demo$*5 有五个div里的class分别为1,2,3,4,5的标签

div {内容}*n 就有n个 div+内容的

快速生成css样式语法

css基本采取简写形式即可

（1）比如 w200+tab 为width：200px；

（2）比如lh26+tab 为line-height：26px；

复合选择器

后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素，其写法如下所示（将外层标签写在前面。内层标签写在后面用空格分开）

语法：

元素1 元素2{样式声明}

表示选择元素1里所有元素2（元素2为元素1的后代元素）

例如：

ul li {样式声明} 选择ul标签里的所有li标签

（1）元素1和元素2用空格隔开

（2）元素1是父级，元素2是子级最终选择的元素是元素2

（3）元素2可以是儿子，孙子都可以，只要是元素1的后代就行

例如：

.nav li a{color:red;}找类nav中li的标签a

具体的应用方式如下所示：

    <style>
      .nav li a{
        color:red;
      }
    </style>
<body>
   <ul class="nav">
        <li>
            <a href="#">我好想爱这个世界啊！！</a>
            我好想爱这个世界啊！！
        </li>
    </ul>
</body>

运行的结果如下所示，只有引用nav中的li标签中的a链接标签进行了变色：

子选择器

子选择器只能作为某元素的最近一级子元素。简单的理解就是选择亲儿子元素

语法：

元素1 > 元素2 {样式声明}

表示选择元素1里所有直接后代元素2

例如：

<div>

<p> 变 </p>

<p>变</p>

<ul>

<p>不变</p>

</ul>

</div>

（1）元素1和元素2 中间用大于号隔开

（2）元素1是父级，元素2是子级，最终选择的元素为元素2

（3）元素2必须是亲儿子，其他的都不可以

例如如下的代码：

    <style>
        div > p {
            color:blueviolet;
            text-align:center;
        }
    </style>
    <div>
        <p>
            把我的明天都献给黑夜吧！
        </p>
        <ul>
            <p>
                把我的爱都献给你吧！！
            </p>
        </ul>
    </div>

运行的结果如下图所示：

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是个选择器通过，隔开连接，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1，元素2，元素3{样式声明}

表示选择了元素1，元素2，元素3

（1）元素之间用逗号隔开

（2）逗号可以理解为和

并集选择器喜欢竖着写，最后一个选择器不加逗号

进行一个实例操作，代码如下：

    <style>
        p,a,h4 {
            color:blueviolet;
            text-align:center;
            text-decoration: none;
        }
    </style>
    <a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
        <h1>对角巷乐队</h1>
    </a>
    <p>6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold You
        Tight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。</p>
    <img src="2.jpeg" height="650" width="1000" title="对角巷新专辑">
    <h4> 一起去吧，更远的地方</h4>

运行结果如下图所示：

对角巷乐队标题本来是一个链接应该有下划线，但在样式声明中将其取消掉了

伪类选择器：

伪类选择器用于向某选择器添加特殊的效果

伪类书写的最大特点是用冒号（：）表示

链接伪类：

a:link	选择所有未被访问的
a:visited	选择已经被访问过的
a:hover	选择鼠标指上的
a:active	选择鼠标长按尚未弹起的

链接伪类注意事项：

（1）为了确保生效，请按照link，visited，hover，active顺序书写

记忆口诀：LV包包真hao

（2）因为a链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式

实际开发的写法：

a {
    color:gray;
}
a:hover {
    color:skybule;
}

一个实例的代码如下所示：

    <style>
        a {
            color:gray;
        }
        a:hover {
            color:blueviolet;
        }
    </style>
    <a href="对角巷.html" target="_balnk">在日月的璀璨间闪耀</a>

运行的结果如下图所示，当鼠标放在链接上时，颜色便会发生改变：

:focus伪类选择器

:focus伪类用于选择有光标的表单（input）元素

input:focus {

background-color:skybule;

}

复合选择器的总结：

选择器	作用	特征	使用情况	隔开及其用法
后代选择器	用来选择后代	可以是子孙	较多	符号空格
子代选择器	选择最近一级元素	只选择亲儿子	少	符号大于
并集选择器	选择样式相同的	用于集体	多	逗号
链接伪类	选择不同状态的链接	跟链接相关	多	正常写法
：focus	获取光标处	跟表单相关	少	input：focus