CSS学习笔记——CSS基础

最新推荐文章于 2024-05-20 23:40:52 发布

MasterBao

最新推荐文章于 2024-05-20 23:40:52 发布

阅读量94

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_62082569/article/details/125581765

版权

“本部分记录了CSS基础的内容”

1.CSS引入方式

（1）内嵌式

CSS写在style标签中，通常位于html的<head>元素中。

<!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">
    <!-- 在这里 -->
    <style>
        ...
    </style>
    <title>Document</title>
</head>
<body>
    ...
</body>
</html>

（2）外联式

CSS写在一个单独的.css文件中，通过<link>元素在html中引入。

href的值是.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">
    <!-- 在这里 -->
    <link href="..." rel="stylesheet">
    <title>Document</title>
</head>
<body>
    ...
</body>
</html>

（3）行内式

CSS直接写在元素的style属性中，可以配合js使用。

<!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>Document</title>
</head>
<body>
    <!-- 在这里 -->
    <p style="...">这是一段文本<p>
</body>
</html>

2.选择器

（1）标签

通过标签名找到页面的所有这类元素，从而设置样式。例如：

<p>标签选择器</p>

标签选择器：

p {
    color:red;
}

（2）class

通过类名即class的值找到页面的所有拥有该类名的元素，从而设置样式。例如：

<p class="table1">标签选择器1</p>
<p class="table2">标签选择器2</p>

class选择器：

p.table1 {
    color:red;
}

这样只会更改类名为table1的元素的属性。

注意：一个标签可以拥有多个类名，中间用空格隔开。

（3）id

通过id属性值，找到页面中带有这个id属性值的元素，设置样式，例如：

<p id="one“>id选择器<p>

id选择器：

p#one {
    color:red;
}

注意：id属性值在一个页面中是唯一的，不可重复；一个元素只能拥有一个id属性值。

（4）通配符

通配符：*号；结构：

* {
    css属性名：属性值；
}

通配符可以找到页面中的所有标签，简单理解为全局设定，极少用到。

3.文字和文本

（1）字体样式

属性名	取值
font-size(字体大小)	数字+px
font-weight(字体粗细)	100~900整百数
font-style(字体样式)	默认：normal；倾斜：italic
font-family(字体)	具体字体：微软雅黑、黑体、宋体等

（2）字体font属性复合

除了（1）中的单独设置，font还可以使用复合结构：

font：style weight size family;

如果想省略，只能省略前两个，并且省略相当于默认设置；

如果需要同时进行单独和复合设置，要把单独的写在复合的下边。

（3）文本样式

属性名	取值
text-indent(开头缩进)	数字+px；数字+em（1em=当前标签font-size的大小）
text-align(对齐方式)	left（居左）；center（居中）；right（居右）
text-decoration(文本修饰)	underline（下划线）；line-through（删除线）；overline（上划线）；none（无修饰）
line-height(行高)	数字+px；倍数（当前标签font-size的倍数）
color(文字颜色)	颜色名；rgb\rgba；十六进制
background-color(背景颜色)	颜色名；rgb\rgba；十六进制
margin(标签水平居中）	0 auto