CSS体验

1.CSS的定义

html 复制代码
    <title>CSS初体验</title>
    <style>
        /* 选择器 */
        属性名和属性值成对出现 ,这种叫键值对
        p{
            color: blueviolet;
            font-size: 30px;
        }
        </style>
</head>
<body>
        <p>懒羊羊</p>
</body>

2.CSS书写方式

内部样式表、外部样式表、行内样式

html 复制代码
    <title>Document</title>
    <link rel="stylesheet" href="./外部样式表.css">
</head>
<body>
<p>狼洋洋</p>
<p>狼洋洋</p>
<div style="color: blue;">狼洋洋</div>
</body>
css 复制代码
p {
    color: rgb(203, 38, 79);
}

3.选择器

作用:

查找标签,设置样式。

基础选择器:

标签选择器、类选择器、id选择器、通配符选择器。

标签选择器:

使用标签名作为选择器→选中同名标签设置相同样式。

eg:p、h1、div、img

类选择器

html 复制代码
  <title>Document</title>
    <style>
        .red{
            color:brown
        }
        .size{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="red">强制一行</div>
    <p class="red size">11111</p>
    <!-- 一个类选择器可以给多个标签使用 -->
    一个标签可以使用多个类名,class属性值可以写多个类。中间用空格隔开

</body>

id选择器

通配符选择器

用在网页制作初期,清楚网页默认样式。

4.画盒子

5.文字控制属性

字体大小

字体粗细

字体倾斜

<em></em>:表示字体倾斜。

line------height:行高

改变两行字之间的距离。

数字:当前标签font-size属性值的倍数两倍。16px 乘2

.line-height1{

line-height: 2;

}

利用行高,实现垂直居中

行高等于盒子的高度

原理:行高计算公式

字体族

字体复合属性

font复合属性

注意中间用空格隔开,字体大小和行高用/隔开。

文本缩进

区别:<em></em>:倾斜。

文字对齐

调整内容对齐方式,不影响标签

图片对齐

文本修饰线

字体颜色

相关推荐
382427827几秒前
python:正则表达式
前端·python·正则表达式
用户47949283569157 分钟前
我是怎么把模型回复用tts播放的更自然的
前端
JS_GGbond8 分钟前
前端崩溃监控:给网页戴上“生命体征监测仪”
前端
俊劫9 分钟前
AI 编码技巧篇(内部分享)
前端·javascript·ai编程
Maxkim9 分钟前
一文读懂 Chrome CRX📦:你需要了解的核心知识点
前端·前端工程化
JackJiang11 分钟前
AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
前端·websocket
Mr_chiu12 分钟前
数据可视化大屏模板:前端开发的效率革命与架构艺术
前端
进击的野人12 分钟前
一个基于 Vue 的 GitHub 用户搜索案例
前端·vue.js·前端框架
ZsTs11912 分钟前
《2025 AI 自动化新高度:一套代码搞定 iOS、Android 双端,全平台 AutoGLM 部署实战》
前端·人工智能·全栈
命中水13 分钟前
从怀疑到离不开:我第一个由 AI 深度参与完成的真实项目复盘
前端·openai