css基础

Css基础

Css 即 Cascading style sheets 层叠样式表：如何修饰网页信息的显示样式
Css的语法：选择器（选择符）{属性：属性值；}
选择器（选择符）：要定义样式的对象
属性：属性值；：声明
Css的引入样式：

1.内部样式：在head写一个标签style（适合案例比较小的页面）
			结构创建对象，在head里面书写标签style  style属性最好写在head里面，
			type属性可加可不加
2.外部样式：在head里面写<link rel = "stylesheet"  type="text/css"  href="css文件的路径" />或用@import  url("css文件的路径")
			创建对象，新建一个css文件，利用link或者import引入css文件
3.行内样式：style作为属性直接写在标签后面
			行内样式又称内联样式和嵌入式样式
			<标签 style=“"></标签>

区分import和link
1.本质上link属于XHTML标签；而@import完全是css提供的一种方式
2.加载顺序：（1）当一个页面被加载的时候就是被浏览器浏览的时候，link引用的css会同时被加载
（2）@import引用的css会等到页面全部被加载完在加载。所以有时候浏览@import加载css的页面时开始会没有样式，网速慢的时候还比较明显
3.兼容性：@import是css2.1提出的，所以老的浏览器不支持
@import只有在IE5以上才能识别，而link标签无此问题
4.使用DOM控制样式时，当使用JavaScript控制DOM去改变样式的时候只能使用link标签，因为@import不是DOM可以控制的

Css的属性：width 宽度 height 高度 background-color/background背景色
color 字体颜色 font-size 字号大小

Css选择器
1.要使用Css对HTML页面中的元素实现一对一，一对多或者多对一的控制
2.选择器整体分类：基本选择器、层次选择器、伪类选择器、伪元素（对象）选择器
（1）基本选择器的分类：a.类型选择器（标签选择器），权重为1
语法：标签{属性：属性值；}
b.class选择器（类选择器），权重为10
语法：.class名字{属性：属性值；}
class可以给多个属性值，多个属性值之间用逗号隔开
c.ID选择器，权重为100
语法：#ID的名字{属性：属性值} ID具有唯一性，
属性值只能有一个
d.通配符：权重是0
语法：*{属性：属性值}
e.群组选择器，没有权重
语法：选择器1，选择器2{属性：属性值}
（2）层次选择器：a.包含选择器（后代选择器），权重为包含选择器的权重之和，用来选定元素的所有后代
语法：父元素 子元素{属性：属性值；}
b.子选择器，权重叠加，用来选定元素的后代儿子元素
语法：父元素>子元素{属性：属性值}
（3）伪类之动态伪类选择器，权重是10
a. :link 用来设定链接初始的样式
语法：选择器:link{属性：属性值；}
b. :visited 用来设定链接访问过后的样式
语法：选择器:visited{属性：属性值；}
c. :hover 用来设定鼠标悬停上去的样式
语法：选择器:hover{属性：属性值；}
d. :active 用于获取焦点的元素
语法：选择器:focus{属性：属性值；}
（4）伪对象（元素）选择器，权重是1
a. :after 在…之后 必须和content一起使用
内容文字 content：“123456”
图片 content：url()
b.before 在…之前 必须和content一起用
c.first-line 第一行 只能用在块元素
a、b、c既可以是单引号也可以是双引号
d.first-letter 第一个字符 只能用在块元素
e.::selection 选择之后的样式
仅仅支持背景颜色和字体颜色

Css选择器解析规则：
1.当不同选择符的样式设置冲突的时候，高权重的会覆盖低权重选择符的样式
2.相同权重的选择符，样式遵循就近原则，哪个选择符最后定义就采用哪个选择符样式

HTML废弃的标签：

<u></u>可以加下划线   <del></del>\<strike></strike>删除线  <basefont color="" size=""></basefont>规定页面上的默认字体颜色和字号，只有IE低版本浏览器          
<big></big>\<small></small>  font字体标签  tt类似于打字机或者等宽的文本效果

关于控制台报错
1.控制台出现红色报错就是路径出错了
2.控制台出现黄色错误
（1）单词写错
（2）单位没带或者写错
（3）冒号写错（控制台除了黄色报错，在控制台上显示的，是在单词的后面）
（4）分号丢了（控制台除了黄色报错，同时也会把下面一行代码也一起解析在上一行）
3.控制台如果一句话都没有显示自己写的css代码
（1）{}前面的{写错了
（2）选择器的对象写错了
（3）style里面写错了
（4）link里面写错了
（5）如果该元素的上面还有css代码，但是控制台仍然没有显示本身的css代码，就是上面的css}丢了