css实例001--标签选择器

css 实例001 标签选择器

选择器就是选择给谁设置样式,选择的过程就是选择器的作用

<!DOCTYPE html>
<html lang="zh-CN">
<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>css001</title>

    <!-- css就是美化布局页面的 网页的主体写在body里面 css写在 head 里面 style -->
    <!-- html 可以做一些简单的样式,但是内容非常繁琐费劲,css是层叠样式表 用起来更方便 也是标记语言 -->
    <!-- css 包括选择器 和样式 就是 给谁设置什么样式 -->
    <style>
        /* css 的选择器 包括 普通选择器 和 复合选择器 */
        /* css 可以让html专门做结构 而css去做样式 */
        /* 普通选择器包括 标签选择器、类选择器、id选择器、 */

        /* 标签选择器:如下html 男性都是在 p 标签里面 女性都是在div 标签里面 我们如果需要把男性都改为红色 把女性都改为绿色 就可以通过标签选择器进行选择修改 */
        /* 属性与属性值":"连接 属性与属性之间用";"连接 风格为展开样式,保留空格 小写形式 */
        p {

            color: red;                     /*将字体颜色改为红色*/
            font-size: 20px;                  /*将字体大小改为20像素*/
        }

        div {
            color: green;                   /*字体改为绿色*/
            font-size: 20px;
        }  ;   

        /* 如上所示:通过标签名称可以选择所有的标签 对标签内容进行样式修改 */
        

    </style>

</head>
<body>
    <p>小明:男</p>
    <p>小亮:男</p>
    
    <div>
        小红:女<br>
    </div>
    <div>
        小绿:女<br>
    </div>


</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值