django学习入门系列之第三点《CSS基础样式介绍1》

文章目录


高度和宽度

  • 如果在块级标签内,单独定义高度的话,宽度会默认拉满

  • 使用百分比的时候

    • 如果是块级标签,宽度可以用百分比,高度用不了(使用起来没效果)
    • 块级标签默认条件下都是占一行了,用百分比剩下的都不会给你用
    • 如果是行内标签,则都用不了百分比(因为默认不支持设置长度和高度)
css 复制代码
.c1{
    height: 300px;
    weigh: 500px;
}

块级标签|行内标签的转换

  • 块级
  • 行内
  • css样式:标签 -> display: inline-block

示例 行内标签与块级标签的特性 (既具有行内标签的特新与块级标签的特性)

  • display: inline-block
    • inline(行内元素)
    • block(块级元素
    • inline-block(融合行内于块级)
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国移动</title>
    <style>
    .c4{
        display: inline-block;
        color: blue;
        height: 50px;
        width: 200px;
        border: 1px solid black;
    }
    </style>
</head>
<body>
        <span class="c4">
        中国移动
        </span>
    <span class="c4">
        流量慢死
        </span>
</body>
</html>
  • 块级标签和行内标签的转换(特殊情况下)
    • div中加个inline变成了行内标签
    • span中加个block变成了块级标签
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国移动</title>
</head>
<body>
    <div style="display: inline">中国</div>
    123
    <span style="display: block">移动</span>
    456
</body>
</html>

字体和颜色

  • 字体颜色

    • 可以在网上使用rgb颜色进行更改color: 颜色;
  • 标签颜色

    • 如果想让光标移动到对应标签上,标签改变颜色的话用``
  • 字体大小

    • 可以通过调整像素(一般情况)来进行调整font-size: 100px;
  • 字体粗细

    • 可以直接填写数值更改font-weight: 400;
    • 可以直接系统默认更改font-weight: bold;font-weight: bolder;
  • 字体透明度

    • opacity:
    • 从0到1,亮度逐级递增
    • 如:opacity: 0.7;
  • 字体选择

    • 可以直接自己选(有些可能收费)font-family: 宋体;

上述案例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国移动</title>

    <style>
        .c1{
            color: sienna;
            font-size: 100px;
            font-weight: bolder;
            font-family: 宋体;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
</body>
</html>

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1:用户注册】
7.【案例2:用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】

相关推荐
北海-cherish16 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
C嘎嘎嵌入式开发19 分钟前
(2)100天python从入门到拿捏
开发语言·python
Stanford_11061 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
@小博的博客1 小时前
【Linux探索学习】第二篇Linux的基本指令(2)——开启Linux学习第二篇
linux·运维·学习
2501_915909061 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist2 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
Java 码农3 小时前
Centos7 maven 安装
java·python·centos·maven
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang3 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_3 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js