CSS基础（一）

一、定义

名字：英文名Cascading Style Sheets，样式表、级联样式表、层叠样式表

作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式

二、语法

1、格式：

　　标签名{}

</style>

2、css代码写在style标签里面，并且在head标签内

3、{}中写键值对

语法：属性名1:属性值1;属性名2:属性值2 #不同属性用;隔开

常用属性如下

颜色：color

字号：font-size #属性值单位是像素，必须带上px

字体：font-family

对齐方式：text-align #居中|右对齐|左对齐 center|right|left

首行缩进：text-indent #可以将一个段落首行缩进，属性值单位是em，em表示一个文字的距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--所有的css语法都写在style标签中-->
        <style type="text/css" >
            /*这里的p代表对body标签中的p标签(段落)做css样式美化*/
            p{ color:red;font-size:30px;font-family:"黑体";text-align:left;text-indent:2em}
        </style>
    </head>
    <body>
        <p>当古文明只剩下难解的语言，<br>传说就成了永垂不朽的诗篇。</p>
    </body>
</html>

实体化三属性：

宽度width，高度height，背景色background。其实也是css的{}键值对中的属性而已

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css" >
            /*表示在p标签中输出一个100*100像素的粉色背景*/
            p{ width:100px;height:100px;background:pink; }
        </style>
    </head>
    <body>
        <p></p>
    </body>
</html>

三、选择器

1、标签选择器

直接在css语法中写标签名字，就可以选中对应标签，如上一节的css对p标签中的内容进行美化。

除了p标签之外，html的body中还经常使用到：

div标签代表大盒子（存放内容）

span标签代表小盒子（存放内容）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css" >
            p{ color:red; }
            div{ color:green; }
            span{ color:blue }
        </style>
    </head>
    <body>
        <p>我是p标签</p>
        <div>我是div标签</div>
        <span>我是span标签</span>
    </body>
</html>

2、id选择器

想要给多个p标签设置不同的css属性，在不同的p标签加id区分即可

使用方法：# + id名字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css" >
            #p1{ color:red; }
            #p2{ color:green; }
            #p3{ color:blue; }
        </style>
    </head>
    <body>
        <!--id相当于人的身份证号，一定是唯一的，不能重复使用，也不能一个标签设置多个id-->
        <p id="p1">我是p1标签</p>
        <p id="p2">我是p2标签</p>
        <p id="p3">我是p3标签</p>
    </body>
</html>

3、class选择器

class选择器可以替代id选择器，并且更实用。

使用方法：. + class名字

特点：可以被多个p标签使用；一个p标签可以有多个class属性值，不同值用空格隔开即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css" >
            .p1{ color:red; }
            .p1-1{ font-size:30px; }
            .p2{ color:green; }
            .p3{ color:blue; }
        </style>
    </head>
    <body>
        <!--这里对class设置了两个值p1和p1-1-->
        <p class="p1 p1-1">第一行</p>
        <p class="p2">第二行</p>
        <p class="p1">第三行</p>  <!--这里的class值也是p1-->
    </body>
</html>

4、一个案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            span{ font-size:100px; }
            .logo-blue{ color:blue; }
            .logo-red{ color:red; }
            .logo-yellow{ color:yellow; }
            .logo-green{ color:green; }
        </style>
    </head>
    <body>
        <!--span标签的内容是不换行显示的-->
        <span class="logo-blue">G</span>
        <span class="logo-red">o</span>
        <span class="logo-yellow">o</span>
        <span class="logo-blue">g</span>
        <span class="logo-green">l</span>
        <span class="logo-red">e</span>
    </body>
</html>

四、基础选择器权重

id选择器 > class选择器 > 标签选择器

下面例子使用不同的选择器对一个段落定义不同的颜色，看下哪个选择器定义的颜色会生效哪个权重就最大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #p-id{ color:green; }
            .p-class{ color:blue; }
            p{ color:red; }
        </style>
    </head>
    <body>
        <p id="p-id" class="p-class">木叶飞舞之处 火亦生生不息</p>
    </body>
</html>

五、css引入方式

1、内嵌式

本篇文章前面使用的css全都是内嵌式

使用方法：style标签放在head标签中

优点：比外链式稍微快一点。电商首页必须使用这种方式，因为电商首页要求加载速度必须快

缺点：html和css代码没有实现分离，维护不方便

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p{ color:red; }
        </style>
    </head>
    <body>
        <p>木叶飞舞之处 火亦生生不息</p>
    </body>
</html>

2、外链式

使用方法：通过link放在head标签中，link中写css文件路径

优点：实现了代码分离，维护方便

缺点：运行速度比内嵌式稍慢

html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="new6.css" />
    </head>
    <body>
        <p>木叶飞舞之处 火亦生生不息</p>
    </body>
</html>

css文件： #和html文件放在同一路径下

p{ color:red; }

3、行内css

这种方式运行慢、维护不方便，已淘汰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="color:red;">木叶飞舞之处 火亦生生不息</p>
    </body>
</html>

posted on 2021-03-17 19:37 vorn 阅读(101) 评论(0) 收藏举报

刷新页面返回顶部

vorn