3.CSS2024-11-02

4.JavaScript引入方式2024-11-02 5.JavaScript基础语法2024-11-02 6.JavaScript 对象2024-11-02 7.JavaScript BOM2024-11-02 8.JavaScript DOM2024-11-03 9.JavaScript 事件监听2024-11-03 10.JavaScript 正则表达式2024-11-03 11.Jsp if判断2024-12-02 12.jsp+Mybatis+Mysql web开发制作模板02-20

一 CSS导入方式

点击查看代码

1.内联 在标签内部使用style属性，属性值是css属性键值对
2.内部 定义<style>标签 在内部定义
3.外部 定义link标签 引入外部CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>


    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>

    <div style="color: red">hello css</div>

    <span>hello css </span>


    <p>hello css</p>
</body>
</html>

二 CSS选择器

点击查看代码

1. 元素选择器 
  元素名{color:red;} div{color: red;}
2. id选择器
  #id属性名{color:red;}
  #name{color: red;}
  <div id="name">hello css2</div>
3. .class选择器
  .class属性值{color: red;}
  .cls{color: red;}
  <div class="cls"> hello css3</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: pink;
        }
    </style>


</head>
<body>

<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>

posted @ 2024-11-02 21:08 QixunQiu 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript引入方式

· HTML标签

· CSS(css导入---css选择器）

· Css导入方式

· CSS简单了解

公告

昵称： QixunQiu
园龄： 8个月
粉丝： 3
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

CSS

公告

搜索

常用链接

合集

随笔档案

阅读排行榜