初始CSS样式
程序员文章站
2022-06-06 19:56:23
...
CSS
层叠样式表，级联样式表，简称样式表
文件后缀 .css
作用：
实现了内容与表现的分离
提高了代码的重用性和可维护性
一个css文件可以被对个HTML文件引入
一个HTML文件可以引入多个css文件
引入css
1）行内样式（内联样式） 只对当前元素起作用
<div style="color: red;"></div>
2）内部样式 只对当前页面起作用
<head>
<style>
/*css样式*/
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
</style>
</head>
3）外部样式 提高了代码的重用性和可维护性，实现了内容与结构完全分离
<head>
<link rel="stylesheet" href=".css"/>
</head>
4）导入式
<head>
<style>
@import "";
</style>
</head>
@import和link的区别：
[email protected]先加载HTML，再加载css样式，link一边加载HTML，一边加载css
[email protected]有兼容性，IE5以上支持，link没有兼容性
[email protected]只能引入css文件，link还可以引入其他内容
[email protected]会增多http请求
基本选择器
7.基本选择器
1）全局选择器，通用选择器 *
选中网页所有内容
2）元素选择器 div a img b p span ul li table input
选中所有指定的元素
3）类选择器
<div class="className"></div>
.className{}
class名字可以重复，class名字可以起多个，用空格隔开
4）ID选择器
<div id="idName"></div>
#idName{}
id名字唯一
选择器优先级：行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重： 1000 100 10 1
优先级相同，后面的代码生效
5）合并选择器
选择器1,选择器2,...{}
提取共同样式