CSS概念

Cascading style sheets

层叠样式表

 

css的三种写法

1、内嵌式写法

2、外联式写法　

3、行内式写法

 

注释

/*注释内容*/

 

单位

常见单位px    像素em  一个文字大小

 

选择器

基本选择器    标签选择器        div {
               color:red;        }            id选择器        #id {
               font-size:20px;        }    类选择器        #class {
                background-color: green;        } 　　通用选择器 　　　　　* {
   　　　　　　　　floot: left; 　　　　　　}

组合选择器 　　 交集选择器 　　　　 标签名.类名 {属性:属性值;}   即又关系    后代选择器        选择器  选择器   {
   属性：属性值;}        1 后代选择器中,选择器与选择器之间必须要用空格隔开        2 后代选择器只适用于嵌套结构的标签        3 后代选择器只能选中后代元素 　　并集选择器 　　　　选择器,选择器,选择器  {属性:属性值;} 　　　　　1 并集选择器必须使用,号隔开 　　　　　2 并集选择器标签之间的关系可以是嵌套关系可以是并列关系 　　子代选择器 　　　　选择器>选择器 {属性:属性值;} 　　　　　与后代选择器的区别 　　　　　　1 后代选择器可以选中所有与的后代元素 　　　　　　2 子代选择器只能选中直接后代元素 　　属性选择器 　　　　[]{属性:属性值;} 　　　　[class^='a']{}   选中属性值以字母a开始 　　　　[class$='b']{}　 选中属性值以字母b结尾 　　　　[class*='c']{}   选中属性值中包含c 　　　　[class='one']{}  选中属性值等于one 　　　　[class]{}　　　　 带有class属性的都被选中 　　伪元素选择器 　　　　p:first-child {} 选中父元素中第一个是p标签的子元素 　　　　p:last-child{}   选择父元素中最后一个是p标签的子元素 　　　　p:nth-child(n){} 选中父元素中第n个子元素p标签 　　　　p:nth-child(odd){}选中奇数个数的标签 　　　　p:nth-child(even){}选中偶数个数的标签 　　　　p:nth-last-child(3){}选中倒数第三个标签被选中 　　伪类选择器 　　　　a:link {}  　　　　设置a标签的默认样式 　　　　a:visited{}　　　　设置a标签访问过的样式    一般只能设置与颜色相关的属性 　　　　a:hover{}　　　　　设置a标签被鼠标悬停时的样式 　　　　a:active{}　　　　 设置a标签被点击时的样式 　　　　input:focus{}　　　获取焦点时候的样式

 

颜色表示方式及单位问题

1 使用英语单词表示    red green pink 2 使用十六进制表示 　　background-color: #292694; 3 使用rgb表示 　  r red  0-255 　　g green 0-255 　　b blue  0-255 　　background-color: rgb(59,28,220); 4 使用rgba表示 　　a 模糊度  0-1　　 　　background-color: rgba(59,28,200,0.5); 　　　　opacit:0.5;   模糊度 5 hsl表示 　　h 色调  0-360 　　s 饱和度 0%-100% 　　l 亮度 0%-100% 　　background-color: hsl(100,20%,60%) 　　background-color: hsla(100,20%,60%,0.5)

　　

font属性

font-size        文字大小font-family     文字字体 　　　　　1 设置字体要设置常用字体 　　　　　2 可以设置多个字体,字体与字体之间用逗号隔开,一旦开始的字体找不到就会去找后面的字体font-weight     文字是否加粗        normal    正常显示    或     400        bold        加粗显示    或     700font-style        文字是否斜体        normal      正常显示 　　　　 italic　　　　文字斜体 line-height　　　　　 行高     行高只能改变文字,不能改变标签 font连写 font:font-weight font-style font-size/line-height font-family 1 font-size必须写在font-family之前 2 连写中必须设置font-size和font-family 3 如果属性都要设置都要按顺序书写

 

background属性

background-color                设置背景颜色background-image:url()       设置背景图片background-repeat               背景图片平铺        repeat       平铺        no-repeat  不平铺        repeat-x    x轴平铺        repeat-y    y轴平铺background-position            设置背景图片位置        设置具体位置使用方位名词        top left right bottom 　　　　  设置具体值 　　　　　left 20px      第一个代表水平方向第二个代表垂直方向 　　　　　background-position    只设置一个值第二个值默认为center 复合写法 background:red url() no-repeat center; 该属性连写没有顺序 多背景设置 background:url(1.png) no-repeat center, 　　　　　　url(2.png) no-repeat left, 　　　　　　url(3.png) no-repeat bottom; 如果多背景设置背景颜色需要单独设置

 

 

文本修饰(文字阴影)

text-shadow: 1px 2px 3px red;1px   代表文字阴影在水平方向的偏移量2px   代表文字阴影在垂直方向的偏移量3px   代表文字阴影的模糊度red　文字阴影的颜色

 

凹凸文字

 

元素转换

dispaly:block;  转换为块级元素display:inline;  转换为行内元素dispaly:inline-block; 转换为行内块元素一般我们需要将行内元素转换为块级元素或行内块元素如果行内元素需要设置宽高的时候,可以进行模式转换行内块元素不能转换为行内元素

 

补间动画

transition设置动画要执行的属性有哪些transition-property:all;设置动画执行的时间transition-duration:5s;设置动画延时执行的时间transition-delay:2s;设置动画熟读的类型transition-timing-function    linear 规定以相同的速度开始至结束    ease  规定慢速开始,然后变快,然后慢速结束    ease-in 规定慢速开始    ease-out 规定慢速结束    ease-in-out 规定慢速开始于结束    cubic-bezier(n,n,n,n)  n为0至1之间 复合写法 transition: all 5s linear;

 

行高

浏览器中的默认文字大小:16px默认文字行高为:18px行高= 文字大小+上间距+下间距文字大小会影响行高值文字字体会影响行高值通过行高调整文字的上下间距行高=两条基线之间的距离行高作用:实现文字在容器中垂直居中效果设置文字的行高等于容器的高度单位 : px  em  %

 

盒子模型

边框 border内边距padding:内容与边框之间的距离 　　内边距只能移动内容区域,盒子不会移动 　　内边距复合属性按照上,右,下,左顺序设置 　　给盒子设置内边距,盒子不动,内容移动外边距margin:盒子与盒子之间的距离

盒子宽度 = 内容的宽度 + 左右边框 + 左右内边距盒子高度 = 内容的高度 + 上下边框 + 上下内边距改变盒子大小计算方式box-sizing: content-box;    盒子大小计算 = 内容大小 + 边框 + 内内边距box-sizing: border-box    盒子实际大小 = 设置的宽度和设置的高度值

盒子居中使用 margin: 0 auto外边距不会改变盒子大小外边距在浏览器中占位置垂直外边距合并容器在垂直方向,外边距以最大值为准垂直外边距塌陷给父容器设置border属性给父容器设置overfliw:hidden        overflow: hidden 会触发元素的bfc(格式上下文)

注:    1 在默认情况下,盒子的实际大小=内容+边框+内边距    2 如果在嵌套盒子结构下,子元素如果没有设置宽度,那么内边距不会影响子元素的宽度    3 所有的行内元素都不能设置上下内外边距    4 外边距不会改变盒子大小,外边距占位置    5 垂直外边距塌陷(父元素设置边框+父元素设置overflow:hidden)    6 垂直外边距合并(以最大值为准)    7 在写css的时候,第一段css代码必须要清楚页面中一些标签的内外边距    body, p, ul, ol, dl, h1, h2, inpur {            margin: 0;            padding:0;}

 

边框border

border-color    边框颜色border-style    边框样式    none | solid | dashed | dottedborder-width    边框宽度去掉边框           border:0 none;去掉轮廓线        outline-style: none;边框合并: 只能在表格中设置        table,td {          border: 1px solid red;          border-collapse: collapse;}

边框图片border: 19px solid red;border-image: url('') 19 19 19 19 round;

边框圆角border-radius: 5px;边框的四个角都圆角化border-radius: 5px 10px;上左 下右的角为5px      上右  下左的角为10pxborder-radius: 5px 10px 20px;上左角 5px 上右 下左角10px  下右角 20px

border-image-source    设置边框图片border-image-slice        进行裁剪图片border-image-repeat     设置边框图片平铺方式        stretch | repeat | roundborder-image-width       设置边框图片大小如果没有设置该属性,那么边框图片的大小按照边框的大小显示

盒子阴影box-shadow: 1px 2px 3px red;盒子阴影不会改变盒子大小

 

 浮动 float

float: left | right特点:    浮动的元素不占位置(脱标)    浮动可以实现块级元素在一行上显示(脱标)    浮动可以实现元素的模式转换    浮动会影响后面的元素不会影响前面的元素    文字不受浮动影响作用:    解决文字环绕图片的效果(最初的作用)    网页布局    制作网页导航(块级元素在一行上显示)注:    如果需要让行内元素设置宽度或高度,那么只能使用display    如果想要实现块级元素在一行上显示,使用float(网页布局)    如果块级元素设置了浮动切灭有设置宽度,那么该元素设置text-align:center 不起作用    如果一个块级元素默认没有设置宽度,那么margin: 0 auto 不会起作用清除浮动    时机        父容器没有高度        父容器中的所有子元素都设置了浮动    方式        通过clear属性清除浮动           clear: left | righr | both        通过给父容器设置overflow: hidden;            如果父容器没有定位的元素,可以使用该方法        使用伪元素清除浮动            .clearfix:after {                content: '';                height: 0;                line-height:0;                display: block;                clear: both;                visibility: hidden;            }            .clearfix {                /* 兼容IE  */                zoom: 1;                }    讲清楚浮动的代码设置给浮动元素的直接父元素

 

伪元素

:after     在元素的内容之后插入新内容:before　　 在元素的内容之前插入新内容    伪元素中必须设置content属性    伪元素属于行内元素

 

overflow属性

visible     默认值,内容如果超出父容器,超出部分可以正常显示hidden    超出部分隐藏scroll       设置滚动条outo        如果内容超出父容器,则添加滚动条,否则

 

定位

静态定位    static:  left | right | top | bottom    position: static;    left: 100px;静态定位的元素就是标准流下元素的显示方式静态定位不能移动元素位置

绝对定位    position: absolute;    left | right | top | bottom通过绝对定位可以移动元素位置默认情况下,如果父元素没有设置定位或者设置了静态定位,那么绝对定位的子元素是以浏览器(body)左上角为参照移动位置的如果父元素设置了出静态定位以外的其他定位,那么就对定位的子元素以父元素的左上角为参照设置定位绝对定位的元素脱标不占位置绝对定位的元素可以实现模式转换使用场景    轮播图的小圆点 绝对定位的盒子居中方式 　　margin: 0 auti;  标准流下的盒子居中显示 　　绝对定位下的盒子居中显示 　　left: 50%　　相对父元素宽度的一半 　　margin-left: -50px;  相对元素自己宽度的一半

相对定位    position: relative    left | right | top | bottom相对定位只想对元素自己原来的位置相对定位的元素没有脱标占位置相对定位的元素不能实现模式转换一般情况下  子绝父相

固定定位    position:fixed;    left | right | top | bottom固定定位的元素始终与浏览器(body)的可视区域左上角为参照,设置定位固定定位的元素脱标不占位置固定定位的元素可以实现元素的模式转化

 

定位的层级关系

只有定位的元素有层级关系z-index可以改变元素的层级关系    z-index: auto;(0)如果z-index值相同的情况下,那么最后的定位元素会压着前面定位元素(后来居上)如果z-index值不相同,那么z-index值越大的元素层级越高如果一个元素的父元素设置了定位,那么父元素的z-index的值越大,该子元素的层级越高

 

标签包含规范

段落中不能放在标题标签段落中不能放div一般情况下行内元素不推荐包含块级元素,行内元素可以包含行内元素

 

网页布局规避脱标流

网页优先考虑标准流然后考虑使用浮动最后使用定位元素要实现模式转换必须使用display

 

图片的垂直对齐方式

vertical-align:baseline;注:    vertical-align 属性只能给行内块元素设置    行内块元素默认值是baseline对齐让图片在容器中垂直显示    给父容器设置行高 = 容器行高    给图片设置 vertical-align:middle

 

元素可见性

overflow: hidden;  超出部分隐藏display:none;        隐藏元素 不占位置display:block;       显示元素visibility:hidden;    隐藏元素  占位置

 

Logo内容去除

logo将图片作为a标签的背景图片设置使用text-indent 去掉logo文字内容

 

精灵图

将很多小图片集合在一张大图片中使用方法     width: 16px;    精灵图中小图片的宽     height: 16px;   精灵图中小图片的高    background:url(1.png) no-repeat  -350px  -109px;