CSS：简述、三种引入方式、CSS选择器、书写格式
程序员文章站
2022-04-27 22:25:28
...
CSS简述
CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件形式的计算机语言。
- CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- 简单来说CSS就是静态地美化网页。
CSS的引入
1、行内引入
特点：只能给某个元素对象添加样式
<!--行内样式-->
<p style="color: red;">行内引入方式！</p>
2、内部引入
特点：只能在该HTML文档内部使用
<!--内部样式-->
<style type="text/css">
p{
color: yellow;
}
</style>
</head>
<body>
<p>内部引入1</p>
<p>内部引入2</p>
<p>内部引入3</p>
</body>
3、外部引入
特点：可以在多个html文档中使用
在CSS目录创建 .css文件
p{
color: red;
}
在.html文件内引入
<!--外部引入-->
<!--方式一-->
<link rel="stylesheet" href="../css/demo.css" />
<!--方式二-->
<style>
@import url("../css/demo.css");
</style>
生效优先级：
行内引入>内部引入>外部引入
其实是上下问题，HTML文档加载时，是从上到下的，所以下边的会覆盖上面的效果。
CSS选择器
1、元素选择器
元素，就是标签
格式：标签名{}
2、类选择器
格式：.class名{}
3、id选择器
id在文档中是唯一的
格式：#id名{}
扩展：
- ！important>内联样式>id选择器>类选择器=属性选择器=伪类选择器>标签选择器=关系选择器=伪元素选择器>通配符选择器
CSS书写格式：
<style>
div{
border: 1px solid red;
width: 200px;
height: 200px;
background: gray;
}
</style>
注意：
- {}将样式括起来
- 由属性名和属性值构成，属性名和属性值用英文冒号:隔开
- 属性值有多个，值与值之间用空格隔开
- 多个属性之间用英文分号;隔开