css自用

css样式表：
1、外部样式表 ---->写好demo.css 文件，并在当前html页面引入
2、内部样式 ---->在head标签中使用 例如<style> </style>
3、内联样式 ---->直接在标签中使用，例如<div style=“width:500px height:500px”> </div>

加载样式表优先权：
内联样式>内部样式>外部样式表
外部样式表：
只需要引入外部样式表，就可以使用，大大减少代码重复率
内部样式：
只针对当前的html，可以针对当前html中所有标签
内联样式：
只针对当前标签，对当前html页面其他标签无效
企业开发：
1、所有页面都需要公共的样式可以提取出来放到外部样式表中
2、针对不同页面不同样式需求可以使用内部样式
3、特殊标签需要独有样式，采用内联样式

外部样式表引入格式： <link href=“outstyle.css” type=“text/css” />

css选择器：标签选择器(元素选择器)：
div{} h1{}
组合标签：多个标签采用逗号隔开，例如： body,h1,div,p,ul,li{margin: 0;padding: 0}
类选择器：
当有一个标签时： <div class=“classname”> </div >
采用的类选择器方式 .classname{
}
类组合选择器：例句：
<p class=“ph”> </p >
p.ph{
color:red;
}
id选择器：
<div class=“one”> </div >
#one{
}
属性选择器：
a[id]{
color:red;
}
p[id]{
color:blue;
}
<p id=“one”> </p >
<a id=“one”> </a >
后代选择器:当span是div的字标签时
div span{
color:red;
}
兄弟选择器：
h1 + a{
color:red;
}
<div>
<h1> </h1>
<a> </a>
</div >

伪类选择器：
a:link {color: red} /* 未访问的链接 /
a:visited {color:black} / 已访问的链接 /
a:hover {color: yellow} / 鼠标移动到链接上 /
a:active {color: green} / 选定的链接 */

选择所有元素：*{}

页面属性 ;
块级标签 ： display:block;
浮动 float: left / right ；
清除浮动：clear: both；
绝对定位：position：absolute；
相对定位：position：relative；
背景图片 ：background-image: url(相对位置)
边框：border：“数值”;
内边距： padding
外边距：margin