css相关属性和权重问题

一.布局标签<div></div>

二.span和hr <span></span>
默认横着排列 表示一个字符或者一小段文本
水平线<hr>单标记

三.不常用标签 上标：<sup></sup>
下标：<sub></sub>
版权：©
商标：&reg；
空格：&nbsp；
左右尖角号：&gt；&lt；

四.css基础：
cascading style sheet 层叠样式表
作用：可以修饰网页内容，类似生活中的化妆师
书写顺序：先写body结构，再写style，最后写css代码
CSS的引入方式：
外部样式 适合整站开发或者是比较长的页面
引入方式1

		<link rel="stylesheet" href="linkdemo.css"/>引入css样式表
		<link rel="icon" href="pic.png"/>引入浏览器的图标

引入方式2

			@import url(importdemo.css);

link和import之间的区别？
1、本质区别
link是HTML标签的写法，属于结构。而import是写在style里面的，属于css的语法引入
2、加载顺序不同
link引入的css样式，会在浏览器加载的时候，让HTML结构和css样式同时加载
import引入的css样式，会在浏览器加载的时候，先加载HTML结构，之后再加载css样式
3、兼容性不同
link是没有兼容问题，但是import在IE5.0以下版本不识别

综上所述，会选择用link引入外部的css文件

内部样式 适合案例或者短小的页面
使用过程：

1、在body中创建想要修饰的对象，<div></div>
2、在head标签内创建一个<style type="text/css"></style>标签

说明：
A、type="text/css"可以写可以不写
B、style标签放在任何地方都可以，但是建议放在head里面，原因是因为浏览器在加载页面的时候，是从第1行开始加载的，如果把css代码放在前面，这样浏览器就会先加载css，在没有加载HTML的时候，就会先存储一下css代码，等到加载HTML的时候，就可以立即进行修饰，有利于用户体验。
3、在style标签内部去书写css代码进行修饰
在内部样式里面，css的语法
选择器{属性：属性值；属性：属性值；}
选择器的目的是为了拿到想要修饰的对象

行内样式 几乎不用
使用过程：
1、在body创建想要修饰的对象
2、在创建好的对象中添加style属性
<标签 style=“中间书写css代码”></标签>
3、css代码的语法
如果是在行内样式：语法是 属性:属性值;
例如 width:200px;
注意点：css中如果没有特殊规定，必须带单位
常用单位是px
当内部样式和行内样式同时修饰一个对象，且样式冲突的话
浏览器优先解析行内样式，原因是因为行内样式的权重比较高，是1000

五.权重：
A、什么是权重：就是衡量一个或者一些当前修饰对象的样式指标
B、不同的css样式，是有权重值的
C、解析规则1：权重不同的时候，权重大的样式优先解析（高踩低）
D、解析规则2：权重相同的时候，解析规则是后面书写的css代码优先解析（后来者居上）
1、行内样式的权重是1000
2、内部样式中的类型选择器（标签选择器）的权重值是0001
3、class选择器的权重是0010
4、id选择器的权重是0100

六.id选择器和class选择器的相同和不同点
相同点：都可以区分相同的标签，实现不同的css样式
不同点：
1、class选择器的语法是.属性值{} id是#属性值{}
2、class选择器的权重是0010，id的选择器权重是0100
3、class的属性值可以是多个，但是id的属性值是唯一的
七.src url href之间的区别
目前来看 img搭配的是src a搭配的是href import引入搭配的是url
区别1：
src和href大部分使用在HTML标签里面，而url大部分使用在css样式表里面
区别2：
href 是来引入指定的网络资源位置，目的是为了建立关联和联系
src 目的是为了把要显示的内容精准显示在页面中
url 是为了统一资源定位
八.css相关属性
文本相关属性
文字大小 font-size 浏览器默认的文字大小是16px
文字颜色 color color：red； color：#f00；color：rgb（255,0,0）
文本对齐方式：
水平对齐：水平居中 text-align:center;
水平居左 text-align：left； 水平居右：text-align：right；
水平两端对齐：text-align：justify； 只对多行文本起作用
水平两端对齐：text-align-last：justify； 只对单行文本起作用，但是兼容性不太好
垂直设置 line-height
当行高的数值=文字大小的时候，可以清除文字的垂直间距
line-height：300px； 是指从盒子顶端到300的垂直距离
line-height：300； 是300倍，是font-size的300倍
line-height：300%； 是3倍，是font-size的3倍
文本首行缩进 text-indent：20px； 属性值可以为负数
文本修饰 text-decoration
添加下划线text-decoration：underline；
添加上划线text-decoration：overline；
添加删除线text-decoration：line-through；