初识CSS

首页 > 代码库 > 初识CSS

2024-10-09 23:39:01 213人阅读

css解释

css样式:

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。

存在方式有三种：元素内联、页面嵌入和外部引入

语法：style = ‘key1:value1;key2:value2;‘

在标签中使用 style=‘xx:xxx;‘

在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式

引入外部css文件

优先级：标签>页面镶入>外部，这个仅限同样的样式冲突是才有用

元素内联：

直接在标签上应用：代码如下：

<div style="color: red">
    ares
</div>

显示效果如下：

技术分享

页面嵌入

在头部写好css样式然后应用：代码如下

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
    <style>
        .re{
            color: green;
        }
        #name{
            background-color: red;
        }
        /*所有span标签都会引用*/
        span{
            font-size: 100px;
        }
    </style>

</head>
<body>
<div style="color: red">
    ares
</div>
<span class="re">
    <!--这里应用指定好的CSS样式名即可-->
    ares ares
</span>
<div style="color: red" id="name">
    aresaresares
</div>

</body>

显示效果如下：

技术分享

CSS的外部引用

写一个独立的文件存储css样式代码如下：

技术分享

html代码如下：

<head>
    <meta charset="UTF-8">
    <title>ares</title>
    <link rel="stylesheet" href="common.css">
    <!--这里通过link导入样式，有点类似与python导入模块中的import *-->
</head>
<body>
 <!--这里直接应用指定好的CSS样式名即可-->
<div class="re">
    ares
</div>
</body>

显示效果如下：

技术分享

CSS样式应用中通过class应用CSS样式即可，还有两种方式代码如下：

id应用，"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> #name意思就是所有id为name的都会使用这个Css样式，代码如下：

<head>
    <meta charset="UTF-8">
    <title>ares</title>
    <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
    <style>
        #name{
            background-color: blue;
        }
    
    </style>

</head>
<body>
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
<div style="color: red" id="name">
    aresaresares
</div>

</body>

显示效果如下：

技术分享

标签应用，为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式,与name类似

CSS常用属性

background 【背景】

background-color 背景颜色代码如下：

<div style="background-color: aqua;font-size: 50px">
    ares
</div>

显示效果如下：

技术分享

background-image 背景图片代码如下：

    <div style="background-image: url(favicon.ico);height: 80px;" >
    </div>

显示效果如下：

技术分享

首先确认，div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：

    <div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
    </div>

显示效果如下图：

技术分享

border 【边框】

设置边框，效果图如下图：

技术分享

代码如下：

 <!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
    <!--第一种：线的粗细为1像素，实线、红色-->
    <div style="border:1px solid red;height:50px" ></div>
    <!--第二种：线的粗细为1像素，点、蓝色-->
    <div style="border:1px dotted blue;height:50px" ></div>
    <!--第三种：线的粗细为1像素、虚线、紫色-->
    <div style="border:1px dashed purple;height:50px" ></div>

边框可以单独的设置一边的边框、上、下、左、右

代码如下：

<!--边框-->
<div style="border-left: 30px green solid;">aresssss</div>
<div style="border-right: 30px green solid;">aresssss</div>

显示效果如下：

技术分享

cursor 鼠标停放所显示的效果

代码如下（鼠标停放在字体位置会变成相应形状）：

    <div style="cursor:pointer">停放在这里显示小手(pointer)</div>
    <div style="cursor:help">停放在这里显示问号(help)</div>
    <div style="cursor:wait">停放在这里显示问号(wait)</div>
    <div style="cursor:move">停放在这里显示移动(move)</div>
    <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

浮动 float （用的非常多，用来布局使用）

效果图如下：

技术分享

代码如下：

<head>
    <meta charset="UTF-8">
    <title>ares</title>
    <link rel="stylesheet" href="common.css">
    <style>
        .w-left{
            width: 30%;
            background-color: blue;
            height: 100px;
            float: left;
        }
        .w-right{
            width: 70%;
            background-color: green;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="re">
    ares
</div>
<div>
    <div class="w-left"></div>
    <div class="w-right"></div>
</div>

注：有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色，解决办法是在父的div内加一条：

<div style="clear:both;"></div>

CSS选择器

标签选择器

　　为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：

<head>
    <meta charset="UTF-8">
    <title>ares</title>
    <style>
        /*标签选择器*/
        div{
            font-size: 20px;
        }
       
    </style>
</head>
<body>
<div>ares</div>
</body>

显示效果如下：

技术分享

ID选择器

　　为指定的ID设置样式，代码如下（id选择器中ID不可以重复）：

<style>
        /*ID选择器*/
        #i1{
            background-color:red;
        }

  </style>

<body>

/*为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同*/

<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a> </body>

效果图如下：

技术分享

类选择器

　　class选择器，id是可以相同的，代码如下：

    <style>
        /*类选择器标签*/
        .cls{
            background-color:blue;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <!--任何类型的标签都可以调用类选择器-->
    <div class="cls">
        class test div
    </div>
    <a class="cls">
        class test a
    </a>
    <span class="cls">
        class test span
    </span>
</body>

注：上面的3个选择器一般不要用标签&id选择器

关联选择器

<body>
<style>
    .container li{
        /*为一个标签应用了,类选择器,下的li标签设置样式*/
        background-color: red;
    }
</style>
<!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式-->
<div class="container">
    <ul>
        <li>ares</li>
        <li>ares</li>
        <li>ares</li>
    </ul>
</div>
</body>

显示效果如下：

技术分享

关联选择器：应用场景为某标签下面的标签设置指定的样式：当然可以再在每个li标签内定义class

问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！

<style>
    .container li{
        /*为一个标签应用了,类选择器,下的li标签设置样式*/
        background-color: red;
    }
    .container li a{
        background-color: green;
    }
</style>
<!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式-->
<div class="container">
    <ul>
        <li>ares</li>
        <li>ares</li>
        <li>ares</li>
        <li>
            <a>ares</a>
        </li>
    </ul>
</div>

显示效果如下：

技术分享

组合选择器

有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？

.container .a .cc1 {
                background-color: pink;
            }
            .container .a .cc2 {
                background-color: pink;
            }

解决方法代码如下：组合选择器1

            .container .a .cc1,.container .a .cc2  {
                background-color: pink;
            }

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

            .container .a .cc1,.cc2  {
                background-color: pink;
            }

这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：

            /*组合选择器*/
            .container b ,.a .cc1,.cc2  {
                background-color: pink;
            }
            /*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/
            .container b
            .container b .a .cc1
            .container b .cc2
　　　　　　　......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法

属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码：

我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性

    <div>
        <input type="text" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

怎么做呢？在组合选择器后面加个[type=“text”]即可

    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"] {
            border:3px solid red;
        }
    </style>

效果如下：

技术分享

需求又来了，我想找到input标签为type为text并且name为“ares”的那个input标签

    <div class="con">
        <input type="text" />
        <input type="text" name="ares"/>
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：

    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][name="ares"] {
            border:3px solid red;
        }
    </style>

效果图如下：

技术分享

属性标签经常用，要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][ares="cainiao"] {
            border:3px solid red;
        }
    </style>
</head>
<body>
    <div class="con">
        <input type="text" />
        <input type="text" ares="cainiao" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>
</body>
</html>

属性选择器&自定义属性

初识CSS

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 初识CSS

初识CSS

css解释

CSS常用属性

看完仍有疑问？有类似问题直接问程序猿