CSS-1:练习

最新推荐文章于 2022-10-31 22:37:19 发布

Zhang_2002_GZ

最新推荐文章于 2022-10-31 22:37:19 发布

阅读量149

点赞数

分类专栏： Web 文章标签： html5

本文链接：https://blog.csdn.net/Zhang_2002_GZ/article/details/120831936

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的三种引用方式</title>
    <!--3.外部样式：引入link-->
    <link rel="stylesheet" href="./css/css01.css">
    <style>
        /*2.内部样式*/
        p{
            color: green;
        }
    </style>

</head>
<body>
<!--1.行内样式（不推荐，一般用于样式比较少或测试）-->
<p style="color: red">我是段落标签1</p>

<p>我是段落标签2</p>

<p>我是段落标签3</p>
<!--新建一个css的样式表-->

<!--样式优先级：行内 > 内部=外部(就近原则：显示后执行的颜色,离它近的样式)-->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器1</title>
    <style>
        /*1.标签选择器*/
        /*直接以当前页面的标签名字为例，当做一个选择器来选择对应的标签让它来实现不同样式的效果*/
        p{
            color: green;
            /*所有的段落标签内容都变为绿色*/
        }
        /*2.class选择器（类选择器）：class属性*/
        /* . class选择器；p1属性值*/
        .p1{
            color: aqua;
        }
        /*3.id选择器：当前页面唯一的*/
        #sp1{
            color: blueviolet;
        }
        #p2{
            color: aquamarine;
        }
    </style>
</head>
<body>
<span id="sp1">我是文本标签</span>
<p>我是段落标签1</p>
<p class="p1" id="p2">我是段落标签2</p>
<p class="p1">我是段落标签3</p>

优先级：id选择器 > class选择器 > 标签选择器（作用范围越大，优先级越低）
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器2</title>
    <style>
        /*4.群组选择器*/
        h2,.p1,#sp1{
            color: cornflowerblue;
        }
        /*5.全选择器*/
        *{
            color: darkorange;
        }
        /*6.层次选择器*/
        /*后代选择器:空格隔开*/
        div p{
            color: aquamarine;
        }
        /*子代选择器: >隔开*/
        div>ul{
            /*color: cadetblue;
            颜色是会继承的，子代的颜色继承给了孙子……*/
            list-style: none;/*去掉列表样式*/
        }
        /*兄弟选择器:从p2往下执行*/
        .p2~p{
            color: blue;
        }
        /*相邻选择器（相邻兄弟选择器）*/
        .p2+p{
            color: blueviolet;
        }
    </style>
</head>
<body>
<h2>我是二级标题标签</h2>
<span class="p3" id="sp1">我是文本标签</span>
<p>我是段落标签1</p>
<p class="p2" id="p2">我是段落标签2</p>
<p class="p1">我是段落标签3</p>
<div>
    <p>我是段落1
        <span>我是段落1中的span</span>
    </p>
    <p class="p2">我是段落2</p>
    <p>我是段落3</p>
    <ul>
        <li>1111
            <ul>
                <li>111222</li>
            </ul>
        </li>
        <li>2222</li>
    </ul>
    <p>我是段落4</p>
</div>
<p class="p2">我是段落标签3</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器3</title>
    <style>
        /*属性选择器name*/
        p[name]{
            color: blueviolet;
        }
        p[name='p2']{
            color: aquamarine;
        }
    </style>
</head>
<body>
<p name="p1">我是段落标签</p>
<p name="p2">我是段落标签1</p>
<span name="p1">我是文本标签</span>
<span name="sp">我是文本标签</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器4</title>
    <style>
        /*伪类选择器：用来添加一些特殊的效果（超链接，（无序）列表）*/
        /*未访问的状态下*/
        a:link{
            color: darkorange;
        }
        /*访问过后*/
        a:visited{
            color: aquamarine;
        }
        /*鼠标滑入连接:放在link和visited之后才有效*/
        a:hover{
            color: darkorchid;
        }
        /*激活状态下：点击未松开，放在hover之后有效*/
        a:active{
            color: bisque;
        }
    </style>
</head>
<body>
<a href="#">我是超链接</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的常用样式</title>
    <style>
        p {
            /*!*字体类型*!
            font-family: 宋体;
            !*字体大小*!
            font-size: 30px;
            !*字体样式*!
            font-style: italic;
            !*字体粗细*!
            font-weight: bold;
            !*字体的小大写:针对英文*!
            font-variant: small-caps;*/
            /*综合样式*/
            /*顺序：样式 小大写 粗细 大小 类型*/
            fond: italic small-caps normal 50px 黑体
        }
    </style>
</head>
<body>
<!--所有字体和文本都会继承-->
<p>我是段落标签哈哈哈</p>
<p>hello</p>
<p>HELLO</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本常用样式</title>
    <style>
        p{
            /*对齐方式*/
            text-align: left;
            /*首行缩进*/
            text-indent: 2em;
            /*文本线*/
            /*text-decoration: line-through;*/
            text-decoration: underline;
            text-decoration-style: double;  /*两条下划线*/
            /*字距*/
            letter-spacing: 20px;
            /*词距：空格隔开的表示一个词*/
            word-spacing: 100px;
            /*行高*/
            /*当高度等于行高的时候会起到垂直居中的效果，高度>行高*/
            line-height: 100px;
            height: 100px;
        }
        span{
            text-align: center;
            /*块状标签以当前标签的宽度为准，进行宽度上的居中，而
            行内标签的宽度就是文本内容的宽度，所以自始至终都是居中状态*/
        }
    </style>
</head>
<body>
<p>我是段落，我有很多文字，我就是文本内容</p>
<span>我是文本</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景的常用样式</title>
    <style>
        div {
            width: 1500px;
            height: 1500px;
           /* border: 1px solid red;
            !*背景颜色*!
            background-color: orange;
            !*背景图片*!
            background-image: url("../VIPC/images/one.png");
            !*背景平铺*!
            background-repeat: no-repeat;
            !*背景大小：宽*高*!
            !*background-size: 800px 400px;*!
            background-size: 50%;
            !*背景定位 top/buttom/left/right/center*!
            !*background-position: left;*!
            !*距离左边50%，距离上面20%*!
            background-position: 50% 20%;*/
            /*复合样式：背景颜色，图片，平铺，定位/大小*/
            background: red url("../VIPC/images/one.png") repeat center/300px;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

Zhang_2002_GZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-1:练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css的三种引用方式</title>  <link rel="stylesheet" href="./css/css01.css"> <style> /*2.内部样式.
复制链接

扫一扫