CSS

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        加粗显示    或     700
font-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 | dotted
border-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      上右  下左的角为10px
border-radius: 5px 10px 20px;
上左角 5px 上右 下左角10px  下右角 20px

border-image-source    设置边框图片
border-image-slice        进行裁剪图片
border-image-repeat     设置边框图片平铺方式
        stretch | repeat | round
border-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;    

 

转载于:https://www.cnblogs.com/yuyafeng/p/10945823.html