web前端技术与框架-css

最新推荐文章于 2023-10-23 16:34:52 发布

dremcl

最新推荐文章于 2023-10-23 16:34:52 发布

阅读量221

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/dremcl/article/details/104653895

版权

CSS语法

格式：
【属性】：【属性值】；
例如：
设置背景颜色为蓝色
background-color:blue;
引入方式：
在这里插入图片描述
新建一个HTML文件，在主体部分先写上：

div

，然后使用内嵌式引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-color: blue">div</div>

</body>
</html>

背景颜色变为蓝色！

CSS的选择器

标签选择器：【标签名】{}；
ID选择器：#【ID值】{}；
类选择器：.【类名】{}；
使用內部式的方法来设置背景主体为灰色，这是标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">    
        body{
            background-color: grey;
        }
    </style>>
</head>
<body>
<div style="background-color: blue">div</div>

</body>
</html>

ID值选择器，ID值只能唯一，所以一个ID一个值。

  <title>Title</title>
    <style type="text/css">
        body{
            background-color: grey;
        }
        #div_id1{
            background-color: red;
        }
    </style>

<body>
<div style="background-color: blue">div</div>
<div id="div_id1">div2</div>
</body>

类选择器，类可以有多个，一种类对多种标签：

<div class="div_class1">div3</div>
<div class="div_class1">div4</div>

 .div_class1{
            background-color: green;
        }

CSS的常用样式

背景颜色：background-color:【颜色】；
背景图片：background-image:url(【图片地址】)；
图片平铺：background-repeat:
repeat 水平垂直都平铺【默认】
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
插入图片：
图片与HTML位置在一起：

<style type="text/css">
        body{
            /*background-color: grey;*/
            background-image: url("1.jpg");
        }
        #div_id1{
            background-color: red;
        }
        .div_class1{
            background-color: green;
        }
    </style>

最终的结果是：
在这里插入图片描述
选择其他样式的平铺方式：

<style type="text/css">
        body{
            /*background-color: grey;*/
            background-image: url("1.jpg");
            background-repeat: repeat-y;
        }
        #div_id1{
            background-color: red;
        }
        .div_class1{
            background-color: green;
        }
    </style>

字体大小：font-size:【具体大小】；
字体加粗：font-weight:
normal 正常（默认）
bold 加粗
lighter 变细
边框： borde:边框类型，尺寸，颜色；
最终的形式代码和结果入下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            /*background-color: grey;*/
            background-image: url("1.jpg");
            background-repeat: repeat-y;
        }
        #div_id1{
            background-color: red;
            font-size:72px;
            font-weight:bold;
        }
        .div_class1{
            background-color: green;
            border:solid 1px yellow;
        }
    </style>
</head>
<body>
<div style="background-color: blue">div</div>
<div id="div_id1">div2</div>
<div class="div_class1">div3</div>
<div class="div_class1">div4</div>
</body>
</html>