一、css概述

·  阅读 72
 一、css概述

一、css概述

一)基础认知css

1.CSS(Cascading Style Sheets)

2.中文:层叠样式表

3.作用:用于定义HTML文档的样式

4.主要发展历程:

1996年发布;

1999年重新修订成css2

在使用的是css3版本,更注重模块化

5.是一种表示型的语言,老版本又叫做联级样式表

二)css的语法规则

选择器      属性
p    { color: blue;}
       属性名  属性值
         
复制代码

三)如何创建/引入方式:(四种样式表)

1.外部样式表(外联):

在html中的标签中添加<link rel="stylesheet "href ="">,链接html与css。 ​ rel=relation *两者路径若在不同的位置(文件夹),是另外的写法

2.内部样式表(内联、内嵌):

在标签里通过style标签书写css样式: 例:

​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{font-size:16px;color:black;}
    <!-- 意思是下面文档中的所有的p元素的内容执行以上样式 -->
    </style>
</head>
​
<body>
     <p>1008611</p>
</body>
复制代码

3.行内样式表(内嵌):

在开始标签通过style属性书写css: 例:

<body>
    <p style="font-size: 25px;
     color: rgb(221, 28, 28)">1008611</p>
</body>
复制代码

4.导入样式表:

@import(从外部导入已有的样式表,同外联,很少用)

*三种样式表优先执行顺序:就近原则(三种都写了的话)内嵌>内联>外联;

5.总结

引入方式书写位置作用范围使用场景
内联/内嵌css写在style标签中当前页面小案例
外联css写在单独的css文件中,通过link标签引入多个页面项目中
行内css写在标签的style属性中当前标签配合js使用

\

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改