css基础

最新推荐文章于 2023-08-18 20:40:23 发布

托马斯，成

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量343

点赞数 5

分类专栏：前端文章标签： css基础

本文链接：https://blog.csdn.net/ZXCNIUBI/article/details/99960469

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

css基础

css基础

1. css导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础</title>
    <style>
        p1{
            color: green;
        }
    </style>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p1>第一种导入方式</p1>
    <div style="color: red">第二种导入方式</div>
    <div>第三种导入方式</div>
</body>
</html>

在这里插入图片描述
主要有三种方式导入，第一种通过标签在head中改style风格，这种在html中哪一个博客中我也写到过，第二种就是直接在标签中改写style,主要说第三种，第三种是通过导入外部文件的，rel后面跟着的是文件的格式，这是虽然是css，但是填的是stylesheet，因为创建的时候显示的就是这个，第二个是文件名，这样如果想修改文件的风格的话，就可以在另一个文件中填写了。
在这里插入图片描述
当然格式我也截了一个屏
其实这里还有一个问题就是如果都有怎么办呢，也就是说如果一个代码中三个都使用了先用哪个后用哪个呢，这个其实也不用刻意去记，其实就是哪个离这个body代码中的所调用的标签近就哪个，这个原因就是因为代码的重写，最后才能执行

2. css选择器（import）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础</title>
    <style>
        p{
            font-size:20px
        } /*标签选择器*/
        .test1{
            color: red;
        } /*class选择器*/
        #one{
            background-color: wheat;
        } /*id选择器(唯一的)*/
        .test2>span{
            color: red;
            font-weight: bolder;
        } /*子代选择器*/
        .test2 span{
            font-size: 90px;
        } /*后代选择器*/
        .test3>div~p{
            color: chartreuse;
        } /*兄弟选择器，选择指定的后面的标签*/
        .test3>div+p{
            color: chartreuse;
        } /*相邻选择器，选定的也是目标后面的语句而且只是一个*/
        *{
            font-family: 华文琥珀;
        } /*全选择器，但是用的不多，因为优先级问题*/
        p[hh="www"]{
            color: aquamarine;
        } /*属性选择器*/
         p[hh="www"],p[hh="w"]{
            color: aquamarine;
        } /*分组选择器*/

    </style>
</head>
<body>
    <p class="test1" id="one">我就是我不一样的烟火</p>
    <div class="test2">
        <span>啦啦啦</span>
        <p>我是<span>最</span>棒的</p>
    </div>
    <h3 class="test3">
        <p>一</p>
        <p>二</p>
        <div class="test4">参照物</div>
        <p>三</p>
        <p>四</p>
    </h3>
    <p class="t1" id="two" hh="www">属性选择器1</p>
    <p class="t1" id="two" hh="w">属性选择器2</p>
</body>
</html>

在这里插入图片描述
这是运行结果。

标签选择器

这个是最通用的，就是比如你写个p标签的话，可以直接在head的上面的style中利用p{}来填写。

class选择器

首先在标签中，定义一个class，然后在head中通过.这个class就可以调用改写风格了。

id选择器

这个和class选择器很像，通过#来调用，但是这个的区别是id唯一。

子代选择器

通过调用一个父代再加上一个子代的方式调用，中间通过>来连接，当然这个是一层层的往下对应查找。

后代选择器

这个是在子代的基础上来加强了一些，主要就是不一定都要一层层的往下来，只要这里面有的子代都可以选中，当然通过两个之间加上空格就可以了。

兄弟选择器

这个就是说想让某个语句后面的全部都改一下的话，就可以通过兄弟选择器，这个都是指标志物的后面的语句，一般都在存在子类的语句中使用，前面加上~调用

相邻选择器

和兄弟选择器很像，通过+调用，这个只能选择参照物后面的一个目标。

全选择器

这个用的不多，主要通过*就可以调用，这个优先级问题很难受。

属性选择器

如果一个p标签中间可能需要选择很多的指定物，如果只有两个的话是不够用的，所以用属性选择器来弥补这个缺陷，就是在标签中自己命名一个，然后就是在head中如果想要调用的话，就通过[]中间加上属性就可以了

分组选择器

分组选择器就是通过逗号来快速的使两个标签都相同的操作。

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础</title>
    <style>
        a{
            color: black;
            font-size:100px;
        } /* 原来的样式 */
        a:hover{
            color: red;
            font-size: 100px;
        } /*当鼠标放在所指的标签上面 */
        a:active{
            color: wheat;
            font-size: 40px;
        } /*点击之后的，也就是激活之后的页面显示
    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">我是百度</a>


</body>
</html>

在这里插入图片描述

相关功能描述已经写了，主要就是hover重要一些，就是你鼠标划过之后会变化，这个很重要

3.常用的文本功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础</title>
    <style>
        .a1{
            font-family: 华文琥珀; /*字体*/
            font-size: 40px; /*字体大小*/
            color:red; /*字体颜色*/
            font-weight: bolder;/*粗体*/
            /*font-style: italic; !*斜体*!*/
            text-decoration: underline; /*下划线*/
            text-decoration:line-through; /*删除线*/
            text-decoration: none;/*没有下划线,这个用的多*/
        }
        p{
            text-indent: 2em; /*文章开头空几个格子*/
            line-height: 1.5em;/*行间距*/
            letter-spacing: 10px; /*文字间距*/
            word-spacing: 10px; /*字母间距*/
            text-transform: capitalize;/*首字母大写*/
            text-transform: uppercase;/*全部大写*/
            text-transform: lowercase;/*全部小写*/
        }
        .text1{
            height: 200px;
            width: 200px;
            line-height: 200px; /*实现文字的上下居中，但是要让这个值等于height*/
            border:1px solid red ; /*边框，这个在css进阶中会重新提到*/
            text-align: center; /*居左，居中，居右,左右*/
            color: rgb(199,15,15); /*调节颜色，主要通过三原色的比例来调节*/
            background-image: url("one.png");/*背景图片，但是一定要让背景图片放进同一个文件夹下*/
        }
        .text2{
            height: 200px;
            width: 200px;
            border:1px solid red ; /*边框，这个在css进阶中会重新提到*/
            white-space: nowrap;/*不换行*/
            overflow: hidden;/*溢出部分隐藏*/
            text-overflow: ellipsis;/*溢出部分变成...*/
        }
        .a2{
            color: chartreuse;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank" style="cursor: pointer" class="a1">我是百度拉拉啊拉lalalalalalalal<br>lalalalalalal<br>afwjwf</a>
    <p>第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章，abcabcabcabcabcabcbacbabcbbacbcabacbcabab</p>
    <div class="text1">我想居中</div>
    <div class="text2">第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章</div>
    <a href="javascript:void (0);" class="a2">我是不动的</a>
</body>
</html>

在这里插入图片描述
这里就是跑出来的样式图，主要功能我注释写的也还是很清楚的，这里的javascri:void(0)是让标签不动，就是点击之后没有反应，而style="cursor: pointer"是让你的鼠标放在标签上时会出现小手。

这里还有总结，方便查找。

托马斯，成

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css基础

文章目录css基础1. css导入方式2. css选择器（import）标签选择器class选择器id选择器子代选择器后代选择器兄弟选择器相邻选择器全选择器属性选择器分组选择器伪类选择器3.常用的文本功能css基础1. css导入方式<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫

专栏目录