行内样式:
<h1 style="color: red; font-family: simsun;">大家今天写代码要细心</h1>
优点:直接方便
缺点:可读性,复用性差,布恩那个遵循 W3C 规则。
内部样式:
在页面的
中写:<style type="text/css">
h2{
color: bule;
}
</style>
优点:页面内代码的复用性高
缺点:不能实现页面间的复用
外部样式:
在页面的
标签中引入外部样式:<link rel="stylesheet" href="css/index.css"/>
优点:可以实现页面间的复用,最符合 W3C 的规范:实现标签与样式分离;
(了解)导入样式:不支持 js 的修改
在
中导入:<style type="text/css">
@import url("css/index.css");
</style>
导入样式和外部样式的区别:
三种引用方式的优先级: 行内样式 > 内部样式 > 外部样式
选择器{
样式名1:样式1;
样式名2:样式2;
...
样式名n:样式n;
}
标签名[属性3][属性2][属性3]{}
优先级:id > class >tag
a:link 未被访问的连接样式
a:visited 已经被访问过的样式
a:active 超链接单击时的样式
a:hover 鼠标指针悬停在超链接上的样式
字体样式:
font-family :文字类型,
font-size:字体大小
font-style:字体倾斜类型
font-weight:字体粗细
color:字体颜色
文本样式:
letter-spacing:设置字间距
line-height:设置行高
text-align:水平对齐方式
text-decoration:文本修饰效果
text-indent:文本缩进
背景样式:
background-color:设置元素的被背景颜色
background-color:设置元素的背景图像
background-oisition:设置背景图像的开始位置
background-repeat:设置背景图像如何重复
列表样式:
list-style-type:none;
list-style-pisition:inside 图标的位置
list-style-image:url()设置列表图标为图片
将 html 页面的每一个标签看作是一个盒子
标签内容:边框(border),内边距(padding),外边距(margin)
边框:
border-color:边框颜色
border-style:边框类型,eg:solid(实线),dashed(虚线)
border-width:边框粗细,上右下左的顺序
内边距:标签内容与边框之间的距离
外边距:标签边框与其他标签边框之间的距离,能用外边距微调距离时,就不要使用内边距
盒子模型的宽度=元素的宽度+左右内边距+左右边框线
盒子模型的高度=元素的高度+上下内边距+上下边框线
从前到后的顺序:border->content->padding->background-image->background-color->margin
position:static/ralation/fixed/absolute
static:静态定位,默认的
ralation:相对标签原来的位置发生偏移,不影响其他的元素(父级元素和相邻的元素,没有脱离标准文档流)
absolute:相对当前标签的父标签开始定位(设置了position的父元素,position的值可以是任意,一级一级向上找,直到找到浏览器,当前标签脱离标准文档流)
fixed:并不是所有的浏览器都支持,生成绝对定位的元素,相对于浏览器窗口进行定位
z-index:0/1/2/3 标准文档流是在0上,值越大越靠上
定位原则:一般用来微调标签的位置,能用相对定位就不要用绝对定位
/*将块级元素变成行级元素*/
/*浮动的元素会脱离文档流*/
float:left/right;
/*清除浮动*/
clear:both/left/right;
/***注意:如果一个元素浮动了,后面相邻的元素会受到浮动的影响,如果不想让后面的浮动,就需要清除浮动***/
原文:https://www.cnblogs.com/zhaoningzyn/p/12416364.html