css笔记

什么是css？

是层叠样式表用来定义网页的显示效果CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML结合方式

第一种方式：直接对某个标签设置样式<div style="background: red;color: yellow;">这是第一个div</div><div style="background: red;color: black;">这是第二个div</div><span style="background:blue ;color: red;"> 这是第一个span</span><span style="background:blue;color: black;"> 这是第二个span</span>问题？两个div的样式相同有类似的地方，能不能把共性的地方抽取？第二种方式:在html界面中引用css属性<style type="text/css">div {    background: red;    color: black}</style><style type="text/css">span {    background: blue;    color: black;}</style>问题？假设还有好多的html中的div要求有类似的属性？如何引用呢?第三种方式:定义css的样式效果，通过引用方式进行使用  这种方式UI用的很多创建css文件 @CHARSET "UTF-8";div {        background: red;        color: black;}@CHARSET "UTF-8";span {    background: blue;    color: red;}在html文件中进行引用  <style type="text/css">@IMPORT url("div.css");</style>问题:对于div 或者span可能有多种样式，页面可能多变,如何灵活替换呢？第四种方式:创建一个总的样式表，通过link 标签进行关联@CHARSET "UTF-8";@IMPORT url("div.css");@IMPORT url("span.css");<link rel="stylesheet" type="text/css" href="zong.css">stylesheet 代表当前的文件和被引入的文件之间的关系href         CSS文件的地址

CSS样式优先级

由上到下，由外到内。优先级由低到高。

CSS选择器

作用：告诉css的代码作用在哪个标签上标签名选择器 具有相同标签名的标签，都有相同的样式    div{}; span{}; table{}; 类选择器：凡是表明同样的class属性的标签，拥有同样的属性<style type="text/css">    .hah {        background: red;        color: black;        font-size: 45px;    }} id选择器:对专有的某个id的标签设置属性值，一般id唯一<style type="text/css">    #hehe {    background: blue;    border: thick;    font-style: oblique;    font-size: 33px;    } </style>* 优先级：特殊的情况下：标签名选择器 < 类选择器 < ID选择器 < style属性

CSS扩展选择器

关联选择器    标签是可以嵌套的，标签和标签之间存在关系    语法： div font{}    <style type="text/css">        div font {        color: red;        background: black;    }组合选择器    可以将类选择器和id选择器进行合并书写    .aaa,#bbb {    background: #00ff00;    }伪元素选择器    根据标签不同的状态设置不同的样式效果    input:FOCUS {    background: #00ff00;}    input:HOVER {        background: #ff0000;    }    /* 未访问状态 */    a:LINK {        color: black;    }    /* 访问完成 */    a:VISITED {        color: green;        font-size: 15px;    }    /* 悬停状态 */    a:HOVER {        color: red;        font-size: 25px;    }    /* 点击状态 */    a:ACTIVE {        color: blue;        font-size: 35px;    }

CSS布局

盒子模型     margin 外边距    padding 内边距float    悬浮position    位置