前端开发学习——CSS基础-CSDN博客

本文链接：https://blog.csdn.net/2302_80311379/article/details/140876407

一、CSS引入方式

1、内嵌式

CSS写在style标签中
提示：style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

2、外联式

CSS写在一个单独的.css文件中
提示：需要通过link标签在网页中引入

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

3、行内式

CSS写在标签的style属性中
提示：初学不推荐使用，之后会配合js使用

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

二、基础选择器

1、标签选择器

结构：标签名{css属性名：属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是单独一个
标签选择器无论嵌套关系有多深，都能找到对应标签

<head>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>

2、类选择器

结构：.类名{css属性名：属性值;}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意点：

所有标签都有class属性，class属性的属性值称为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字和中划线开头
一个标签可以同时拥有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<head>
    <style>
        .red{
            color: red;
        }
        .size{
            font-size: 70px;
        }
    </style>
</head>
<body>
    <p class="red size">这是一个p标签</p>
    <div class="red">这是一个div标签</div>
</body>

3、id选择器

结构：#id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<head>
    <style>
        #red{
            color: red;
        }
    </style>
</head>
<body>
    <p id="red">这是一个p标签</p>
</body>

4、通配符选择器

结构：*{css属性名：属性值;}

作用：找到页面中所有的标签，设置样式

注意点：

开发中极少使用
可能会用于去除标签默认的margin和padding

<head>
    <style>
       *{
            margin: 0;
            padding: 0;
       }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div>这是一个div标签</div>
    <h1>标题</h1>
</body>

浏览器显示效果：

三、字体样式

1、文字大小

属性名：font-size

取值：数字+px(像素单位)

注意点：

谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

2、文字粗细

属性名：font-weight

取值：

关键字：

正常	normal
加粗	bold

纯数字：100~900的整百数：

正常	400
加粗	700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

3、字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

4、字体系列

属性名：font-family

常见取值：

具体字体：'"Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等
字体系列：sans-serif、serif、monospace等

渲染规则：

从左往右按顺序查找，如电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

/* win默认字体是微软雅黑 */
/* 如果系统没有微软雅黑 就使用黑体 如果没有黑体 就选择任意一种无衬线字体 */
font-family: 微软雅黑,黑体,sans-serif;

以上字体样式示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 默认大小是16px */
           font-size: 30px;
        }
        div{
            /* 加粗 */
            font-weight: 700;
            /* 倾斜 */
            font-style: italic;
            /* win默认字体是微软雅黑 */
            /* 如果系统没有微软雅黑 就使用黑体 如果没有黑体 就选择任意一种无衬线字体 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
        h1{
            /* 粗细正常 */
            font-weight: 400;
        }
        em{
            /* 正常 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p> 
    <div>这是div标签。</div>
    <h1>一级标题</h1>
    <em>倾斜</em>

</body>
</html>

浏览器显示效果：

5、font复合属性

属性名：font（复合属性）

取值：font: style weight size family;

省略要求：只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写两种形式，有以下两种方法：

把单独的样式写在连写的下面（后面的会覆盖前面的）
把单独的样式写在连写的里面

/* font-size: ;
font-style: ;
font-weight: ;
font-family: ; */
/* font: style weight size family; */
font: italic 700 66px 宋体;
font-style: normal;

四、文本样式

1、文本缩进

属性名：text-indent

取值：

数字+px
数字+em（推荐：1em = 当前标签的font-size的大小）

<head>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>

浏览器显示效果：

2、水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

text-align：center能让以下元素居中

文本
span标签、a标签
input标签、img标签

注意点：

如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置

<head>
    <style>
        h1{
            text-align: center;
        }
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <img src="./image.jpg" alt="图片">
</body>

3、文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

<head>
    <style>
        h1{
            text-decoration: underline;
        }
        div{
            text-decoration: line-through;
        }
        p{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <div>这是div标签。</div>
    <p>这是一个段落。</p>
    <a href="#">我是超链接</a>
</body>

浏览器显示效果：