css基础语法
一、CSS格式
选择器{
属性名:属性值;
属性名:属性值;
}
选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式
二、CSS三种引入方式
1.行间式
<p style="color:red;"</p>
2.内联式
<style>
p {
color:red
}
</style>
3.外联式
p {
width: 100px;
height: 100px;
background-color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
三种引入方式对比
<!-- 行间式 -->
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key:value新式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- 内联式 -->
<!-- 1.在style标签内(style标签一般作为head的子标签) -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key:value新式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式:选择器{样式块} -->
<!-- 外联式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key:value新式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- 5.格式:选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般在head里面) -->
三种引入方式的优先级
注:三种方式间没有优先级
<!-- 1.三种方式协同布局: -->
<!-- 2.不重复的属性一定为唯一位置的唯一值 -->
<!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 -->
<!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) -->
<!-- !important 会影响优先级 -->
补:CSS的注释:
/*注释内容*/
三、CSS的长度单位和颜色单位
1.CSS基本长度单位
- px像素,屏幕上显示的最小单位,用于网页设计