zoukankan      html  css  js  c++  java
  • CSS之元素

    CSSS书写位置

    • 内嵌式
    <head>
     <style type = "text/css">
        ****
     </style>
    </head>
    
    • 外链式<写在head里>
    <link rel="stylesheet" href="1.css">
    
    • 行内样式表
    <h1 style="fontsize:30px;color=red">威武霸气</h1>
    

    三种写法特点

    • 内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。
    • 外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。
    • 行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)

    标签分类(显示样式)

    块元素

    典型代表:div,h1--h6,p,ul,li

    特点:

    • 独占一行
    • 可以设置宽高
    • 嵌套下,子块元素宽度(没有定义情况下)和父亲块元素宽度默认一致

    行内元素

    典型代表:span,a,strong,em,del,ins

    特点:

    • 在一行上显示
    • 不能直接设置宽高
    • 元素的宽和高就是内容撑开的宽高

    行内块元素(内联元素)

    典型代表:input,img

    特点:

    • 在一行上显示
    • 可以设置宽高

    元素之间的转换

    • 块元素转行内元素
    div,p{
        display:inline;
    }
    
    
    • 行内元素转块元素
    span{
        display:block
    }
    
    • 块和行内元素转行内块元素
    div,a,span,strong{
        display:inline-block
    }
    

    CSS三大特性

    层叠性

    当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

    继承性

    继承性发生的前提是包含(嵌套关系)

    • 文字颜色可以继承

    • 文字大小可以继承

    • 字体可以继承

    • 字体粗细可以继承

    • 文字风格可以继承

    • 行高可以继承
      总结:文字的所有属性都可以继承

    • 特殊情况
      h系列不能继承文字大小
      a标签不能继承文字颜色

    优先级

    默认样式<标签选择器<类选择器<id选择器<行内样式<!important

    优先级特点:

    • 继承的权重为0
    • 权重会叠加

    链接伪类

    a:link {属性:值} a{属性:值}效果是一样的

    a:link{属性:值;}       链接默认状态	 
    a:visited{属性:值;}     链接访问之后的状态 
    a:hover{属性:值;}  鼠标放到链接上显示的状态
    a:active{属性:值;}      链接激活的状态
    a:focus{属性:值;}     获取焦点
    

    背景属性

    • background-color 背景颜色
    • background-image 背景图片
    • Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
    • Background-position left | right | center | top | bottom 背景定位
    • Background-attachment 背景是否滚动 scroll | fixed
  • 相关阅读:
    HDU5818 Joint Stacks 左偏树,可并堆
    HDU1512 ZOJ2334 Monkey King 左偏树
    BZOJ3626 [LNOI2014]LCA 树链剖分 线段树
    BZOJ4034 [HAOI2015]树上操作 树链剖分
    BZOJ1146 [CTSC2008]网络管理Network 树链剖分 主席树 树状数组
    BZOJ1968 [Ahoi2005]COMMON 约数研究 数论
    BZOJ2759 一个动态树好题 LCT
    BZOJ3669 [Noi2014]魔法森林 LCT
    HDFS要点
    HDFS(0.20.2)运营中急救方案
  • 原文地址:https://www.cnblogs.com/tmacforever/p/8416574.html
Copyright © 2011-2022 走看看