css学习笔记

-------------css学习笔记总结------------------
1.简介:
    CSS 是 Cascading Style Sheet 的缩写。
译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS用来美化和修饰页面的显示效果。而且不区分大小写。
2.代码格式:
    属性:属性值;属性1:属性值1;属性2:属性值2
属性和值之间用:分隔.
属性和属性之间用;分隔.

3.css与html代码结合的方式:
方式一:
so colorful~



方式二:



方式三:

注意:
    格式是:@import url(文件名.css);
这里面的文件路径一般用相对路径,文件要在同一个目录下面。
如果有几个要封装的标签,如span,div则可用用@import url(total.css);形式。

方式四:
Insert title here

rel:引入的外部文件与我当面的页面之间的关系。stylesheet(文档的外部样式表)得到了所有浏览器的支持。


4:选择器


定义:用来确定被应用样式(操作)的标签的一种语法.
选这器的优先级:
style标签属性>id选择器>类选择器>标签名称选择器


一.标签名称选择器
通过div和span来确定被操作的元素的范围
比如:
div{color:blue;font-size:4px;back-grounp:#CC00CC}
span{color:blue;font-size:4px;back-grounp:#CC00CC}


二.类选择器

然后用的时候是



三.id选择器
#div{color:green;}

通过标签属性id的值来确定要操作的标签,id的值要保证唯一性.
在id选择器的前面需要加(#)来区分


四.组合选择器
selector1,selector2{css代码}
selector1和selector2可以是任一的选择器
#div1,#span1{color:red;}
#span1{background-color:blue;}
作用是:把span1和div1公用的代码抽取出来。


五.关联选择器

...........

        div1
        内部span1
   

        内部span2
   




六.伪类选择器
:伪类的名称,伪类的名称是固定的.系统给你分配的
link:从未访问过
visited:被访问过
active:鼠标按下去但没有松开的时候
hover:数遍悬在字体上的时候

div:hover{background-color:red}

我是a1
我是a2

你可能感兴趣的:(web前端)