css学习之css语法

最新推荐文章于 2024-09-09 20:11:58 发布

pantherCode

最新推荐文章于 2024-09-09 20:11:58 发布

阅读量426

点赞数

分类专栏： fe学习文章标签： css html 前端 color 实例

本文链接：https://blog.csdn.net/liu136313/article/details/50574693

版权

fe学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明组以大括号({})括起来:

p {color:red;text-align:center;}

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

demo1：

<!doctype>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        body {
            background-color: #ffff00; /**body背景颜色为黄色**/
        }

        h1 {
            font-size: 36pt; /**h1字体大小为36pt**/
        }
        /**
        字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？
        先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；
        pt就是point，是印刷行业常用单位，等于1/72英寸。
        这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。
        pt全称为point，但中文不叫“点”，查金山词霸可以看到，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。
        因此就有这样的说法，pixel是相对大小，而point是绝对大小。
        **/
        h2 {
            color: blue;
        }

        p {
            margin-left: 50px; /**段落左边距是50px**/
        }
    </style>
</head>

<body>
<h1>测试一</h1>

<h2>测试二</h2>

<p>测试三</p>
</body>
</html>

demo2：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <style>
        body {
            background-color: tan;
        }

        h1 {
            color: maroon;
            font-size: 20pt
        }

        hr {
            color: navy;
        }

        p {
            font-size: 11pt;
            margin-left: 15px;
        }

        /**link:连接平常的状态**/
        a:link {
            color: green;
        }

        /**visited:连接被访问过之后**/
        a:visited {
            color: #ffff00;
        }

        /*hover:鼠标放到连接上的时候*/
        a:hover {
            color: black;
        }

        /*active:连接被按下的时候*/
        a:active {
            color: blue;
        }
    </style>
</head>
<body>
<h1>
    测试一
</h1>
<hr>
<p>测试二</p>
<!--_blank-->
<!--浏览器总在一个新打开、未命名的窗口中载入目标文档。-->
<!--_self-->
<!--这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。-->
<!--_parent-->
<!--这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。-->
<!--_top-->
<!--这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。-->
    <p><a href="http://www.baidu.com" target="_target">测试三</a></p>
    <p><a href="http://www.baidu.com" target="_self">测试四</a></p>
    <p><a href="http://www.baidu.com" target="_parent">测试五</a></p>
    <p><a href="http://www.baidu.com" target="_top">测试六</a></p>
</body>
</html>

demo1：

demo2：

pantherCode

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css学习之css语法

CSS 实例CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。CSS声明总是以分号(;)结束，声明组以大括号({})括起来:p {color:red;text-a
复制链接

扫一扫

专栏目录