• CSS基础知识


     一、为什么要使用CSS
    1)方便维护
    2)页面的精确控制,实现精美、复杂页面
    二、CSS样式
    页面中,所有的CSS代码,需要写到<style></style/>标签中。style标签的type属性应该选择text/css,但是type属性可以省略。
    <!--HTML注释-->
    /* CSS注释*/
    CSS修改页面中的所有标签,必须借助选择器选中。选择器中,可以写多对CSS属性,用{}包裹;每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔。
    选择器{
              属性1:属性值1;
              属性1:属性值1;
             }

    三、CSS常用选择器

    (1)标签选择器
    写法:html标签名

    作用:可以选中页面中,所有与选择器同名的html标签。
    (2)类选择器
    写法:.class名{ }

    调用:在需要调用选择器样式的标签上,使用class="class名"调用选择器。
    优先级:类选择器>标签选择器(优先级高的生效)
    如果有两个类名,用空格分隔
    3)id选择器
    写法:#id名{}

    调用:需要调用样式的标签,起一个id="id名"
    优先级:id选择器>类选择器
    !注意:一个页面中,不能出现重名id

    【class选择器与id选择器的区别】
    1.写法不同:class用.声明,id选择器用#声明
    2.优先级不同:id选择器>类选择器
    3.作用范围不同:class选择器可以多次调用,id选择器只能使用一次。

    【选择器的命名规范】
    1.只能有字母、数字、下划线、减号组成;
    2.开头不能是数字。也不能只有一个减号
    一般,起名要求有语义,使用英文单词和数字组合。
    【通用选择器】
    写法:*{}

    作用:可以选中页面中所有的html标签
    优先级:最低
    【并集选择器】
    写法:选择器1,选择器2,......选择器n{}

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


    【交集选择器】
    写法:选择器1选择器2......选择器n{},所有选择器紧挨着没有分隔

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

    【后代选择器】
    写法:选择器1 选择器2.......选择器n 选择器之间空格分隔

    生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、孙代、重孙带。。。)通俗的讲,只要后一个选择器,在前一个选择器里面即可。

    【子代选择器】
    写法:选择器1>选择器2>选择器3>.....>选择器n选择器之间用>分隔

    生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效,(中间不能间隔任何标签)
     
    【伪类选择器】
     1.写法:伪类选择器,在选择器后面,用:分隔,紧接伪类状态;
    eg:  :link
    2.超链接的伪类状态:
    :link:未访问状态
    :visited:已访问状态
    :ohver:鼠标指上状态
    :active:激活状态(鼠标点上未松开)
    !注意:当超链接多种伪类状态同时存在时,必须按照link-visited-hover-acive的顺序,否则会导致部分选择器不会生效。
    3.input伪类状态
    :ohver
    :focus:获得焦点状态
    :active
    !注意:input的多种状态同时存在时,必须按照上面的顺序。

    4.其他标签基本只用:hover事件

    四、CSS导入方式和优先级
    【优先级的权重问题】
    1.CSS生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效。
    2.当选择器作用于同一层时,可以根据优先级权重,进行累加计算;
    id选择器*100>class选择器*10>标签选择器*1
    注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。
    3.当选择器作用于同一层,且优先级相同时,则,写在最后的选择器生效。
    【引入CSS的三种方式】
    1.行内样式表:直接在HTML标签中,使用style=""的方式引用。
    <divstyle="height:100px;"></div>
    优点:使用灵活,优先级权重最高
    缺点:不符合W3C关于“内容与表现分离”的要求,不利于样式复用。

    2.内部样式表:在<head><./head>标签中,使用<style>标签包裹CSS代码
    特点:一定程度地实现了HTML与CSS的分离,但是分离不彻底,没有办法实现多页面共用。
    3.外部样式表:将css单独写入css文件中,并与html关联
    优点:彻底实现html与css分离,符合w3c标准,有利于多页面复用统一样式
    引入外部样式表
    rel:选择stylesheet
    type:选择text/css,可以省略
    herf:表示连接的css文件路径

    【导入CSS文件的两种方式】
    1)在<head>标签中,使用link链接
    <linkrel="stylesheet"href="../css/01.css"type="text/css"/>
    2)在<style>标签中,使用@import导入:
    @import url(css/01.css);
    【两种导入方式的区别】(重点)
    1)link属于标准的HTML标签,而@import不是标准标签
    2)link可以兼容所有低版本浏览器,而@import只在css2之后才能使用
    3)link是将两个文件链接起来,起桥梁作用,而@import相当于将CSS文件复制到HTML文件中
    4)link会在HTML文件边加载的过程,边链接CSS文件;
    @import会在HTML文件中全部加载完以后,再导入CSS文件。
    综上所述,我们使用link链接的方式,导入CSS文件。
     
    五、css常用文本属性
    1、字体、字号类:
    1)font-weight:字体粗细 bold-加粗、normal-正常、lighter-细体,也可以使用100-900数值,400表示normal,700表示bold

    2)font-style:字体样式。italic-倾斜、normal-正常

    3)font-size:字号。可以写px单位,也可以写%
    200%表示浏览器默认大小(16px)的两倍(32px)。

    4)font-family:字体系列(字体族)。可以直接写字体名,也可以写字体系列体。常用字体系列:serif(衬线体),sans-serif(非衬线体)。font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体,依次向后使用。通常,最后一个值放字体系列名。


    字体样式简写顺序:font-style font-weightfont-size line-heightfont-family
    !注意不同属性之间,用空格分隔;font-sizene-height必须一组,用/分隔;font-family多个字体之间用逗号隔开。


    2.字体颜色
    1)color:字体颜色 可以使单词、十六进制RGB等。
    2)opacity:透明度,可选值0-1
    【opacity和RGBA的区别】
    RGBA本身可以设置颜色,而opacity必须配合其他颜色属性使用;RGBA仅仅是让当前元素设置的颜色透明;而opacity,会让当前元素里面的所有字体、背景、子元素都透明。

    3.行距对齐类
    1)line-height: 行高。可以写px单位、可以直接写数字(表示默认行距的几倍)
    行高重要作用:让单行文字在div中垂直居中,设置行高等于div的高度,即可让单行文字垂直居中。
    2)text-align:设置区域中的行级元素水平对齐方式left/center/right


    3)letter-spacing:字符间距,字与字之间的间距


    4)text-decoration:文本修饰
    underline-下划线 overline-上划线 line-through-删除线 none-去掉下划线


    5)overflow:文字超出区域处理
    使用style="overflow:xx;",可以设置文字超出区域的显示的方式:
    >>>overflow:hidden;超出区域的文字隐藏不显示
    >>>overflow:scroll;无论文字多少,都会显示垂直水平滚动条
    >>>overflow:auto;自动,文字多显示滚动条,文字少不显示滚动条
    >>>可以使用overflow-x:hidden;overflow-y:scroll单独修改两个方向上的滚动条
    text-overflow:设置行末多于文字省略号显示方式
    clip-多于文字裁减掉 (默认)ellipsis-多于文字省略号显示
    省略号显示,需要配合white-space:nowrap;使用
    【重点】设置行末显示省略号(三行代码,缺一不可)
    6)white-space:nowrap;设置中文行末,不断行显示

    7)text-indent:首行缩进

    8)-webkit-表示只有webkit核内的浏览器生效,常见的有chrome,

    9)text-shadow:文字阴影,有四个属性值,空格分隔;
    水平阴影距离,正数表示阴影右移,负数表示阴影左移
    垂直阴影距离,正数表示阴影下移,负数表示阴影上移
    阴影模糊距离,0表示阴影一点不模糊
    阴影的颜色

    六、CSS常用背景属性
    1.background-color:背景色

    2.background-image:背景图

    3.background-repeat:背景图的重复方式
    no-repeat-不平铺 、repeat-平铺、repeat-x-延x轴平铺、repeat-x-延x轴平铺
    contain:图片等比缩放,直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
    cover:图片等比缩放,直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出全部区域)
    4.background-position:背景图偏移量
    指定位置:left/center/right top/center/bottom
    当只有一个值时,另一个默认居中
    指定坐标:两个属性分别表示水平位移 垂直位移
    1)坐标的值可以是像素的单位,也可以是%
    2)当写像素单位时:水平方向正数右移,负数左移
    垂直方向正数下移 ,负数上移
    (左负右正,下正上负)
    3)当写%时,一般只能是正数。表示的是去掉图片的宽高剩余空白区域的分布比例。eg:background-position:30%;水平方向去掉图片宽度,剩余区域3:7分。

    list-style:修改列表中小黑点的样式
    none:去掉小黑点

    url:可以使用url导入图片,作为列表标识符

    列表li常用属性:

     七、CSS盒模型
    1.margin:外边距
    1)只写一个值:表示四周的外边距均为指定的值
    2)写两个值:第一个数为上下外边距 第二个数为左右外边距
    3)写三个值:分别表示上右下三个方向,左边默认等于右边
    4)写四个值:表示上右下左方向(顺时针方向)
    5)设置块级元素在父容器中水平居中

    2.padding:内边距
    设置方式与margin完全相同
    !注意:设置padding,将会导致div区域被撑大!!!!使用时必须要注意div实际的宽高为多少!!!
    3.border:边框
    1)设置边框需要三个属性:宽度 样式 颜色
    原则上,三个属性缺一不可,顺序可以随便修改

    2)可以使用top、right、bottom、left分别设置四个边

     八、CSS背景属性
    1.用border属性做图形
    2.如图:

    当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子与父盒子的上边线并不能分开,而是会导致,两个盒子同时下来。
    [解决方法]
    1.给父盒子添加一点padding,不推荐使用,会导致父盒子结构多于1px padding
    2.给父盒子添加1px border-top:同样会导致1px的多于空间,不推荐使用
    3.给父盒子或子盒子添加浮动,可能会由于浮动,一定程度地影响页面布局
    4.给父盒子添加overflow属性:推荐使用的方式
    【border-radius 圆角】
    1.border-radius可以接收8个属性值,分别表示:
    x轴(左上、右上、右下、左下角)
    eg:border-radius: 10px 20px 30px 40px;
    2.缩写形式:
    1) 只写x轴,y轴将默认等于x轴;
    2)四个角写不全,默认对角相等
    3) 只写一个值,默认8个数均等
    eg:border-radius: 50px 20px;
    =border-radius: 50px 20px 50px 20px;
    3.当圆角弧度>=正方形边长一半,将会显示为圆形
    【图片边框】
    1.border-image:一共可以放10个属性值
    1)图片路径:url()
     
    2)图片的切片宽度:4个值,分别代表上,右,下,左四条边:
    通过4条切线切割,可以将图片分为9宫格。9宫格四个角分别对应边框的四个角(不会进行任何拉伸),9宫格四个边分别对应四条边框(会根据设置进行拉伸、铺完、重复等操作)。
    !注意:写得时候不能带px单位!!!
    3)边框的宽度:4个值,分别代表上右下左四条边框的宽度;
    !注意:写得时候,必须带px单位,与切片宽度用/分隔!!!
    4)边框的重复方式:stretch(拉伸)、round(铺满)、repeat(重复)

    【round和repeat区别】
    round:会对四条边进行适当的拉伸,压缩,确保四条边可以重复整数次。
    repeat:会保持每条边的长度比例不变,可能导致四角处无法显示一条完整的边。
    2.属性值写法:border-image:1,2/3px 4;
    3.border-iamge在webkit内核的浏览器中,必须带-webkit-前缀。
    【box-shadow盒子阴影】
    1.有6个属性值,空格分隔
    1)x轴阴影距离(必选值):可正可负,正----右移,负----左移
    2)y轴阴影距离(必选值):可正可负,正----下移,负----上移
    3)阴影模糊半径(可选):只能为正,默认为0,数值越大,阴影越模糊
    4)阴影扩展半径(可选):可正可负,默认为0 ,数值增大,阴影扩大,数值减小,阴影缩小。
    5)阴影颜色(可选):默认为黑。
    6)内外阴影(可选):默认为外阴影。inset表示内阴影。
    【outline:外围线】:显示在border外面,并且不会占用空间,可能会覆盖四周内容。

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

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


    4.父盒子没有指定高度。如果子盒子没有浮动,则父盒子的高度可以被盒子撑开。

    如果父盒子中的所有子盒子都浮动,则父盒子高度将变为0.


    【解决所有子盒子浮动,父盒子高度塌陷的问题】重点

    1)给父盒子也添加浮动
    2)给父盒子添加overflow: hidden;推荐使用!!!

    3)在父盒子最后添加一个高度为0的空div.给这个div添加,clear: both;属性,清除掉浮动效果。
    4)可以将第三条的div,用伪对象选择器::after实现
    【块级盒子的水平、垂直外边距:水平是累加,垂直取最大】
    【盒子模型分类】
    1.标准盒子(w3c盒子):我们设置的宽度和高度,仅仅包含content部分;再添加padding或border,会导致盒子变大。

    2.IE盒子(怪异盒子):我们设置的宽度和高度,包括content部分,padding部分和 border部分。


    【box-sizing】


     十、  CSS定位机制
     【相对定位 relative】
    1.使用position:relative;设置元素为相对定位元素;
    2.使用top、right、left调整元素的位置。当left和right同时存在时,left生效,当top和bottom同时存在时,top生效。
    3.定位机制:
    1)相对定位是相对于自己原来的位置定位,当top等属性不指定时,元素位置不会发生改变;
    2)相对定位不会释放掉元素在原有文档流中的位置,不会影响其他文档流元素的位置
    4.关于元素z轴重叠:
    1)定位元素:默认的z轴高于普通文档流元素
    2)同为定位元素,后来者居上
    3)可以使用z-index手动调节定位元素的上下层z轴顺序。z-index默认为0,而且只能作用于定位元素
    【绝对定位】
    1.使用position:absolute;设置元素为绝对定位;
    2.定位机制:
    1)相对于第一个非static定位的祖先元素进行定位。(即相对于使用了relative、absolute、fixed定位的祖先元素进行定位)
    2)如果所有的祖先元素都定位,则相对于浏览器左上角进行定位
    3)使用absolute的元素,会从文档流中完全删除,原有空间会被释放
    【固定定位 fixed】
    1.使用position:fixed;设置固定定位
    2.固定定位,是一种特殊的绝对定位!!知识祖先元素无法使用定位锁住
    3.定位机制:永远相对于浏览器左上角进行定位,而且不随滚动条的滚动而滚动
    【z-index 属性】
    1.作用:根据z-index属性设置的数值,决定元素在z轴方向上的层叠次序;
    2.使用要求:
    1)z-index 只能给定位元素调整层叠次序
    relative、absolute、fixed
    2)元素的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中的四个值,上下两个值的距离都是从上面量取,左右两个值都是从左边量取。
    【负边距的使用】
    1.实现块级元素在父容器中水平垂直居中
    1)设置子容器为定位元素;
    2)left:50%; margin-left:-width/2;
    top:50%; margin-top:-height/2;
    2.使用负边距增大元素的宽度
    1)子容器的宽度,不指定;只指定高度,或者有内容撑开高度;
    2)margin: 0 -50px; 可以是左右两边均超出父容器50px.


    练习:

    十一、 【CSS3背景属性】
    1.background-clip:设置背景图或者背景色的裁切显示区域。
    >>>border-box从边框外缘开始显示;
    >>>padding-box从边框内缘开始显示;
    >>>content-box从文字内容区域开始显示;如果不在显示区域的背景图或者背景色,会被裁切掉不显示。
    2.background-origin:设置背景图从哪开始定位
    >>>border-box:背景图左上角从边框外援开始;
    >>>padding-box:背景图左上角从边框内缘开始;
    >>>content-box:背景图左上角从文字内容区域开始;
    3.background-origin:不会改变背景图显示区域的大小,只是决定背景图的左上角从哪里定位。
    background-clip:只负责裁切出显示区域,但是并不关心背景图显示定位在哪。
    4.background-attachment:背景图的附着方式
    >>>scroll:背景图跟随区域滚动,默认效果;
    >>>fixed:背景图充满整个区域,并且背景图是固定的,不随滚动条滚动。
    5.background缩写形式:
                                           background:
    background-color       background-image     background-repeat
    background-attachment                                background-position

    【transition:过度属性】
    接收四个属性值
    1.设置哪个CSS属性参与过度,可以直接指定allne
    2.过度多长时间完成,通常.3s  、.5s
    3.过度的样式效果。通常选ease
    4.过度延时几秒后再开始,可以省略不写
    eg:transition: width .5s ease;
    transition可以同时定义多个过度效果,用逗号隔开
    eg:transition: width .5s ease,height 1.5s ease;

    【transform 定义变换属性】
    1.常用的变化函数:
    >>>translate(10px,10px)平移,第二个不写默认为0
    >>>scale(1.1)缩放,第二个不写,默认等于第一个
    >>>rotate(90deg) 旋转,默认绕z轴旋转可以使用rotateX()等
    >>>skew(20deg,30deg) 扭曲,水平、垂直方向扭曲多少度
    2.transform可以同时实现多种变换,用空格分隔
    eg:transform: skew(20deg) scale(1.3) translate(100px);
    3.transform-origin:定义变换起点,常用于旋转变化。
    可选值:left/center/right/     bottom/center/top
    也可以直接指定X、Y轴坐标点,第一个数为x轴
    例如:transform:rptate(90deg);
               transform-origin:right bottom;表示绕右下角旋转90度。

    十二、 CSS3新增的属性
    1.px:表示像素。长度是固定的,表示占分辨率的及格像素点
    2.%:表示相对于默认值的百分比
    3.em:是与元素的字号挂钩,表示几倍的字号
    4.rem:与根元素的字号挂钩,即与<html><ml>标签的size挂钩,如果不设置,则默认字号为16px
     【em与rem区别】
    1.em是与当前元素自身的font-size挂钩,如果当前元素没有设置,则向上查找最近的祖先字号,直到根元素。
    2.rem与当前元素字号无关,直接与根元素字号挂钩


    十三、display属性

    可以设置元素以何种状态显示,可选值,
    display: none:隐藏元素
    display: block:显示为块级元素
    display:inline:行级元素
    display:inline-block:显示为内联块级元素。 本身讲是一个行级元素,但是,拥有块级元素的所有属性。比如宽度、高度、margin、padding等。
    【常见的inline-block级别的标签】
    <img/>           <input/>           <textarea><textarea/>            <td></td>
    【隐藏一个元素的方式】
    1、宽度或高度设置为0px;配合overflow:hidden;属性
    2、display:none; 显示用display:block;
    3、opacity:0;设为全透明,但是元素的空间会占据。
    visibility:hidden; 隐藏元素,但是元素所在空间依然会占据。 与opacity:0;效果很像。显示visibility隐藏的元素,visibility:visible;

    十四、CSS动画使用
    1.声明一个关键帧(动画)
    @keyframes myFrame{
    from{}
    to{}
    }
    阶段的写法:
    1)可以直接用from-to的写法

    2)可以设置0%-100%的写法,但开头和结尾必须是0%和100%

    2.在CSS选择器中使用animation调用声明好的动画:
    【animation的缩写形式】
    Animation-name:动画名称,就是我们声明的关键帧name
    Animation-duration:动画持续时间
    Animation-timing-function:动画速度曲线,常选ease
    Animation-delay:动画开始的时间,延迟,只在第一次有效
    Animation-iteration-count:动画播放次数,默认为1.无限次数为infinite
    Animation-direction:动画在下一个是否逆向播放,默认为normal,表示不进行逆向。 alternate表示逆向播放。
    Animation-fill-mode:表示动画结束后停留在何种状态。要使用这个属性,动画的执行次数必须是有限次。(forwards:表示动画停留在结束状态;backwarks:表示动画停留在开始状态,默认效果)
    >>>Animation-name和Animation-duration必须要设置,其他的选填;
    >>>Animation可以同时设置多个动画,多个动画之间用逗号隔开
    Animation:frame1 1s,frame2 2s....


     
  • 相关阅读:
    指定一个M3U8文件,判断它包含的TS文件是不是都存在。指定一个Office生成的Swf文件,判断它包含的Swf文件是不是完整都存在。
    东师理想云平台异步任务处理系统V2.0重构思路
    Mysql查询出所有列名
    IntelliJ IDEA添加jar包
    IDEA下利用Jrebel插件实现JFinal项目main方法【热加载】
    整理OpenResty+Mysql+Tomcat+JFinal+Cannal+HUI
    有没有 linux 命令可以获取我的公网 ip, 类似 ip138.com 上获取的 ip?
    MongoDB学习笔记(5)--document
    MongoDB学习笔记(4)--collection
    MongoDB学习笔记(3)--删除数据库
  • 原文地址:https://www.cnblogs.com/jiejiejy/p/7354912.html
Copyright © 2020-2023  润新知