CSS的书写方式及基础知识

CSS基础

css的整体

1.选择器
2.盒子模型
3.浮动
4.定位
5.动画,伸缩布局(CSS3部分)

CSS概念

作用:

1.美化网页(通过CSS控制标签的样式)
2.网页布局(通过CSS控制标签的位置)

概念

Cascading Style Sheets(层叠样式表|级联样式表|样式表)
注意:CSS是以HTML为基础。

书写方式:

内嵌式

1.先准备一个HTML页面
2.在HTML页面内的head标签中添加一个style标签
3.在style标签中写css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
<p>只剩下麻木的我没有了当年的热血</p>
</body>
</html>
外链式

1.首先新建一个单独的css文件(在该文件中写css代码)
2.通过link标签将该css文件引入到当前的HTML页面中。

<head>
<link href="CSS文件的路径" rel="stylesheet" type="text/css">
</head>

type:定义的是所链接文档的类型,可省略
rel:定义当前文档和被链接文档之间的关系,在这里需指定为stylesheet,表示被链接的文档是一个样式表文件。

行内式

将css代码写在HTML标签内部也就是HTML的根标签中(行内式只对其所在的标签及嵌套在其中的子标签起作用)

<h1 style="color:red; font-size:20px;">也许永远都不会对她说出那句话</h1>

CSS的语法

选择器{属性:值;…}

选择器的分类

      基础选择器
          标签选择器
          类选择器
          id选择器
          通配符选择器
     复合选择器
          标签指定式选择器
          后代选择器
          子代选择器
          并集选择器
          属性选择器
          伪类选择器

发布了29 篇原创文章 · 获赞 3 · 访问量 403

猜你喜欢

转载自blog.csdn.net/dwjdj/article/details/104028399
今日推荐