1.css层叠样式表

　　1.什么是CSS?

  1. CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。
  2. 也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

　　2.css的优势

  1. 1.内容与表现分离
  2. 2.网页的表现统一，容易修改
  3. 3.丰富的样式，使页面布局更加灵活
  4. 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽
  5. 5.运用独立页面的css,有利于网页被搜索引擎收录

2.css的引入方式

  1.   1.内嵌式
  2.         一般不写内嵌式，以后不好维护
  3.  
  4.         <h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1>
  5.  
  6.   2.内链式
  7.         <style type="text/css">
  8.             h2{font-size:30px;color:red;}
  9.         </style>
  10.  
  11.   3.外链式
  12.  
  13.         链接式
  14.             link css 同时加载的！
  15.             <link rel="stylesheet" type="text/css" href="./css/index.css">
  16.  
  17.         导入式
  18.             实际用的很少，先加载html，在加载css
  19.             import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下
  20.             <style type="text/css">
  21.                 @import url('./css/index.css');
  22.             </style>
  23.             注意：@import url()必须写在文件最开始的位置。
  24.  
  25.         链接式与导入式的区别：
  26.             1、<link/>标签属于XHTML,@import是属性css2.1
  27.             2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
  28.             3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  29.             4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
  30.  
  31.     生效优先级：内嵌式 > 内链式 > 外链式
  1. css样式优先级：
  2. 行内样式 > 内部样式表 > 外部样式表
  3. ID选择器 > 类选择器 > 标签选择器

　　

3.基本选择器

  1. /*1.标签选择器
  2.         p {
  3.           color: red;
  4.         }

  6.  /*2.id选择器：
  7.         #user {
  8.           background-color: yellow;
  9.         }
  10.  
  11.  /*3.类选择器
  12.  
  13.         .c1 {
  14.           color: blue;
  15.         }
  16.         .c2{
  17.             background-color: red;
  18.         }
  19.         .c3{
  20.             font-size: 12px;
  21.         }
  22.  
  23. /*4.通配符选择器*/
  24.         *{
  25.             margin:;
  26.             padding:;
  27.         }

4、高级选择器

  1. /*5.子代选择器 (选择器之间用 > )*/
  2.         ul > li {
  3.             color: red;
  4.         }
  5.  
  6. /*6.后代选择器 (选择器之间用 空格)*/
  7.         ul a {
  8.             color: green;
  9.         }
  10.  
  11. /*7.群组选择器 (中间用,)*/
  12.         .title, .content, .footer {
  13.             width: 900px;
  14.             margin: 0 auto;
  15.             background-color: red;
  16.             border: 1px solid red;
  17.         }
  18.  
  19. /*8.交集选择器 (选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器)*/
  20.         p.p1 {
  21.             color: red;
  22.         }
  23.  
  24.         p#title1 {
  25.             font-size: 30px;
  26.             color: red;
  27.         }
  28.  
  29. /*9.毗邻选择器 (选择器之间用 +  紧跟着h3标题的标签)*/
  30.         h3 + p {
  31.             color: red;
  32.         }
  33.  
  34. /*10.兄弟选择器 (选择器之间用~)*/
  35.         h3 ~ p {
  36.             color: red;
  37.         }

5.属性选择器

　　 ^ 以...开头，

　　$ 以...结尾,

　　* 包含...,

　　~ 有多个值中的其中一个

  1.         [class="baidu"]{
  2.             color:red;
  3.         }
  4.         [class^="btn"]{
  5.             color:yellow;
  6.             font-size:12px;
  7.         }
  8.         [class$="ault"]{
  9.             font-size:12px;
  10.             color:red;
  11.         }
  12.         [class]{
  13.             color:red;
  14.         }
  15.         [class*='baidu']{
  16.             color:red;
  17.         }
  18.         [class~='baidu']{
  19.             color:red;
  20.         }
  21.         input[input="text"]{
  22.             background-color:red;
  23.         }

6、伪类选择器

　　a标签的 lover hate

  1.     a:link{ }   超链接  未被访问时的状态
  2.     a:hover{ color: green;}                    鼠标悬停时的状态
  3.     a:visited{ color: yellow;}                 鼠标单击时的状态
  4.     a:active{ color:blue;}                     鼠标不松手的状态
  5.     input:focus{ background-color:red;}        获取焦点时的状态
  1.  nth-child（n）
  1.         div ul li:first-child{color: red;}           /*选中第一个元素*/
  2.         div ul li:last-child{color: yellow;}         /*选中最后一个元素*/
  3.         div ul li:nth-child(3){color: purple;}        /*选中当前指定的元素  数值从1开始*/
  4.         div ul li:nth-child(n){color: red;}           /*n表示选中所有 从0开始的  0的时候表示没有选中*/
  5.         div ul li:nth-child(2n){color: gold;}          /*偶数*/
  6.         div ul li:nth-child(2n-1){color: yellow;}     /*奇数*/
  7.         div ul li:nth-child(5n+1){color: red;}       /*隔几换色  隔行换色*/

7、伪元素选择器

  1.     p:first-letter{ font-size:30px;}        p段落 为文本的首字母设置特殊样式
  2.     p:before{                               用于在元素的内容前面插入新内容
  3.         content:"开头";
  4.         color:red;
  5.     }
  6.     p:after{                                用于在元素的内容后面插入新内容（清除浮动）
  7.         content:"结尾";
  8.         color:green;
  9.     }
  10.  
  11. 使用此伪元素选择器一定要结合content属性

8、字体样式，文本属性，背景图片

　　（1）字体样式

  1.  默认字体大小： 16px = 1em  12px = .75em
  2.  
  3.         ) font-size:30px;
  4.             注：文字大小：如果设置成inherit表示继承父元素的字体大小值。
  5.  
  6.         ) font-style:oblique;
  7.             注：文字的样式：italic 也表示斜体；
  8.                         推荐设置斜体的时候使用oblique
  9.  
  10.         ) font-weight:bolder;  字体的粗细
  11.             注：  文字的粗细：normal   默认值，标准粗细
  12.                            bord    粗体
  13.                            border  更粗
  14.                            lighter 更细
  15.                            ~ 设置具体粗细，400等同于normal，而700等同于bold
  16.                            inherit 继承父元素字体的粗细值
  17.  
  18.         ) font-family:"微软雅黑";
  19.            font-family: "Microsoft Yahei", "微软雅黑", "Arial", "sans-serif";
  20.             注：文字的类型：
  21.                     如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
  22.                     如果设置成inherit，则表示继承父元素的字体。
  23.  
  24.         ) color:red;
  25.              注：文字颜色：支持三种颜色值： #FF0000  RGB(,,)  red

　　（2）文本属性

  1.         (1)#  text-decoration:underline;
  2.                 注：线：overline 上
  3.                         line-through 中
  4.                         underline 下
  5.                         none    无（默认 定义标准的文本）
  6.                         inherit 继承父元素的text-decoration属性的值。
  7.         (2)#  text-indent:20px;
  8.                 注：首行缩进：20px
  9.  
  10.         (3)#  text-align:center;
  11.                 注：文本对齐可水平居中：left（默认值） right center justify(两端对齐只针对英文)
  12.  
  13.         (4)#  text-shadow: 10px 10px 0.5px #fff;
  14.                 注：阴影：左右，上下，0-1，颜色
  15.  
  16.         (5)#  cursor:pointer;
  17.                 注： 鼠标形状：pointer 指针，
  18.                              cell 十字，
  19.                              default 鼠标
  20.  
  21.         (6)#   height:200px;
  22.             #  line-height:200px;
  23.                 注：文本垂直居中：height = line-height

（3）背景属性

  1.         (1)#  background-color:red;
  2.                 注：背景颜色。
  3.         (2)#  background-image:url("./images/***.png");
  4.                 注：背景图像
  5.         (3)#  background-size: 300px 300px;
  6.                 注：背景图片的尺寸
  7.  
  8.         (4)#  background-repeat:no-repeat;
  9.             注：
  10.                 如何重复背景图像
  11.                 repeat     默认。背景图像将在垂直方向和水平方向重复。
  12.                 repeat-x   背景图像将在水平方向重复。
  13.                 repeat-y   背景图像将在垂直方向重复。
  14.                 no-repeat  背景图像将仅显示一次。
  15.                 inherit        规定应该从父元素继承background-repeat属性的设置。
  16.  
  17.         (5)#  background-attachment:fixed;
  18.             注：
  19.                 背景图像是否固定或者滚动
  20.                 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
  21.                 fixed  当页面的其余部分滚动时，背景图像不会移动。
  22.                 inherit    规定应该从父元素继承background-attachment属性的设置。
  23.  
  24.         (6)#  background-position:10px 20px;
  25.                 注：
  26.                     背景图像的位置
  27.                     top left          如果只设置了一个关键词，那么第二个值就是"center"。
  28.                     top center
  29.                     top right
  30.                     center left
  31.                     center center
  32.                     center right
  33.                     bottom left
  34.                     bottom center
  35.                     bottom right
  1.         background: green;
  2.         background: url("./homesmall1.png") no-repeat 10px 12px red;
  3.         background: url("./homesmall1.png") no-repeat center red fixed;
  4.         注：
  5.             简写
  6. 　　　　　
  7.     　　　　body {
  8.      　　　　 background-color: red;
  9.       　　　　backgraound-image: url(xx.png);
  10.      　　　　 background-size: 300px 300px;
  11.      　　　　 background-repeat: no-repeat;
  12.      　　　　 background-position: center
  13.     　　　　}
  14.  
  15.     　　　　body {
  16.       　　　　background: red url(xx.png) no-repeat fixed center/300px 300px;
  17.     　　　　}

9.盒子模型

  1. HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。
  2. 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域）

（1）padding

　　内边距：控制内容到边框的距离,内边距会扩大元素所在的区域,width+padding;
　　注意：为元素设置内边距，只能影响自己，不会影响其他的元素，padding不支持负值。

  1.     /*小属性设置*/
  2.     padding-top: 30px;
  3.     padding-right: 30px;
  4.     padding-bottom: 30px;
  5.     padding-left: 30px;
  6.  
  7.     /*上 右 下 左*/
  8.     padding: 20px 30px 40px 50px ;
  9.  
  10.     /*上 左右  下*/
  11.     padding: 20px 30px 40px;
  12.  
  13.     /* 上下 左右*/
  14.     padding: 20px 30px;
  15.  
  16.     /*上下左右*/
  17.     padding: 20px;

（2） border

  1.         border-top-width: 5px;
  2.         border-bottom-width: 10px;
  3.         border-left-width: 15px;
  4.         border-right-width: 20px;
  5.  
  6.         border-top-color: red;
  7.         border-bottom-color: yellowgreen;
  8.         border-left-color: yellow;
  9.         border-right-color: blue;
  10.  
  11.         border-top-style: solid;        实线
  12.         border-bottom-style: dashed;    矩形虚线边框
  13.         border-left-style: dotted;      点状虚线边框
  14.         border-right-style: double;     两条实线
  1.         简写：
  2.             border: none   无边框
  3.             border: 10px solid yellow;
  1.         border-radius: 50%;                  # 设置圆
  2.         border-radius: 10px 20px 30px 40px;  # 设置边角
  1.         /*小三角 箭头指向下方*/
  2.         div{
  3.             width:;
  4.             height:;
  5.             border-bottom: 20px solid red;
  6.             border-left: 20px solid transparent;
  7.             border-right: 20px solid transparent;
  8.         }

（3）margin

  1. 外边距: 控制元素与元素之间的距离
    注意：margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分。
  1.         margin-top: 20px;
  2.         margin-left: 40px;
  3.         margin-bottom: 20px;
  4.         margin-right: 40px;
  5.  
  6.         #上 右 下 左
  7.             margin: 20px 30px 40px 50px;
  8.         #上 左右 下
  9.             margin: 20px 30px 40px;
  10.         #上下 左右
  11.             margin: 20px 40px;
  12.         #上下左右
  13.             margin-bottom: 50px;
  14.         #水平居中 盒子元素
  15.             margin: 0 auto;
  1. 注意：
  1. margin塌陷：当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷
  1. 善用父级的padding，而不是使用margin ：因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行
  2. 所以父亲就掉下来
  1.  

10、display visibility 属性

  1. # dispaly
  2. 1.控制HTML元素的显示和隐藏 
    2.块级元素与行内元素的转换。
  3. display:block
  4. display:inline
  5. display:inline-block
  6. display：none
  7.  
  8. # visibility
  9. visibility:hidden
  10.  
  11. # 区别
  12. visibility：hidden----将元素隐藏，但是还占着位置，影响页面布局
  13. display：none----将元素的显示设为无，不占任何的位置，不影响

11、float浮动

文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

浮动特性
　　1.浮动的元素脱标
　　2.浮动的元素互相贴靠
　　3.浮动的元素有“字围”效果
　　4.收缩的效果

浮动影响：
　　浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。

  1. float:left：左浮动 左侧为起始，从左向右排列
  2. float:right：右浮动  右侧为起始，从右向左排列
  3. float:none ：不浮动，默认不浮动

浮动效果：
　　1.浮动可以使元素脱离文档流，不占位置
　　　　脱离文档流，也就是将元素从普通的布局排版中拿走，
　　　　其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
　　2.浮动会使元素提升层级
　　3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容
　　4.浮动可以使行内元素支持宽高

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

12、position、z-index 属性

（1）position

  1.         position: absolute;
  2.         top: 20px;
  3.         bottom: 10px;
  4.         left: 20px;
  5.         right: 0px;
  6.  
  7.         static ： 默认值
  8.         relative : 相对定位 有bug
  9.             1. 不设置偏移量的时候，对元素没有任何影响。
  10.             2. 相对定位可以提升层级关系。
  11.             3. 相对定位是相对于自身定位。
  12.  
  13.         absolute : 绝对定位
  14.             1. 可以提升层级关系。
  15.             2. 脱离文档流。
  16.             3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。
  17.             4. 有父级的情况下，父级设置相对定位，子集设置绝对定位，是以父盒子进行定位的。
  18.                （父相子绝） 来进行位置的调整
  19.  
  20.         fixed : 固定定位(返回顶部)

　　

　　父相子绝

  1.         .box{
  2.             width: 300px;
  3.             height: 300px;
  4.             border: 5px solid red;
  5.             margin: 100px;
  6.             /*父盒子设置相对定位*/
  7.             position: relative;
  8.             padding: 50px;
  9.         }
  10.  
  11.         .box p{
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: pink;
  15.             /*子元素设置了绝对定位*/
  16.             position: absolute;
  17.             top: 10px;
  18.             left: 20px;
  19.         }

　　绝对定位盒子居中

  1.         .box .c{
  2.             width: 960px;
  3.             height: 69px;
  4.             background-color: pink;
  5.             /*margin: 0 auto;*/
  6.             position: relative;
  7.             left: 50%;
  8.             margin-left: -480px;
  9.  
  10.             /*设置绝对定位之后，margin:0 auto;不起任何作用，
  11.             如果想让绝对定位的盒子居中。当做公式记下来
  12.                 设置子元素绝对定位，
  13.                 然后left:50%;
  14.                 margin-left等于元素宽度的一半，
  15.             实现绝对定位盒子居中*/
  16.         }

（2）z-index

  1. 　　position: absolute;
  2. 　　z-index: 3;
  3. 　　z-index: 1000;
  4. 　　注：
  5. 　　　　数字大的压着数字小的，默认为0
  6.             从父现象

13、网页布局

  1.     网页布局：
  2.         上下 结构
  3.         上中下 结构
  4.         上左右下 结构： 1-2-1 结构
  5.         上左中右下 结构： 1-3-1 结构
  1.     一般css先这样写：
  2.         *{padding:0;margin:0;}
  3.         ul>li{list-style:none;}
  4.         a{text-decoration:none;}
  5.         .wrap{width:100%;}
  6.         .header{}
  7.         .content{}
  8.         .footer{}
  9.         ...
  10.         ...

14、html-css案例

14-HTML-CSS案例

前端- css - 总结的更多相关文章

  1. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  2. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  10. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

随机推荐

  1. Jquery的跨域调用

    JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念.当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法. getJSON ...

  2. systemd 之 systemctl

    Systemd 常规操作与彩蛋 一.前言 上了俩个月的RHCE工程师的班,收获颇多.话说回来,在 redhat 7 中有个非常重要的概念,即:systemd systemd 是 Linux 下的一款系 ...

  3. 硬盘上的一些算法小题目||and今天看了下林锐的书以及gdb调试 及一些变成算法小题目

    gdb调试:观察点,断点,事件捕捉点.step 进入函数,next 跳过函数,until 跳出循环,finish 结束函数 林锐:书后试题 & c++的对象模型图 看了二叉树的非递归遍历, 链 ...

  4. 【FLEX教程】#007 如何让JS调用SWF里的方法

    HTML中,JS如何调用SWF里面已经封装好的代码呢? 有一些事情Flex没办法实现的,需要通过调用JS来实现. eg: 当浏览器窗体关闭的时候,弹出一个对话框,提示用户是否退出?或者是否保存当前的操 ...

  5. bin/hdfs dfs命令

    appendToFile Usage: hdfs dfs -appendToFile <localsrc> ... <dst> 追加一个或者多个文件到hdfs制定文件中.也可以 ...

  6. P2418 yyy loves OI IV

    题目背景 某校2015届有两位OI神牛,yyy和c01. 题目描述 全校除他们以外的N名学生,每人都会膜拜他们中的某一个人.现在老师要给他们分宿舍了.但是,问题来了: 同一间宿舍里的人要么膜拜同一位大 ...

  7. Python全栈开发：list 、tuple以及dict的总结

    总结: 列表:增:append(),inset(),extend() 删:pop(),remove(),clear(),del 改:a.通过指定元素和切片重新赋值.b.可以使用repelace替换列表 ...

  8. HBase学习之路 （七）HBase 原理

    系统架构 错误图解 这张图是有一个错误点:应该是每一个 RegionServer 就只有一个 HLog,而不是一个 Region 有一个 HLog. 正确图解 从HBase的架构图上可以看出,HBas ...

  9. virtualbox+vagrant学习-2(command cli)-22-vagrant validate命令

    Validate 格式: vagrant validate [options] 该命令用于验证你的Vagrantfile文件 userdeMacBook-Pro:~ user$ vagrant val ...

  10. 分布式缓存技术redis系列（一）——redis简介以及linux上的安装

    redis简介 redis是NoSQL(No Only SQL,非关系型数据库)的一种,NoSQL是以Key-Value的形式存储数据.当前主流的分布式缓存技术有redis,memcached,ssd ...