html与css：css选择器与常用属性

CSS选择器与常用属性

概述

CSS全程层叠样式表

网页内容，有HTML控制
网页样式，由CSS控制

CSS语法(写在style标签内)

1：24

选择器：2：20
字体大小：4：02

常用的CSS选择器

元素选择器：h1，img，p（直接通过标签名）
类选择器：6：30（.className）
id选择器：7：35 （#id）
通配符选择器：10:30 （用*号）

常用的CSS属性

字体大小：font-size 13:55
字体颜色：color 15:30
宽度：width 15:50
高度：height (技巧auto)
背景色：background-color 17：30
文本水平居中：text-align 18：25
文本行高（垂直居中）：line-height 18:55

课后练习

<!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>
    <style>
        /* css的语句写在style中 */
        .h1{
            font-size: 50px;
            color:orange;
            background-color:black;
            text-align: center;
        }
        .table{
            font-size: 50px;
            color: red;
            background-color: black;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1 class="h1">医学僧的博客</h1>
    <table border="2" class="table">
        <tr>
            <td>梦怀济世</td>
            <td>本科阶段</td>
            <td>考研风雨</td>
            <td>研究生</td>
            <td>工作日常</td>
        </tr>
    </table>
</body>
</html>

实现效果：

image-20220305144025954

posted @   karlsorpan  阅读(46)  评论(0)  编辑  收藏  举报
相关博文：
·  html与css：第一节常用的html标签
·  html与css：表格与表单
·  CSS选择器与常用属性
·  CSS：字体属性，基础选择器
·  CSS学习笔记
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手