CSS基础

NoFear1015

已于 2023-05-05 09:08:52 修改

阅读量47

点赞数

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

于 2023-04-23 17:44:33 首次发布

本文链接：https://blog.csdn.net/weixin_44697506/article/details/130326983

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、简介

CSS：层叠样式表(Cascading style sheets),用于丰富网页色彩。

CSS标签写在style标签中，style标签一般写在head标签里面，title标签下面。

<!--如下为style标签  -->
<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>

    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    
</body>
</html>

CSS引入方式：

引入方式	书写位置	作用范围	使用场景
内嵌式	style 标签	当前页面	小案例
外链式	link标签引入单独 css 文件	多个页面	项目中
行内式	标签 style属性中	当前标签	配合 js 使用

/*内嵌式*/
<head>
	<style>
        p{
             color: red;   /* 字体颜色 */
            font-size: 60px;  /* 字体大小；也可以是具体数字：如50px(px表示像素)  */
            background-color: aqua;  /* 背景颜色 */
            width: 400px;      /*宽  */
            height: 100px;       /* 高 */
        }
    </style>
</head>
/*行内式*/
<div style="color: green; background-color: #f1f1f1;">
  这是一段设置了css样式的文字
</div>

/*外链式*/
/*以下代码放在.css文件中*/
h1{
    color: navy;
    font-size: 50;
}

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

<head>
    <link rel="stylesheet"
          href="./css样式.css">
</head>

<body>
    <p>这是一段设置了css样式的文字</p>
</body>

</html>

二、基础选择器

2.1 标签选择器

以标签名命名的选择器：

特点：所有相同的标签样式都一样

h1{
    color: navy;
    font-size: 50;
}
p{
    background-color: aqua;
    content: icon;
}

2.2 类选择器

<!--合法的类名：数字、字母、下划线、中划线 一个元素可以使用多个类，空格隔开 -->
<!--类的定义格式: .div{}  调用格式: class="div" -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .div{
            color: blue;
            background-color: rgb(226, 233, 233);
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="div">你好人类</p>
    
</body>
</html>

2.3 id选择器

<!--面中唯一，不能重复  一个标签只能有一个id -->
<!-- id选择器一般与js配合使用 -->
<html lang="en">
<head>
    <style>
        /* id选择器 */
        #two{                    /* 一个页面中只能有一个名字一样的id选择器 */
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <h4 id="two">我们都很好</h4>
</body>
</html>

2.4 通配符选择器

/* 选中所有标签 用于设置统一的样式 如下 */
/* 清除内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

三、字体样式

样式	表示	备注
字体大小	font-size	取值：数字+px(浏览器默认为16px)
字体粗细	font-weight	默认取值为normal(400)；bold(大于400)为加粗
字体样式	font-style	文字是否倾斜：normal-不倾斜；italic-倾斜
字体类型	font-family	字体选择：windows–微软雅黑 Mac–PingFang SC
字体类型	font:style weight size family;	复合属性，前两个可不写，不写为默认值，顺序不能变

常见的字体系列：

常见字体系列	特点	场景	该系列常见字体
无衬线字体（sans-serif）	文字笔画粗细均匀，并且首尾无装饰	网页	黑体、Arial
衬线字体（serif）	文字笔画粗细不均匀，并且首尾有装饰	报刊书籍	宋体、Times New Roman
等宽字体（monospace）	每个字母或文字的宽度相等	程序代码编写	Consolas、 fira Code

<html lang="en">
<head>
    <style>
        .sty{
            font-size: 16px;
            font-weight: 400;
            font-style: italic;
            font-family: 黑体,宋体,sans-serif;  /* 字体显示顺序从前往后 */
            color: blue;
            color: blueviolet;
        }
        /*font复合属性格式———— font: style weight size family */
        p {
            font: italic 400 40px 宋体;
            color: brown;
        }
    </style>
</head>
<body>
    <p>段落1</p>
    <p class="sty">段落2</p>
</body>
</html>

四、文本样式

样式	表示	取值
文本缩进	text-indent	数字+px 或者数字+em(一个em为font-size大小)
文本水平对齐方式	text-align	左对齐(left)、居中对齐(center)、右对齐(right)
文本修饰	text-decoration	下划线(underline)、删除线(line-through)、上划线(overline)、无装饰线(none)
行高	line-height	数字+px 或者倍数(font-size的倍数)

<html lang="en">
<head>
    <style>
        p{
            text-indent: 2em;
            line-height: 1.5;
        }
        h1{
            text-align: center;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>GPT</h1>
    <p>基于Transformer的模型中，最具代表性的是BERT和GPT2.0。其中GPT2.0是OpenAI团队升级GPT的产物；而BERT是Google团队对标GPT推出的模型，也可以视作是GPT的升级版。按照时间顺序，这些模型的发展史是这样的：（1）2018年，OpenAI基于Transformer提出了GPT；（2）2019年，Google推出了GPT的升级版BERT；（3）2019年，OpenAI推出了GPT的升级版GPT2.0。因此，为了更好地理解BERT和GPT2.0，需要首先了解Transformer和GPT。</p> 
</body>
</html>