css引入
1.行间样式 style属性
优点:直接写在标签内,对该标签生效
缺点:内容和样式没有分离,代码阅读性比较差,样式不能复用
2.内部引入 style标签
优点:样式可以复用,样式和内容分离,提高代码阅读性
缺点:代码并没有完全复用
3.外部引入 引入css文件
优点:可以让样式在不同的html文件中得到复用,也让内容和样式得到分离
缺点:外部引入会让网页在加载的过程中发送一次额外的请求
选择器
统配选择器 * 对所有的标签生效
类选择器:.class{} 1.标签里面添加class属性 class=“test”
2.在style里面写.test{}给所有的类名为test的标签添加属性
3.一个标签可以有多个类名(类名之间用空格隔开),一个类名可以被多个标签使用
id选择器:#id{} 1.在标签里面添加id属性 id=“test”
2.在style里面写#test{}给id为test的标签添加属性
3.一个标签一般只有一个id,一个id能被一个标签使用
标签选择器:使用标签名{}给所有这个名字的标签添加样式,范围很大。一般用于重置标签的默认样式
后代选择器:是一个结构,子父(父父)级的结构,子级在后,样式作用域最后一个子级
群组选择器:样式会作用于多个选择器,代表每一个用逗号隔开的选择器都会拥有这种样式
优先级问题
只有当两个选择器里面的样式出现冲突之后才会产生优先级的概念
样式不冲突的时候每一个选择器里面的样式都会生效
优先级可以以权值来计算{
* 0;
标签选择器 1;
类选择器 10;
id选择器 100;
style行间样式 1000;
!important 10000;
后代选择器 会先去查找后代选择器里面权值最高的选择器,然后看个数来比较
}
边框
边框颜色 border-color;默认和字体颜色一样
边框粗细 border-width;默认3px;
边框形状 border-style;没有默认值,是边框的必要属性 solid 实线 dashed 虚线 dotted 点状线
给元素添加边框之后,整个元素大小会发生变化
边框的属性都可以分为四个方向来写border-(方向)-(属性)
圆角效果
外边距(margin)
可以设置负数
left.top一般会让自身位置发生变化,bottom和right一般会让下方和右侧的元素位置发生变化
在使用margin-top的时候,如果父级没有边框,会把父级带下来
解决方法:给带有margin-top的元素的父级添加边框
margin的复合写法