初识CSS-引入方式、字体属性、选择器总结

阿珂要努力呀

已于 2023-03-23 23:50:36 修改

阅读量373

点赞数 1

分类专栏： HTML+CSS 文章标签： css html 前端

于 2022-10-19 16:54:01 首次发布

本文链接：https://blog.csdn.net/qq_43423011/article/details/127384470

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是CSS ？

1、层叠样式表（Cascading Style Sheets），简称CSS，或CSS样式表、级联样式表；
2、CSS是一种标记语言，文件后缀名 “.css” ；
3、用处：设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式；
4、功能：美化页面，优化布局；
5、价值：实现结构（ HTML）与样式（CSS）完美分离。

CSS语法规范

<style>
        p {
            color: yellow;      /* 属性:属性值;   键值对形式存在，英文“:”分开 */
            font-size: 22px;    /* 多个“键值对”之间用英文“;”进行区分 */
        }
        
        选择器 {
        	属性: 属性值;
        }
</style>

① p ：选择器；
② { } ：花括号内是对该对象设置的具体样式；
③ 属性和属性值以“键值对”的形式出现；
④ 所有样式写在 style 标签内，表示是样式表。 style 一般写到 head 结束标签上方；
⑤ 多采用展开格式、小写字母、空格规范书写。

CSS引入方式

1、行内式
2、内嵌式
3、外链式

1、行内式

行内式是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。

<div style="color: green; font-size: 12px;">人生海海，不过尔尔。</div>

（1）style 其实就是标签的属性，在双引号中间，书写要符合 CSS 规范
（2）可以控制当前的标签设置样式
（3）不推荐大量使用

2、内嵌式

内嵌式是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 style 标签中

    <style>
        div {
            color: red;
            font-size: 20px;
        }
    </style>

（1） style 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的 head 标签中
（2）通过此种方式，可以方便控制当前整个页面中的元素样式设置
（3）代码结构清晰，但是并没有实现结构与样式完全分离

3、外链式（最常用）

实际开发都是外链式。适合于样式比较多的情况。核心是：样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。
引入外链式步骤：
① 新建一个后缀名为 .css 的样式文件，把所有 css 代码写在这个文件中；
② 在 HTML 页面，使用 link 标签引入这个文件。

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

属性：
rel ：定义当前文档与被链接文档之间的关系，此处表示被链接的文档是一个样式表文件。
href ：定义所链接的css文件路径，可以是相对路径，也可以是绝对路径。

CSS字体属性

字体属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        .one {
            font-size: 30px;
            font-family: "宋体";
            font-weight: bold;
            font-style: italic;
        }

        /* 等价于 */
        /* font: font-style font-weight font-size/line-height font-family; 属性值有顺序之分，空格隔开 */
        .two {
            font: italic bold 30px "宋体";
        }
    </style>
</head>

<body>
    <p class="one">设置字体属性</p>
    <p class="two">设置字体属性</p>
</body>

</html>

在这里插入图片描述
注：
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。

CSS文本属性

文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
color : 预定义的颜色名/十六进制/RGB代码;
text-align: left/center/right； ----左/中/右
text-indent: 不同单位的数值/em字符宽度的倍数/相对于浏览器窗口宽度的百分比%; （建议em）
text-decoration: none/underline/overline/line-through; ----默认/下划线/上划线/删除线
line-height: 像素px/em/%; （建议像素px）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        p {
            color: #ff6600;
            text-align: left;           /* 居左 */
            text-indent: 2em;             /* 首行缩进2字符 */
            text-decoration: underline;   /* 添加下划线 */
            line-height: 26px;            /* 设置行间距26px */
        }
    </style>
</head>

<body>
    <p>胡歌小学就读于上海市向阳小学，初中就读于上海市第二中学初中部95级1班，高中就读于上海市第二中学高中部98级3班、高中部01届7班。胡歌在小学阶段曾经是戴三道杠的大队委员，在中学阶段还担任校升旗仪式主持人、校广播台台长、校戏剧社社长、校合唱团团长、班级团支书、班级物理课代表、徐汇区学生话剧团负责人，还参与了中央电视台《正大综艺》节目主题歌《爱的奉献》MV的拍摄。</p>
</body>

</html>

在这里插入图片描述

选择器

作用：选择器(选择符)就是根据不同需求把不同的标签选出来，简单说就是用来选择标签的。
分类：基础选择器、复合选择器。

1、基础选择器

基础选择器是由单个选择器组成的，分为：标签选择器、类选择器、id选择器、通配符选择器。

标签选择器：

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：

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

① 直接使用标签名称，作为选择器的名称，该选择器可以匹配到页面中所有该标签。
② 优点：快速为页面中同类型的标签设置统一样式；
③ 缺点：不能差异化设计样式。

类选择器：

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

<div class="类名"> 人生海海，不过尔尔。 </div>

结构需要使用class属性来调用 class 类的意思
语法：

.类名 {
      属性1: 属性值1;
      ...
      }

① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义的）；
② 不要使用纯数字、中文等命名，尽量使用英文字母来表示；
③ 长名称或词组可以使用中横线来为选择器命名；
④ 命名要有意义，规范，尽量使别人一眼就知道这个类名的目的。

类选择器 - 多类名：

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。
使用方式：

<div class="red font20">人生海海，不过尔尔。</div>

注：
① 在标签class 属性中写多个类名
② 多个类名中间必须用空格分开
③ 这个标签就可以分别具有这些类名的样式
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名使用方式</title>
    <style>
        .box1 {                 /* 有差异的样式单独放即可 */
            background-color: red;
        }

        .box2 {
            background-color: green;
        }

        .box3 {                /* 我们把共有的一些样式放到一个类里 */
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box1 box3">人生海海，不过尔尔。</div>
    <div class="box2 box3">人生海海，山山而川。</div>
    <div class="box1 box3">人生海海，不过尔尔。</div>
</body>

</html>

在这里插入图片描述

id选择器：

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

        #id名 {
            属性1: 属性值1;
            属性2: 属性值2;
            ...
        }

注：id 属性只能在每个 HTML 文档中出现一次
Tips：
id 选择器和 class 选择器的区别：
① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器：

通配符选择器使用“ * ”定义，它表示选取页面中所有元素（标签）。
语法：

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

注：通配符选择器不需要调用，自动就给所有的元素使用样式。
案例：
清除所有元素的内外边距。

        * {
            margin: 0;
            padding: 0;
        }

在这里插入图片描述

基础选择器总结：

在这里插入图片描述

2、复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

更准确、更高效的选择目标元素（标签）
由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器：

后代选择器又称为包含选择器，可以选择父元素里面子元素，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：

元素1 元素2 { 样式声明 }    <!-- 选中元素1中的所有元素2 -->

在这里插入图片描述

元素1 和元素2 中间用空格隔开，最终被选中的元素是所有元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

子选择器：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。
语法：

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

选择元素1 里面的所有直接后代(子元素) 元素2。
在这里插入图片描述

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管

并集选择器：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号 “, ” 连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：

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

选中元素1和元素2。
在这里插入图片描述

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

伪类选择器：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用英文冒号（:）表示，比如 :hover 、 :first-child 。

（1）链接伪类选择器

a:link{} “链接”：超链接点击之前，未访问（只适用于a，默认时蓝色，若不生效清除缓存即可）
a:visited{} “访问过的”：链接被访问过之后（只适用a）
a:hover{} “悬停”：鼠标放到标签上的时候（适用于所有标签，例如：p、div等）
a:active{} “激活”：鼠标点击标签，但是不松手时。（使用于所有标签）
注意：
以上四个属性全部存在时
顺序：先爱后恨 L_V_H_A

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接伪类选择器</title>
    <style>
        a:link {
            color: #66ff87;
        }

        a:visited {
            color: #f6f;
        }

        a:hover {
            color: #66d6ff;
        }

        a:active {
            color: #ff9466;
        }
    </style>
</head>

<body>
    <a href="#">人生海海，不过尔尔。</a>
    <a href="#">人生海海，不过尔尔。</a>
    <a href="#">人生海海，不过尔尔。</a>
    <a href="#">人生海海，不过尔尔。</a>
</body>

</html>

（2）:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 input 类表单元素才能获取.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:focus 伪类选择器</title>
    <style>
        input:focus {
            background-color: yellow;
        }
    </style>
</head>

<body>
    昵称：<input type="text"><br>
    昵称：<input type="text">
</body>

</html>

在这里插入图片描述

复合选择器总结：

在这里插入图片描述

加油，分享课堂笔记~

不当之处请大家及时指出，若有什么建议可以给我留言！
❤笔芯

特别声明：本文中有些图表内容来自黑马程序员前端教程，侵权请联系我删除 ~

阿珂要努力呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS-引入方式、字体属性、选择器总结

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。更准确、更高效的选择目标元素（标签）由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
复制链接

扫一扫