首页 > 代码库 > 初识CSS

初识CSS

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