随便记记HTML元素样式、CSS设置元素样式

最新推荐文章于 2021-09-09 20:46:46 发布

猫学学

最新推荐文章于 2021-09-09 20:46:46 发布

阅读量222

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/maoxuexue/article/details/106470502

版权

一、HTML元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病娇少女</title>
</head>
<body>
    <h1>大坏蛋，你看什么看！</h1>
    <h2>嗯~你不看我咋知道我看你？</h2>
    <h3>哼！</h3>
    <h4>不许对我哼，知道不。</h4>
    <h5>你凶我，我这么可爱，你怎么可以凶我！</h5>
    <h6>这五毛钱我不挣了，告辞。</h6>
    <p>我是一个段落</p>
    <a href="www.baidu.com">百度一下，癌症到手</a>
    <br>
    <img src="shabi.jpg" width="310px" height="310px">
</body>
</html>

链接和图片是行内元素，在同一行显示。标题和段落是块元素，单独一行显示。

标题、段落和链接元素都有三部分：开始标签、内容、结束标签；换行和图片元素只有开始标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
    <form>   <!--一个表单元素-->
        <p id="user">  <!--文本框-->
            <input type="text" name="username" class="c1" placeholder="用户名">
        </p>

        <p id="pwd">  <!--密码框-->
            <input type="password" name="password" class="c2" placeholder="密码">
        </p>

        <p>  <!--单选按钮-->
            <input type="radio">男
            <input type="radio">女
        </p>

        <p>  <!--复选框-->
            <input type="checkbox" name="basketball">打篮球
            <input type="checkbox" name="swimming">游泳
            <input type="checkbox" name="climbing">爬山
        </p>

        <p>  <!--下拉列表-->
            <select name="car">
                <option value="1">奥迪</option>
                <option value="2">大众</option>
                <option value="3">宝马</option>
            </select>
        </p>

        <p>  <!--文本域-->
            <textarea name="introduce" cols="20" rows="5">
                我是一个...
            </textarea>
        </p>

        <p>  <!---->
            <input type="submit" value="确定">
        </p>
        <!--子框架-->
        <iframe src="http://www.baidu.com" width="800px" height="600px" frameborder="0px" scrolling="no"></iframe>
    </form>
</body>
</html>

二、CSS设置元素样式

1、设置颜色

1）内联样式（优先级最高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病娇少女</title>
</head>
<body>
<!--    <h1>大坏蛋，你看什么看！</h1>-->
    <h1 style="color: pink";>大坏蛋，你看什么看！</h1>
    <h2>嗯~你不看我咋知道我看你？</h2>
    <h3>哼！</h3>
    <h4>不许对我哼，知道不。</h4>
    <h5>你凶我，我这么可爱，你怎么可以凶我！</h5>
    <h6>这五毛钱我不挣了，告辞。</h6>
    <p>我是一个段落</p>
    <a href="www.baidu.com">百度一下，癌症到手</a>
    <br>
    <img src="shabi.jpg" width="310px" height="310px">
</body>
</html>

2）内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病娇少女</title>
    <style>h1{color: yellow;}</style>
</head>
<body>
    <h1>大坏蛋，你看什么看！</h1>
<!--    <h1 style="color: pink";>大坏蛋，你看什么看！</h1>-->
    <h2>嗯~你不看我咋知道我看你？</h2>
    <h3>哼！</h3>
    <h4>不许对我哼，知道不。</h4>
    <h5>你凶我，我这么可爱，你怎么可以凶我！</h5>
    <h6>这五毛钱我不挣了，告辞。</h6>
    <p>我是一个段落</p>
    <a href="www.baidu.com">百度一下，癌症到手</a>
    <br>
    <img src="shabi.jpg" width="310px" height="310px">
</body>
</html>

3）外部样式表（优先级最低）

先单独写在一个以.css结尾的样式表文件，然后在当前文件里链接这个样式表文件。

2、设置字体

font-size:80px;

猫学学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随便记记HTML元素样式、CSS设置元素样式

一、HTML元素样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>病娇少女</title></head><body> <h1>大坏蛋，你看什么看！</h1> <h2>嗯~你不看我咋知道我看你？</h2> <h3>
复制链接

扫一扫