首页 > > 网页制作 > css >

CSS基础

2018-06-24 01:43:30来源：未知阅读 ()

　一、什么是CSS

　　W3C标准中，倡导有3：其一为内容与表现分离，其二为内容与行为分离，其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading StyleSheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言。

　二、CSS的常用选择器

　　1、标签选择器

　　　　写法：HTML标签名

　　　　作用：可以选中页面中，所有与选择器同名的HTML标签。

　　2、类选择器　　　　

　　　　写法：.class名{}
　　　　调用：在需要调用选择器样式的标签上，使用class="class名"调用选择器。
　　　　优先级：类选择器大于标签选择器。两个起冲突时，优先级高的生效

　　3、id选择器

　　　　写法：#id名{}

　　　　调用：需要调用样式的标签，起一个id="ID名"

　　　　优先级：id选择器大于class选择器

　　　　注意：整个页面中，不能发出现同名ID

　　　　　　【class选择器与ID选择器的区别】

　　　　　　1、写法不同：class选择器用.声明，ID选择器用#声明。
　　　　　　2、优先级不同：ID选择器>class选择器。
　　　　　　3、作用范围不同：class选择器可以多次调用，ID选择器只能使用一次。

　　4、通用选择器

　　　　写法：*{}

　　　　作用：可以选中页面中所有的HTML标签。

　　　　优先级：最低！！！

　　5、并集选择器

　　　　　　写法：选择器1，选择器2，……，选择器n{}

　　　　　　生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。

　　6、交集选择器

　　　　　　写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔

　　　　　　生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效。

　　7、后代选择器

　　　　　　写法：选择器1 选择器2 …… 选择器n{} 选择器之间有空格间隔

　　　　　　生效规则：只要满足，后一选择器是前一个选择器的后代，即可生效。（后代包括子代、孙代、重孙代。。。）通俗的讲：只要后一个选择器，在前一个选择器里面即可。

　　8、子代选择器

　　　　　　写法：选择器1>选择器2>……>选择器n{} 选择器之间用>间隔

　　　　　　生效规则：必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能间隔人和标签）。

　三、CSS导入方式和优先级

　　1、优先级的权重问题

　　　　　　1、css生效的第一原则是：近者优先！！即，哪个选择器作用于最里层标签，则这个选择器生效。
　　　　　　2、当选择器作用于同一层时，可以根据优先级权重，进行累加计算：
　　　　　　　　id选择器*100>class选择器*10>标签选择器*1
　　　　　　　　注意：并集选择器，相当于多个选择器拆开写，所以，并集选择器优先级不能累加。
　　　　　　3、当选择器作用于同一层，且优先级权重相等时。则，写在最后选择器生效。

　　2、引入css的三种方式

　　　　　　1、行内样式表：直接在HTML标签中，使用style=""的方式引用；

　　　　　　　　　　<div style="height:100px;"></div>
　　　　　　　　优点：使用灵活，优先级权重最高；
　　　　　　　　缺点：不符合w3c关于内容与表现分离的要求；不利于样式复用；
　　　　　　2、内部样式表：在<head></head>标签中，使用<style>标签包裹css代码
　　　　　　　　特点：一定程度的实现了HTML与css的分离，但是分离不够彻底，没有办法多页面公用样式。
　　　　　　3、外部样式表：将css单独写入css文件中，并与HTML文件关联。
　　　　　　　　优点：彻底实现HTML与css的分离，符合w3c规范，有利于多页面复用统一样式；

　　3、导入css文件的两种方式

　　　　　　①在<head>标签中，使用link链接：<link rel="stylesheet" type="text/css" href="css/02_css.css" />
　　　　　　②在<style>标签中，使用@import导入； @import url("css/02_css.css");【一般不用】

　　4、【两种导入方式的区别】

　　　　　　①link属于标准的HTML标签，而@import不是标准标签
　　　　　　②link可以兼容所有低版本浏览器，而@import只在css2之后能用；
　　　　　　③link是将两个文件链接起来，起桥梁作用；而@import相当于将css文件复制到HTML文件中；
　　　　　　④link会在HTML文件边加载的过程中，边链接css文件；@import会在HTML文件全部加载完以后，再导入css文件；
　　　　　　综上所述，我们使用link链接的方式，加载css文件。

　　5、引入外部css样式表

　　　　　　rel：选择stylesheet
　　　　　　type：选择text/css：可以省略
　　　　　　href：表示链接的css文件路径

　四、CSS常用文本属性　

　　　　1、字体、字号类
　　　　　　①font-weight：字体粗细；bold-加粗 normal-正常、lighter-细体
　　　　　　　也可以使用100~900之间的数值。400表示normal，700表示bold
　　　　　　②font-style：字体样式。italic-倾斜、normal-正常
　　　　　　③font-size：字号。可以写px单位，也可以写%
　　　　　　　　200%表示浏览器默认大小（16px）的两倍=32px；
　　　　　　④font-family:字体系列（字体族）。可以直接写字体名，也可以写字体系列名；
　　　　　　　　常用字体系列：serif-衬线体 sans-serif-非衬线体；
　　　　　　　　 font-family可以接收多个值，用逗号分隔。表示优先使用第一个，如果没有这种字体，依次向后使用。
　　　　　　　　通常一个值放字体系列名；
　　　　　　　　eg：font-family："黑体"，"微软雅黑"，sans-serif；
　　　　　　⑤font缩写形式：
　　　　　　　　>>>顺序必须是：
　　　　　　　　　　font-weight font-style font-size/line-height font-family
　　　　　　　　>>>不同属性之间，用空格分隔；
　　　　　　　　>>>font-size/line-height必须一组，用/分隔；
　　　　　　　　>>>font-family多个字体之间，用逗号分隔；
　　　　　　　　>>>eg：font：bold italic 6px/100px "微软雅黑",sans-serif;

　　　　2、字体颜色
　　　　　　①color：字体颜色。可以使用单词、十六进制、RGB等
　　　　　　②opacity：透明度，可选值0-1
　　　　　　　　[opacity和rgba的区别]
　　　　　　　　rgba本身可以设置颜色，而opacity必须配合其他颜色属性来用；
　　　　　　　　rgba仅仅是让当前元素设置的所有文字、背景、子元素都透明；

　　　　　CSS中的颜色表示方式
　　　　　　①直接使用颜色的英文单词表示：red、green、blue
　　　　　　②使用颜色的十六进制数表示：#ffff00
　　　　　　　　六位数，两两分组，分别表示红、绿、蓝的配比；
　　　　　　③RGB（0~255,0~255,0~255）；三位数，分别表示红、绿、蓝的配比；
　　　　　　　rdba（）；第四位数，表示透明度。

　　　　3、行距、对齐类
　　　　　　①line-height：行高。可以写px单位、可以直接写数字（表示默认行距的几倍）、
　　　　　　　也可以写%（表示默认行距的百分比）
　　　　　　　　>>>行高重要作用：怎么让单行文字在div中垂直居中？
　　　　　　　　　　设置行高等于div的高度，即可让单行文字垂直居中。
　　　　　　②text-align：设置区域内的行级元素水平方式；left/center/right
　　　　　　③letter-spacing：字符间距，字与字之间的距离
　　　　　　④text-decoration：文本修饰：
　　　　　　　　　　underline-下划线、overline-上划线、line-through-删除线、none
　　　　　　⑤overflow：设置超出区域文字的显示方式。
　　　　　　　　　　>>>overflow；hidden;超出区域的文字隐藏不显示;
　　　　　　　　　　>>>overflow:scroll;无论文字多少，都会显示水平垂直滚动条;
　　　　　　　　　　>>>overflow:auto;自动，默认效果。文字多显示滚动条，文字少不显示滚动条;
　　　　　　　　　　>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条；
　　　　　　　　　　　　overflow-y：scroll;overflow-x：hidden;
　　　　　　⑥text-overflow：设置行末多余文字的显示方式；
　　　　　　　　　　>>>clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
　　　　　　　　　　>>>显示省略号，需要配合white-space：nowrap；使用
　　　　　　　　　　>>>【重点内容】设置行末显示省略号：（三行代码，缺一不可）
　　　　　　　　　　　　overflow: hidden;
　　　　　　　　　　　　white-space: nowrap;
　　　　　　　　　　　　text-overflow: ellipsis;
　　　　　　⑦white-space：nowrap；设置中文行末，不断行显示
　　　　　　⑧text-indent：首行缩进。
　　　　　　⑨-webkit-text-stroke: 0.5px blue; 文字描边
　　　　　　　　-webkit：表示只要webkit内核的浏览器生效、常见的有chrome、safari
　　　　　　⑩text-shadow:文字阴影。有四个属性值，空格分隔；2px 2px 2px green;
　　　　　　　　　　>>>水平阴影距离，正数表示阴影右移，负数左移；
　　　　　　　　　　>>>垂直阴影距离，正数表示阴影下移，负数上移；
　　　　　　　　　　>>>阴影模糊距离，0表示阴影一点不模糊；
　　　　　　　　　　>>>阴影的颜色；

　4、CSS常用背景属性

　　　　1、background-color：背景色
　　　　2、background-image：背景图。使用url（""）选择背景图片。
　　　　　背景图和背景色同时存在时，背景图覆盖背景色。
　　　　3、background-repeat：背景图的重复方式。
　　　　　　no-repeat：不平铺、repeat：平铺、repeat-x：沿x轴平铺、repeat-y：沿y轴平铺。
　　　　4、background-size：背景图的大小
　　　　　　[指定宽度、高度]
　　　　　　>>>宽度高度的指定，可以写px，也可以写%（父容器宽高的百分比）
　　　　　　>>>当写两个属性时，分别表示宽度、高度；
　　　　　　当写一个属性时，表示宽度、高度将会等比缩放；
　　　　　　[其他属性值]
　　　　　　>>>contain：图片等比缩放，直到宽或高中较大的一边缩放到100%为止。
　　　　　　（可能导致较短的一边<100%，图片无法盖住全部区域）
　　　　　　>>>cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。
　　　　　　（可能导致较大的一边>100%，图片超出区域显示不全）
　　　　5、background-position：背景图偏移量
　　　　　　　　>>>指定位置：left/center/right top/center/bottom
　　　　　　　　　　当只写一个值时，另一个默认居中。
　　　　　　　　>>>指定坐标：两个属性分别表示水平位移垂直位移
　　　　　　①坐标的值，可以是px单位，也可以是百分数
　　　　　　②当写像素单位时：（左负右正，上负下正）
　　　　　　　　水平方向：正数右移，负数左移
　　　　　　　　垂直方向：正数下移，负数上移
　　　　　　③当写%（百分数）时：
　　　　　　　　一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比例。
　　　　　　　　eg：background-position:30% 水平方向去掉图片宽度，剩余区域3:7分。

　5、CSS伪类选择器

　　　　1、写法：伪类选择器，在选择器后面，用：分隔，紧接伪类状态；
　　　　　　　　eg： .a:link
　　　　2、超链接的伪类状态：
　　　　　　：link：未访问状态：visited已访问状态
　　　　　　：hover-鼠标指上状态：active-激活选定状态（鼠标点下未松开）
　　　　　　注意：当超链接多种伪类状态同时存在时，必须按照link-visited-hover-active的顺序，
　　　　　　　　　否则会导致部分选择器不生效
　　　　3、input的伪类状态：
　　　　　　：hover ：focus（获得焦点状态）：active
　　　　　　注意input的多种状态同时存在时，必须按照上面的顺序；
　　　　4、其他标签，基本只用：hover事件；

　　6、CSS盒子模型

　　　　1、margin 外边距

　　　　　　①、只写一个值：表示四周的外边距均为指定的值；
　　　　　　②、写两个值：第一个数为上下外边距第二个数为左右外边距；
　　　　　　③、写三个值：分别表示上右下三个方向，左边默认等于右边；
　　　　　　④、写四个值：表示上右下左四条边顺时针方向；
　　　　　　⑤、margin:0 auto;设置块级元素，在父容器中水平居中！！！
　　　　2、padding 内边距　　　

　　　　　　设置方式与magin完全相同；
　　　　　　注意：设置padding，将会导致div区域被撑大！！！使用时必须注意div的实际的宽高是多少！！！！

　　　　3、边框

　　　　　　1、设置边框需要三个属性：宽度，样式，颜色原则上三个属性缺一不可，顺序可以随便修改；
　　　　　　2、可以使用top、right、bottom、left分别设置四个边

　　　　4、当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致，两个盒子同时掉下来。　　　　

　　　　　　[解决办法]
　　　　　　1、给父盒子添加一点padding-top;不推荐使用，会导致父盒子结构多余1px的padding;
　　　　　　2、给父盒子添加1px的border-top;同样会导致1px的多余空间，不推荐使用;
　　　　　　3、给父盒子或者子盒子添加浮动;可能会由于浮动，一定程度的影响页面的布局;
　　　　　　4、给父盒子添加overflow属性;推荐使用的方式。

　　　　5、border-radius 圆角　　　　

　　　　　　1、border-radius可以接受8个属性值，分别表示：x轴（左上、右上、右下、左下角）/y轴（左上、右上、右下、左下角）
　　　　　　　　　　eg：border-radius：10px 20px 30px 40px/10px 20px 30px 40px
　　　　　　2、缩写形式:
　　　　　　　　只写x轴，y轴将默认等于y轴;
　　　　　　　　四个角写不全，默认对角相等;
　　　　　　　　只写一个值，默认8个数均等;
　　　　　　　　　　eg：border-radius:50px 20px;
　　　　　　3、当圆角弧度>=正方形边长一半，将会显示为圆形。

　　　　6、border-image 图片边框　　　　

　　　　　　1、border-image：一共可以放10个属性值:
　　　　　　　　①图片的路径：url（）;
　　　　　　　　②图片的切片宽度：4个值，分别代表上下左右四跳边;
　　　　　　通过4个切线切割，可以将图片分为九宫格，九宫格四个角分别对应边框的四个角（不会进行任何拉伸），九宫格四个边分别对应四条边框（会根据设置进行拉伸/铺完/重复等操作）
　　　　　　
　　　　　　　　　　注意：写的时候必须不能带px单位！！！！！
　　　　　　　　③边框的宽度:4个值，分别代表上右下左四条边框的宽度;
　　　　　　　　　　注意：写的时候必须带px单位，与切片宽度用/分隔
　　　　　　　　④边框的重复方式：stretch（拉伸）、round（铺满）、repeat（重复）
　　　　　　[round和repeat的区别]
　　　　　　round：会对四条边进行适当的拉伸、压缩，确保四条边可以重复整数次;
　　　　　　repeat：会保持每条边的宽度长度比例不变，可能导致四角处，无法显示一条完整的边;

　　　　7、box shadow 盒子阴影

　　　　　　6个属性值，用空格分隔;
　　　　　　①x轴阴影距离（必选）:可正可负，正----右移，负----左移;
　　　　　　②y轴阴影距离（必选）:可正可负，正----下移，负----上移;
　　　　　　③阴影的模糊半径（可选）:只能是正数，默认为0.数值越大，阴影越模糊;
　　　　　　④阴影扩展半径（可选）:可正可负，默认为0，数值增大，阴影扩大;数值减小，阴影减小;
　　　　　　⑤阴影颜色（可选）:默认为黑色
　　　　　　⑥内外阴影（可选）:默认为外阴影。 inset表示内阴影

　　　　8、盒子模型分类
　　　　　　1、标准盒子(W3C盒子)：我们设置的宽度和高度，仅仅包含content部分；再添加padding或border，会导致盒子变大；
　　　　　　2、 IE盒子(怪异盒子)：我们设置的宽度和高度，包含content+padding+border；再添加padding或border，会压缩content区域，但盒子总大小不变；

　　7、CSS浮动　　　

　　　　1、标准流中的块级盒子，宽度将会自动伸展为100%；而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开；
　　　　2、当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子，会盖在这个盒子的上方)，但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。(未浮动盒子中的内容，不会被浮动盒子盖住)

　　　　3、由于第二条的原因。可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。
　　　　　　clear可选值：left-清除左浮动影响， right-清除右浮动影响；
　　　　　　 both-同时清除左右浮动影响，常选；　　　

　　　　4、父盒子没有指定高度。如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开。如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0；
　　　　　　

　　　　　　[解决所有子盒子浮动，父盒子高度塌陷的问题]
　　　　① 给父盒子也添加浮动；
　　　　② 给父盒子添加overflow属性；推荐使用！！！
　　　　③ 在父盒子最后，添加一个高度为0的空div。给这个div添加clear: both;属性，清除掉浮动效果。
　　　　④可以将第三条的div，用伪对象选择器::after实现:
　　　　　　#div4::after{
　　　　　　　　　　display:block;
　　　　　　　　　　content:"";
　　　　　　　　　　height:0px;
　　　　　　　　　　clear:both;
　　　　　　　　　　}

8、CSS定位　　

　　　[相对定位 relative]
　　　　1、使用position: relative;设置元素为相对定位元素;
　　　　2、使用top、right、left调整元素的位置。当left和right同时存在时，left生效;top和bottom同时存在时，top生效。
　　　　3、定位机制:
　　　　　　①相对定位时相对于自己原来的位置定位。当top等属性不指定时，元素位置不会发生改变
　　　　　　②相对定位，不会释放掉元素在原有文档流中的位置。不会影响其他文档流元素的位置;
　　　　4、关于元素z轴重叠
　　　　　　①定位元素，默认的z轴高于普通文档流元素。
　　　　　　②同为定位元素，后来者居上。后面的盖住前面的。
　　　　　　③可以使用z-index手动调节定位元素的上下层z轴顺序。
　　　　　　z-index默认为0，而且只能用于定位元素。

　　　[绝对定位]
　　　　1、使用position：absolute;设置元素为绝对定位;
　　　　2、定位机制：
　　　　　　①相对于第一个非static定位的祖先元素进行定位。（即相对于使用了relative、absolute、fixed定位的祖先元素进行定位）
　　　　　　②如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位;
　　　　　　③使用absolute的元素，会从文档流中完全删除。原有空间会被释放。
　　　[固定定位]
　　　　1、使用position：fixed;设置固定定位;固定定位，是一种特殊的绝对定位！！！！只是祖先元素无法使用定位锁住;
　　　　2、定位机制：永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动

　　　[z-index属性]
　　　　1、作用：根据z-index属性设置的数值，决定元素在z轴方向上的层叠次序;
　　　　2、使用要求：
　　　　　　①z-index 只能给定位元素调整层叠次序。relative、absolute、fixed
　　　　　　②元素的z-index属性，要考虑父容器z-index的约束：
　　　　　　　　>>>如果父容器设置了z-index属性，则子容器的所有元素，将不能脱离父容器层次的约束。（即，父容器设置了z-index，则子容器只能以父容器的数值为准。再给子容器设置z-index，只能调整子容器在父容器层次之内的层叠次序）
　　　　　　　　>>>如果父容器没有设置z-index，或者设置z-index：auto;则子容器调整z-index将不受父容器层次约束。
　　　　3、z-index：auto和z-index：0的异同点
　　　　　　①z-index:auto;是默认值，与z-index：0;处于同一个平面;
　　　　　　②z-index：0;会约束子元素必须与父容器在同一平面;
　　　　　　z-index：auto;不会约束子元素的层次;
　　　[clip属性]

　　　　1、作用：clip属性用于裁切图片标签，显示图片的指定区域;
　　　　2、使用要求：clip属性，只能作用于有absolute或fixed定位的图片标签上;
　　　　3、clip属性，接受一个rect（）函数，函数传入四个值，分别表示上右下左四条切线的位置;
　　　　　　注意：与其他属性不同的是，rect中的四个值，上下两个值的距离都是从上边量取;左右两个值都是从左边量取;