初识CSS

最新推荐文章于 2022-06-18 20:57:26 发布

张*

最新推荐文章于 2022-06-18 20:57:26 发布

阅读量140

点赞数 1

分类专栏： java 文章标签： CSS

本文链接：https://blog.csdn.net/qq_40393135/article/details/92840378

版权

java 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS是英文Cascading Style Sheets 的简称，被译为层叠样式表或者级联样式表；

1997年，W3C（The World Wide Web Consortium）公布的有关样式的第一个标准，W3C将DHTML（Dynsmic HTML）分为三部分:脚本语言（包括 JavaScript 、VBScript等）、支持动态效果的浏览器以及CSS样式；

CSS是一个辅助HTML设计的新特性，其基本思想是将网页内容与表现形式进行分离；
CSS格式由两部分组成：选择器和声明；

选择器是标识元素的术语，可以是HTML标记的名字也可以是为该元素的类名或ID;
声明是指为该元素定义的具体样式，他有两部分组成，一是元素的属性另外一个是该属性定义的值；
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS的优点是：将内容与样式分离，在定义好样式后，可以将站点内所有网页都指向一个单一的CSS文件，如果需要修改样式，只需要修改CSS文件即可，这种更新会应用到所有的使用该样式表的页面；

使用CLASS

使用 CLASS 可以创建同一个HTML 中多种不同的分格，语法为：

标记 . 类名1{ 属性1：属性值；属性2：属性值；属性3：属性值；属性4：属性值； .........}
标记 . 类名2{ 属性1：属性值；属性2：属性值；属性3：属性值；属性4：属性值； .........}

标记与类名之间必须要有 “ . ” 隔开，类名可以自由设定；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实例</title>
    <style>
        .center
        {
            text-align:center;
            font-family: Arial;
            color: blue;
            font-size: 10px;
        }
    </style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>

使用 ID

ID 可以用来为相同的标记指定不同的样式，或者实现将同一规则应用于不同的标记，语法如下：

# ID 名{ 属性1：属性值；属性2：属性值；属性3：属性值；属性4：属性值； .........}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实例</title>
    <style>
        #we
        {
            text-align:center;
            font-family: Arial;
            color: blue;
            font-size: 10px;
            background: cadetblue;
        }
        #center{
            font-size: large;
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="we">标题居中</h1>
<p id="center">段落居中。</p>
</body>
</html>

张*

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS

CSS是英文Cascading Style Sheets 的简称，被译为层叠样式表或者级联样式表；1997年，W3C（The World Wide Web Consortium）公布的有关样式的第一个标准，W3C将DHTML（Dynsmic HTML）分为三部分:脚本语言（包括 JavaScript 、VBScript等）、支持动态效果的浏览器以及CSS样式；CSS是一个辅助HTML设计...
复制链接

扫一扫

专栏目录