css书写位置
行内式写法
<p style="color:red;" font-size:12px;></p>
外联式写法
<link rel="stylesheet " href="地址" type="text/css"/>
嵌入式写法
<style type="css/stylesheet">
p{ font-size:20px; color:red; }
</style>
注意：3个不同书写方式的优先级：行内式>嵌入式>外联式（在多少项目中为了保持代码的整洁，都会用嵌入式。维护性高，影响范围广，当整个网站的站点。）
html标签分类
块级元素
典型代表：div、p、li、h1
特点：元素自己独占一行显示（与宽度无关）
可以设置宽度和高度
当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。
行内元素：
典型代表：span 、a、font、strong……
特点：元素在一行显示
不能直接设置宽度高度
<span>我</span> <span>是</span> <span>国</span> <span>人</span>
行内块元素
典型代表：Image,input (表单控件)
特点：元素在一行上显示
可以设置宽度和高度
元素之间的转换
display:inline 将元素转化为行内元素
div{width:10px; height:10px; display:block;}
display:inline-block 将元素转化为行内块元素
div{ width:300px; height:20px; display:inline;}
display:block 将元素转化为块元素
a{ display:block; width:20px; height:30px;}
Css特性
继承性
继承关系：嵌套标签之间，子级会继承父级元素的样式（备注：有关文字的属性都可以继承）
特殊性：a 标签的颜色不能继承，必须对a标签本身进行设置
H标签的文字大小不能改变，必须对H标签本身进行修改
层叠性
样式的覆盖，样式的层叠与类名顺序没有关系，与样式定义顺序有关
.two{color:green;}
.now{color:red;}
<p class="noe two"></p>//红色
优先级
！impotrant > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符>继承
<style type="text/css">
p{ color:red; !important; //优先级最大，红色
color:#foo;
}
<style>
<p>sssss<p>
css优先级法则
1、选择器都有一个权值，权值越大越优秀
2、当权值相等时，后出现的样式设置要优先于先出现的样式设置
3、创造者的规则高于游览者：网页编写者设置的css样式的优先权高于浏览器所设置的颜色
4、继承的css样式不如后来制定的css样式；
时间： 2024-12-29 12:39:01