静态资源Css基础语法

最新推荐文章于 2023-03-11 11:46:57 发布

陪雨岁岁年年

最新推荐文章于 2023-03-11 11:46:57 发布

阅读量119

点赞数

分类专栏： Web核心

本文链接：https://blog.csdn.net/m0_47649585/article/details/119088227

版权

Web核心专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.css的引入方式

<1>内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式1</title>
</head>
<body>
    <!--内联样式-->
    <h1 style="color: red; font-size: 20px">Hello World</h1>

    <h1>CSS</h1>
</body>
</html>

<2>内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式2</title>
    <!--内部样式-->
    <style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

<3>外部样式【多个网页需要使用相同的样式时，推荐使用这种方式】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式[引入]</title>
<!--    rel是关联的意思，关联的是一个样式表(stylesheet)-->
    <link rel="stylesheet" href="../css/2.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

2.注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*为div标签添加样式*/
        div {
            /*color: red;*/
        }
    </style>
</head>
<body>
<!--div标签-->
<div>div</div>
</body>
</html>

3.基本选择器

【包含全局选择器、元素选择器、类选择器、id选择器等】

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*全局选择器【常用于去外边距】*/
        /** {*/
        /*    background-color: aquamarine;*/
        /*    margin:0;*/
        /*    padding:0;*/
        /*}*/
        /*元素选择器*/
        div {
            color: red;
        }
        /*类选择器*/
        .cls {
            /*margin: 0;*/
            color: blue;
        }
        /*id选择器*/
        #d4 {
            color: green;
        }
        #d5 {
            color: pink;
        }
    </style>
</head>
<body>
<div>div1</div>

<div class="cls">div2</div>
<div class="cls">div3</div>
<h5 class="cls">aaa</h5>

<div id="d4">div4</div>
<div id="d5">div5</div>
</body>
</html>

7.属性选择器

【通过指定的属性名和属性值进行选择】

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*范围越大，则优先级越小，type有具体值则先执行*/
        [type] {
            color: blue;
        }
        [type=password] {
            color: chocolate;
        }
        [type=text] {
            color: pink;
        }
    </style>
</head>
<body>
    用户名：<input type="text"/><br/>
    密码：<input type="password"/><br/>
    邮箱：<input type="email"/><br/>
</body>
</html>

8.伪类选择器

【通过对操作状态进行选择(未访问、悬停、访问中、访问后)】

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a {
            text-decoration: none;
        }
        /*对标签的状态进行选择【伪类选择器】*/
        /*未访问的状态*/
        a:link {
            color: black;
        }
        /*已访问的状态*/
        a:visited {
            color: red;
        }
        /*鼠标悬浮的状态*/
        a:hover {
            color: blue;
        }
        /*已选择的链接状态【正在访问】*/
        a:active {
            color: green;
        }
        /*注意: a:hover必须在css定义中的 a:link 和 a:visited之后，才能生效!
        a:active必须在 css 定义中的 a: hover之后才能生效!
        伪类名称对大小写不敏感。*/
    </style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

9.组合选择器

【组合几种选择器进行选择】

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器*/
       .top li {
           color: red;
       }
        .center li {
            color: blue;
        }
        /*分组选择器*/
        span,#p1 {
            color: green;
        }
    </style>
</head>
<body>
<div class="top">
    <ol>
        <li>aa</li>
        <li>bb</li>
    </ol>
</div>
<div class="center">
    <ul>
        <li>aa</li>
        <li>bb</li>
    </ul>
</div>

<span>span</span>
<p id="p1">段落1</p>
<p>段落2</p>
</body>
</html>

10.浏览器开发者模式图解

在这里插入图片描述

陪雨岁岁年年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
静态资源Css基础语法

1.css的引入方式<1>内联样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>引入方式1</title></head><body>  <h1 style="color: red; font-size: 20px">Hell
复制链接

扫一扫