CSS的了解和操作语法

最新推荐文章于 2024-03-29 03:40:16 发布

White.Magic

最新推荐文章于 2024-03-29 03:40:16 发布

阅读量77

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/weixin_44659258/article/details/104373146

版权

python 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

CSS

CSS的了解

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
（摘自百度百科）

CSS的语法

格式：
【属性】:【属性值】;
例如：
设置背景颜色为蓝色
background-color:blue;

CSS的引入方式

内嵌式：
< div style=“background-color:blue”>
内部式：
< style type=“text/css”>
/ * css代码 * /
< /style>
外部式：
< link rel=“stylesheet” type=“text/css"href=”【css文件地址】">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS操作</title>
    <style type="text/css">

    </style>
    <link rel="stylesheet" type="text/css"href="name.css">
</head>
<body>
<div style="background-color:blue">div</div>
</body>
</html>

CSS的选择器

标签选择器：
【标签名】{};
ID选择器：
#【ID值】{};
标签的ID唯一
3.类选择器：
.【类名】{};
多个标签可以同属一个类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS操作</title>
    <style type="text/css">
        body{
            background-color: grey;
        }
        #div_id1{
            background-color: red;
        }
        .div_class1{
            background-color: green;
        }
    </style>
    <link rel="stylesheet" type="text/css"href="name.css">
</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>

CSS的常用样式

背景颜色：background-color:【颜色】
背景图片：background-image:url(【图片地址】);
图片平铺：background-repeat:
repeat 水平垂直都平铺（默认）
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
字体大小：font-size:【具体大小】;
字体加粗：font-weight:
normal 正常（默认）
bold 加粗
lighter 变细
边框：border:边框类型，尺寸，颜色；
边框类型：solid实线、dash虚线
尺寸：1px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS操作</title>
    <style type="text/css">
        body{
            background-image:url("1.jpg") ;
            background-repeat: no-repeat;
            /*background-color: grey;*/
        }
        #div_id1{
            background-color: red;
            font-size: 72px;
            font-weight: bold;
        }
        .div_class1{
            background-color: green;
            border: solid 1px yellow;
        }
    </style>
    <link rel="stylesheet" type="text/css"href="name.css">
</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>

White.Magic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的了解和操作语法

CSSCSS的了解层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的...
复制链接

扫一扫