css

CSS样式

1，介绍

• CSS：层叠样式表，定义如何H显示HTML元素，给HTML设置样式，让它更加美观

• 语法结构：两个部分，选择器以及一条或多条声明

  • selector{
    		property：value
    		property：value
    		...
    		}
    

2，四种引入方式

1. 行内式（内联样式）

   • 行内式是在标记的style属性中设定CSS样式，这种样式没有体现出CSS的优势，不推荐使用

2. 内嵌式（内部样式）

   • 嵌入式是将CSS样式集中写在网页得到标签对应的标签对中

3. 外部样式

   1. 链接式：

      • 建立一个index.css文件，
      • 在HTML文件中引入，
      • CSS文件中样式

   2. 导入式

   • style/style

3，嵌套规则

1. 块级元素可以包含内联元素或某些块级元素
2. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素，如
   h1,h2,h3,h4,h5,h6,p,dt
3. 内联元素不能包含块级元素，她只能包含内联元素
4. li内可以包含div块级元素
5. 块级元素与块级元素并列，内联元素与内联元素并列
6. 可以对块级标签设置长款
7. 不可以对内联标签设置长款

CSS选择器

1，基础选择器

• 选择器指明了{}中的样式，也就是样式作用于网页中哪些元素
• 通用元素选择器
  • 所有的标签全部都变色
• 标签选择器
  • 匹配所有使用同样标签的样式
• id选择器
  • 通过id属性匹配指定的标签
• class类选择器
  • 通给类属性对应的值，归类标签样式

2，家族选择器

• 后代选择器，不分层级，.c2 p{color:red}
• 子代选择器，只在儿子层 找 .c2>p{color:red}
• 多元素选择器：同时匹配所有指定的元素，用逗号隔开减少代码的重用
• 毗邻选择器：紧挨着，找相邻的，只找下面的，不找上面的。
  • .c2+p{color:red}
• 兄弟选择器：同一级别的，离得很近的。
  • .c2~p{color:red}

3，属性选择器

• 通过标签属性来扎到对应点标签，给标签设置样式
• [att]{color:red}：匹配所有具有att属性的元素
• [att=val]{color:val}：匹配所有att属性等于val的元素
• div[att]{color:red}：匹配所有具有att属性的p标签
• div[att=val]{color:red}: 匹配所有att属性等于val的div元素
• 属性的正则匹配

4，组合选择器

• 多元素选择器，用逗号分隔减少代码的重复性，给多元素设置相同的样式

5，伪类选择器

• 伪类选择器：伪类指的是标签下的不同状态
• a:link{color:red} —————a标签访问前设置样式
• a:active{color:green}————a标签鼠标点击下去显示的样式
• a:visited{color:pink}———–a标签访问后显示样式
• a:hover{color:purple}———-a标签悬浮到a标签显示的样式
• before 伪类
  • p:before{content:“hello”;color:red;dispaly:block;}
  • 在每个

    元素之前插入内容

• after 伪类
  • 在每个

    元素之后插入内容

  • p:after{content:“world”;color:red;dispaly:block;}

CSS优先级和继承

1，继承

• 继承是CSS的一个主要特征，他是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于他的后代。
• 但是CSS继承也是有限制的，有一些属性是不能被继承的，如：border，margin，padding，background，a
• CSS继承性的权重是非常低的，是比普通元素的权重还要低的0，所以任何显示声明的规则都可以覆盖其继承样式

2，优先级

• 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序

• 样式表中的特殊性描述了不同规则的相对权重，他的基本规则是

  • 内联样式 style=“” —–1000
  • id 选择器 #id{} ——-100
  • 类选择器 .class{} ——————-10
  • 元素选择器 div{} —————1

• ​ 权重越高，对应选择器的样式会被优先显示

• 组合选择器，各选则器的权重 相加

  • 权位不进位，原始优先级最大

• 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
     
  　　2、有!important声明的规则高于一切。
  
  　　3、如果!important声明冲突，则比较优先权。
  
  　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
  
  　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
  

css之操作属性

1，文本字体颜色

• 颜色属性被用来设置文字的颜色

• 颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

• 字体大小：font—size，默认是16px

• 字体格式：font-family:“楷体”

• 首行缩进：text-indent：32px

• 值	描述
  normal	默认值，标准粗细
  bold	粗体
  bolder	更粗
  lighter	更细
  100~900	设置具体粗细，400等同于normal，而700等同于bold
  inherit	继承父元素字体的粗细值

2，水平对齐方式

• text-align：属性规定元素中的文本的水平对齐方式
  • left 把文本排列到左边。默认值：由浏览器决定。
  • right 把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果
• 对齐方式之间可以互相搭配，也可以和 垂直对齐一起使用
• 垂直对齐：line-height

3，背景属性

• background-color #颜色

• background-image #图片路径

• background-repeat #默认平铺

• background-position #图片位置

• background-color: cornflowerblue
   
  background-image: url('1.jpg');
   
  background-repeat: no-repeat;(repeat:平铺满)
   
  background-position: right top（20px 20px）;
  
  简写：background:颜色 url("url") no-repeat right top
  

4，文字装饰

• text-decoration：none（常用，用于去掉标签a的下划线）

• 值	描述
  none	默认。定义标准的文本。
  underline	定义文本下的一条线。
  overline	定义文本上的一条线。
  line-through	定义穿过文本下的一条线。
  inherit	继承父元素的text-decoration属性的值。

5，盒子属性（边框属性）

1，margin

• 外边距：用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的

• 标签之间的距离

• margin-top:100px

• margin-bottom:100px

• margin-right:50px

• margin-left:50px

• 居中 应用：margin: 0 auto;

• body的外边距

  • 边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上

  • body{
        border: 1px solid;
        background-color: cadetblue;
    }
    

  • body{
        margin: 0;
    }
    

• margin:10px 20px 20px 10px；
  
          上边距为10px
          右边距为20px
          下边距为20px
          左边距为10px
  
  margin:10px 20px 10px;
  
          上边距为10px
          左右边距为20px
          下边距为10px
  
  margin:10px 20px;
  
          上下边距为10px
          左右边距为20px
  
  margin:25px;
  
          所有的4个边距都是25px
  

2，padding

• 单独使用填充属性可以改变上下左右的填充，缩写填充属性也可以使用，一旦改变一切都改变，设置同margin

• 内边距，内容和边框之间的距离

• padding-left: 10px;			
  padding-top: 8px;
  padding-right: 5px;
  padding-bottom: 5px;
  简写形式：padding：10px,8px,5px,5px
  

3，border

• 外边框属性

• style 样式

  • border-style:

  • 值	描述
    none	无边框。
    dotted	点状虚线边框。
    dashed	矩形虚线边框。
    solid	实线边框

• ​

• border-color：边框颜色

• border-width：边框宽度

• 简写形式:border: 10px,solid,yellow

• 四个边框也可以单独设置

  • border-left:10px,solid,yellow

• 设置圆角

  • border-radius: 50% 就是一个圆

4，content

• 内容，width和height是内容的高度和宽度

6，display

• 对块级标签和行内标签的操作

  值	意义
  display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
  display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
  display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
  display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

• 隐藏标签

  /*display: none;*/   /* 隐藏标签,不占原来的位置 */
  visibility: hidden;  /* 原来的位置还占着 */
  

7，浮动

• 一般用来进行页面布局

• 浮动会脱离标准 文档流，会造成父级标签塌陷问题

• 清除浮动的两种方式：

  • 父级标签设置高度

  • 通过伪元素选择器来进行清除浮动

  • clear清除浮动

    值	描述
    left	在左侧不允许浮动元素。
    right	在右侧不允许浮动元素。
    both	在左右两侧均不允许浮动元素。
    none	默认值。允许浮动元素出现在两侧。
    inherit	规定应该从父元素继承 clear 属性的值

8，overflow溢出

• 值	描述
  visible	默认值。内容不会被修剪，会呈现在元素框之外。
  hidden	内容会被修剪，并且其余内容是不可见的。
  scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  inherit	规定应该从父元素继承 overflow 属性的值。

9，思考

思考2：margin collapse（边界塌陷或者说边界重叠）

1、兄弟div：
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2、父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；