CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/u013383444/article/details/50846129

本文根据实验楼文档而记录的学习笔记，以便复习。

CSS介绍

CSS指的是层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

入门基础

概要和语法

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。
selector {property: value}

h1{
   color:red;
   font-size:14px;
}

属性大于 1 个之后，属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素
下面的示意图为您展示了上面这段代码的结构：

这里写图片描述

注意：如果大于1个单词，则需要加引号，如下：
p{font-family:"sans serif"}

程序举例：
在桌面新建一个空文件，在里面新建index.html和mycss.css两个文件：

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引外部资源 MyCss.css-->
        <link rel="stylesheet" href="mycss.css" type="text/css">
    </head>
    <body>
        <h1>
            hello,world.
        </h1>
    </body>
</html>

mycss.cs

h1{
    color: red;font-size: 50px; //h1 元素内的文字颜色定义为红色，同时将字体大小设置为 50 像素。
}

保存两个文件，点击index.html查看运行效果：

这里写图片描述

高级语法
1.选择器的分组
你可以对选择器进行分组，这样被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是红色的。

h1,h2,g3,h4,h5,h6{
    color: red;
    }

2.继承根据 CSS，子元素从父元素继承属性。看看下面这条规则：

body{
    color: green;
    }

程序举例： index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="mycss.css" type="text/css">
    </head>
    <body>
        <h1>
            shiyanlou
        </h1>
        <a>love</a>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </body>
</html>

mycss.css

h1,a,h2{
    color: red;font-size: 50px;
}
body{color: blue;}
h4{
   color:green;
}

运行效果：
这里写图片描述

在 css 的代码中大家可以看到我们单独定义了 h1,a,h2,h4 和颜色，而没有定义 h3，考虑到继承，h3 的颜色为 body 定义的部分为蓝色。

CSS 入门基础

CSS介绍

入门基础