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；

希望你眼眸有星辰，心中有山海，从此以梦为马，不负韶华
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/daviddd/p/12048328.html