前端开发 - CSS - 总结

CSS:层叠样式表(Cascading Style Sheets)

1.css的特征2.css的引入3.选择器4.伪类选择器5.伪元素选择器6.字体样式 文本样式 背景属性7.盒模型 border margin padding8.display visibility 属性9.float 属性10.position z-index 属性11.网页布局

一、css的特征:    1.css解决了两个问题:        1.将HTML页面的内容与样式分离。        2.提高web开发的工作效率。    2.css的优势:        1.内容与表现分离        2.网页的表现统一,容易修改        3.丰富的样式,使页面布局更加灵活        4.减少网页的代码量,增加网页浏览器速度,节省网络带宽        5.运用独立页面的css,有利于网页被搜索引擎收录    3.css语法:        1.选择器;2.声明=属性+值;        /*这是注释*/        

二、css的引入:    1.内嵌式        一般不写内嵌式,以后不好维护        <h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1>    2.内链式        <style type="text/css">            h2{font-size:30px;color:red;}        </style>    3.外链式        链接式            link css 同时加载的!            <link rel="stylesheet" type="text/css" href="./css/index.css">        导入式            实际用的很少,先加载html,在加载css            import 是css2.1特有的,对于不兼容css2.1的浏览器是无效的eg:IE5以下            <style type="text/css">                @import url(‘./css/index.css‘);            </style>            注意:@import url()必须写在文件最开始的位置。        链接式与导入式的区别:            1、<link/>标签属于XHTML,@import是属性css2.1            2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示            3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中            4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的

    优先级:内嵌式 > 内链式 > 外链式

三、选择器:    1.通配符选择器        *{            padding:0;            margin:0;            color:red;        }    2.标签选择器        h1{            color:red;        }        img{            width:900px;        }    3.id选择器 (父盒子不设高度,子内容填充)        #container{            width:900px;            margin:0 auto;

        }    4.类选择器        .content{            width:900px;            background-color:red;        }    5.子代选择器 (选择器之间用 > )        ul>li{            color:red;        }    6.后代选择器 (选择器之间用 空格)        ul a{            color:green;        }    7.群组选择器 (中间用,)        .title,.content,.footer{            width:900px;            margin:0 auto;            background-color:red;            border:1px solid red;        }    8.交集选择器 (选择器之间不能有空格,第一个标签必须是标签选择器,第二个标签可以是id或者类选择器)        p.p1{            color:red;        }        p#title1{            font-size:30px;            color:red;        }    9.毗邻选择器 (选择器之间用 +  紧跟着h3标题的标签)        h3+p{            color:red;        }    10.兄弟选择器 (选择器之间用~)        h3~p{            color:red;        }    11.属性选择器 ( ^ 以...开头,$ 以...结尾, * 包含..., ~ 有多个值中的其中一个 )        [class="baidu"]{            color:red;        }        [class^="btn"]{            color:yellow;            font-size:12px;        }        [class$="ault"]{            font-size:12px;            color:red;        }        [class]{            color:red;        }        [class*=‘baidu‘]{            color:red;        }        [class~=‘baidu‘]{            color:red;        }        input[input="text"]{            background-color:red;        }    css样式优先级:        行内样式 > 内部样式表 > 外部样式表        ID选择器 > 类选择器 > 标签选择器

四、伪类选择器    a:link{ background-color: blue;}   超链接  未被访问时的状态    a:hover{ color: green;}                    鼠标悬停时的状态    a:visited{ color: yellow;}                 鼠标单击时的状态    a:active{ color:blue;}                     鼠标不松手的状态    input:focus{ background-color:red;}        获取焦点时的状态

五、伪元素选择器:    p:first-letter{ font-size:30px;}  p段落 为文本的首字母设置特殊样式    p:before{                               用于在元素的内容前面插入新内容        content:"开头";        color:red;    }    p:after{                                用于在元素的内容后面插入新内容        content:"结尾";        color:green;    }

六、字体样式 文本样式 背景属性    1.字体样式:        默认字体大小: 16px = 1em  12px = 0.75em        font-size:30px;        注:            文字大小:如果设置成inherit表示继承父元素的字体大小值。

        font-style:oblique;        注:            文字的样式:italic 也表示斜体;                        推荐设置斜体的时候使用oblique

        font-weight:bolder;  字体的粗细        注:            文字的粗细:normal   默认值,标准粗细                       bord    粗体                       border  更粗                       lighter 更细                       100~900 设置具体粗细,400等同于normal,而700等同于bold                       inherit 继承父元素字体的粗细值

        font-family:"微软雅黑";        font-family: "Microsoft Yahei", "微软雅黑", "Arial", "sans-serif";        注:            文字的类型:                如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。                如果设置成inherit,则表示继承父元素的字体。

        color:red;        注:            文字颜色:支持三种颜色值: #FF0000  RGB(255,0,0)  red

    2.文本样式:        text-decoration:underline;        注:            线:overline 上  line-through 中  underline 下                none    无(默认 定义标准的文本)                inherit 继承父元素的text-decoration属性的值。        text-indent:20px;        注:            首行缩进:20px

        text-align:center;        注:            文本对齐可水平居中:left(默认值) right center justify(两端对齐只针对英文)

        text-shadow: 10px 10px 0.5px #fff;        注:            阴影:左右,上下,0-1,颜色

        cursor:pointer;        注:            鼠标形状:pointer 指针,cell 十字,default 鼠标

        height:200px;        line-height:200px;        注:            文本垂直居中:height = line-height

    3.背景属性:        background-color:red;        注:            背景颜色。        background-image:url("./images/***.png");        注:            背景图像        background-size: 300px 300px;        注:            背景图片的尺寸

        background-repeat:no-repeat;        注:            如何重复背景图像            repeat     默认。背景图像将在垂直方向和水平方向重复。            repeat-x   背景图像将在水平方向重复。            repeat-y   背景图像将在垂直方向重复。            no-repeat  背景图像将仅显示一次。            inherit        规定应该从父元素继承background-repeat属性的设置。

        background-attachment:fixed;        注:            背景图像是否固定或者滚动            scroll 默认值。背景图像会随着页面其余部分的滚动而移动。            fixed  当页面的其余部分滚动时,背景图像不会移动。            inherit    规定应该从父元素继承background-attachment属性的设置。

        background-position:10px 20px;        注:            背景图像的位置            top left          如果只设置了一个关键词,那么第二个值就是"center"。            top center            top right            center left            center center            center right            bottom left            bottom center            bottom right

            x% y%             第一个值是水平位置,第二个值是垂直位置。默认值:0% 0%。                               左上角是 0% 0%。右下角是 100% 100%。                               如果只设置了一个值,另一个值就是50%。

            xpos ypos          第一个值是水平位置,第二个值是垂直位置。                                左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。                                如果只设置了一个值,另一个值就是50%。                                可以混合使用%和position值。

        background: green;        background: url("./homesmall1.png") no-repeat 10px 12px red;        background: url("./homesmall1.png") no-repeat center red fixed;        注:            简写

七、盒模型 border margin padding    HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型。    

    1.border        border-top-width: 5px;        border-bottom-width: 10px;        border-left-width: 15px;        border-right-width: 20px;

        border-top-color: red;        border-bottom-color: yellowgreen;        border-left-color: yellow;        border-right-color: blue;

        border-top-style: solid;        实线        border-bottom-style: dashed;    矩形虚线边框        border-left-style: dotted;      点状虚线边框        border-right-style: double;     两条实线

        四个值 上 右 下 左            border-style: dotted dashed double solid;            border-width: 5px 10px 15px 20px;            border-color: blue red yellow slateblue;        三个值 上 左右 下            border-style: dotted double solid;            border-width: 5px 10px 20px;            border-color: blue yellow slateblue;        两个值 上下 左右            border-style: dotted solid;            border-width: 5px 20px;            border-color: blue yellow;        一个值 上下左右            border-style: dotted;            border-width: 20px;            border-color: blue;        简写:            border: none   无边框            border: 10px solid yellow;

    2.margin        外边距: 控制元素与元素之间的距离        注意:margin会改变实际大小,背景色不会渲染到margin区域 这个区域会以空白显示,但是也属于盒子的一部分。        margin-top: 20px;        margin-left: 40px;        margin-bottom: 20px;        margin-right: 40px;

        上 右 下 左            margin: 20px 30px 40px 50px;        上 左右 下            margin: 20px 30px 40px;        上下 左右            margin: 20px 40px;        上下左右            margin-bottom: 50px;        水平居中 盒子元素            margin: 0 auto;

        特殊性:            水平方向没有这种特性;垂直方向的特殊性;            当两个垂直外边距相遇时,会形成一个外边距,称为 外边距合并,已大的为基准!!            解释:                所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之(以最大的为基准)。

            注意:父子级盒子 嵌套 设置外边距 会形成外边距合并,影响页面布局。            解决办法:                (子债父还)                1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。                2.父级overflow:hidden                3.父级设置padding(破坏非空白的折叠条件)                4.父级设置border

    3.padding        内边距:控制内容到边框的距离,内边距会扩大元素所在的区域,width+padding;        注意:为元素设置内边距,只能影响自己,不会影响其他的元素,padding不支持负值。        padding-left: 20px;        padding-top: 30px;        padding-right: 40px;        padding-bottom: 40px;

        padding: 10px 20px 30px 40px;        padding: 10px 30px 50px;        padding: 10px 20px;        padding: 10px;

八、display visibility 属性    1.控制HTML元素的显示和隐藏    2.块级元素与行内元素的转换    display:none;    注:        none            控制元素隐藏 不占位置            HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。        block            块级元素    独占一行,可设宽高(div p h ul ol li)            默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。        inline-block            行内块元素  一行内展示,可设宽高 (img input)            同时具有行内元素和块级元素的特点。        inline            行内元素    一行内展示,不可设宽高 (a span label)            元素的 width、height、margin-top都不会有什么影响.

        一般:            行内块元素 转化为 块级元素;            行内元素   转化为 块级元素/行内块元素;

    visibility: hidden;    注:        控制元素隐藏 占位置 影响后面盒子的布局

九、float 属性    文档流:指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。    浮动影响:浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。

    float:left;    左浮动 左侧为起始,从左往右依次排列          right;   右浮动 右侧为起始,从右往左依次排列          none;

    浮动效果:        1.浮动可以使元素脱离文档流,不占位置            脱离文档流,也就是将元素从普通的布局排版中拿走,            其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。        2.浮动会使元素提升层级        3.浮动可以使块元素在一行内排列,不设置宽高时,可以使元素适应内容        4.浮动可以使行内元素支持宽高    浮动说明:        假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,        那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);        如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。        此外,浮动的框之后的block元素元素会认为这个框不存在,但其中的文本依然会为这个元素让出位置。        浮动的框之后的inline元素,会为这个框空出位置,然后按顺序排列。

    浮动产生的问题:        父元素不设置高度时,子元素设置了浮动,不会撑开父元素的高度,此时父盒子没有高度了。因为子元素不占位置了!        如果在父盒子下面还有一个标准流的盒子,那么就会影响页面的布局。------清除浮动    解决办法:        1.给父盒子设定固定高度;缺点:不灵活;        2.给浮动元素最后一个加一个空的块级元素,且该元素为不浮动float:none,设置clear:both,就会撑开盒子。            缺点:结构冗余        3.官方推荐:推荐使用:            .wrap:after{                content: ‘.‘;                display: block;                height: 0;                visibility: hidden;                clear: both;            }       4.推荐使用:给父元素添加overflow:hidden  eg: .warp{overflow: hidden;}

十、position z-index 属性    1.position        position: absolute;        top: 20px;        bottom: 10px;        left: 20px;        right: 0px;

        static : 默认值        relative : 相对定位            1. 不设置偏移量的时候,对元素没有任何影响。            2. 相对定位可以提升层级关系。            3. 相对定位是相对于自身定位。

        absolute : 绝对定位            1. 可以提升层级关系。            2. 脱离文档流。            3. 在没有父级元素定位时,以浏览器的左上角为基准定位的。            4. 有父级的情况下,父级设置相对定位,子集设置绝对定位,是以父盒子进行定位的。               (父相子绝) 来进行位置的调整

        fixed : 固定定位(可用来打广告!)

    2.z-index        border-radius: 50%;     # 设置圆        border-radius: 10px 20px 30px 40px;  # 设置边角

        position: absolute;        z-index: 3;        z-index: 1000;        注:            数字越大,越在外层!

十一、网页布局    网页布局:        上下 结构        上中下 结构        上左右下 结构: 1-2-1 结构        上左中右下 结构: 1-3-1 结构    一般:        首先:        *{padding:0;margin:0;}        ul>li{list-style:none;}        a{text-decoration:none;}        .wrap{width:100%;background-color:gray;}        .header{}        .content{}        .footer{}        ...        ...

原文地址:https://www.cnblogs.com/alice-bj/p/8972299.html

时间: 2024-10-13 12:13:23

前端开发 - CSS - 总结的相关文章

前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示

1+x 证书 Web 前端开发 css 专项练习

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/ 原文地址:https://www.cnblogs.com/zhsh666/p/11967944.html

web前端开发——css

一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得美观: 将HTML页面的内容与样式分离: 提高web开发的工作效率. 3.css的优势 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少网页的代码量,增加网页浏览器速度,节省网络带宽 运用独立页面的css,有利于网页被搜索引擎收录 二.css语法 css语法分为两部分:

前端开发 css、less编写规范

壹 ? 引 早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less.css样式开发规范.一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习JavaScript基础知识,所以对于样式规范一直处于放置状态.直到上周我收到了一条关于JavaScript规范的评论,提醒了我样式规范不能再拖了,那么在放假前花点时间整理一遍作为复习也算不错. 说在前面,本文虽然作为规范但对于less与css写法也给出了部分建议,所以在阅读本规范前建议读者先掌握le

Mobile Web 前端开发 CSS动画经验分享

谈到动画作用.CSS动画是Mobilweb开发的利器,CSS动画不得不谈.受限于Mobil设备功能等疑问,PC上的动画完结计划在Mobil上大都行不通,幸运的Mobil上我能够用CSS动画,今日我就来了解一下CSS动画的3个首要成员. CSS改换(Transit transit默许的突变动画.当CSS特点改动的时分,界说好需求改换的CSS特点.transit动画被触发.可是并不是一切的CSS特点改动都会触发translat当前,并没有一个官方的文档列出来那些能够,那些不能够,可是能够经过一些小窍

前端开发-CSS介绍

我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什么是CSS? CSS是指层叠样式表(Cascading Style Shee

前端开发--css属性书写顺序

css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; float: ; clear: ; /*定位属性*/ position: ; top: ; right: ; bottom: ; left: ; z-index: ; /*盒模型属性*/ width: ; min-width: ; max-width: ; height: ; min-height

Web前端开发——CSS技术大梳理

前言 之前在看牛腩的时候对CSS进行了一下总结,那会儿刚接触,对CSS的理解还是不够系统和全面,现在看完CSS 了,再对CSS整体梳理一下. 整体概括 话不多说,先上图,对CSS进行一下整体了解. css是英文Cascading Style Sheets的缩写.中文翻译为层叠样式,是用于控制网页样式并允许将样式信息与网 页内容分离的一种标记性语言. 之前在做牛腩的时候已经把CSS的基本知识和用法进行了详细的讲解(CSS之浅入浅出,CSS之核心篇).这里就 不再累述.这里主要讲一下CSS与java

前端开发 - CSS - 下

CSS: 12.display 13.浮动效果 14.浮动特性 15.浮动产生的问题和解决方法 16.float京东导航栏 17.position 18.z-index 19.京东案例 12.display <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>display</title> <style