zoukankan      html  css  js  c++  java
  • CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置

     内嵌式写法

    <head>

    <style type=”text/css”>

    样式表写法

    </style>

    </head>

    外链式写法

    写在head里,<link rel=”stylesheet” href = “1.css”>

    行内样式表/内联式

    <h1 style = “font - size : 30px ; color : red;”>14期霸气</h1>

     

    各个样式特点:

     内嵌式 :样式只作用于当前文件,没有真正实现结构表现分离。

     外链式写法: 作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离

     行内样式表 作用范围仅限于当前标签,范围小,结构表现混在一起(不推荐使用

     

    标签分类(显示的方式)

    1:块元素

    典型代表 div  h1 -h6   p  ul  li  

    特点: 独占一行/可设宽高/嵌套(包含)下子块元素宽度(没有定义的情况下) 和父块元 素宽度默认一致。

    2行内元素

    典型代表span   a strong em del ins label

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

    3:行内块元素(内联元素)

    典型代表input  img

    特点: 在用一行上显示 / 可以设置宽高 /

    块元素转行内元素

    div,p{

        Display : inline ; 

        }

    行内元素转块元素

    a,span{

        Display block 

         }

    块元素和行内元素转 行内块元素

    div,a,ui,ul{

             Display inline - block

            }

     

    CSS三大特性:

     1层叠性

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

    2 继承性

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

    文字颜色可以继承

    文字大小可以继承

    文体可以继承

    字体粗细可以继承

    文字风格可以继承

    行高可以继承

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

    特殊情况:

    h系列不能集成文字的大小

    标签不能继承文字颜色

    优先级:

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

    继承<通配符<伪对象<标签<伪对象<标签< 伪类||属性选择< ID <内联<important

    优先级特点: 继承的权重为0 ; 权重会叠加

       权重相同时,css 遵信就近原则:靠近元素的样式具有最大的优先级,或者  说排在最后的样式优先级最大

     所有都相同时,声明靠后的优先级最大  

     

    CSS 链接伪类

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

    Alink { 属性:值 ;} 链接默认状态

    Avisited { 属性:值;  } 链接访问之后的状态

    Ahover { 属性:值; } 鼠标放到链接上显示的状态

    Aactive { 属性:值; } 链接激活的状态

      focus{属性: 值; } 获取焦点

     

    文本修饰:

    text-decoration none |underline  | line-though   下划线

    背景属性

    Background-color   背景色

    Background-image  背景图片

    Background-repeat:repeat(默认) background-no-repeat epeat-x repeat-y背景平铺

    Background-position 背景位置left ,right ,center ,top,bottom

    Background-position: right ; 方位值只写一个的时候,另外一个默认居中

    Background-position: right bottom ;   此时任意

    Background-position: 20px 30px ;  第一个为水平方向,第二个代表在垂直方向

    l Background-positionX:在X轴上的位置

    l Background-positionY:在Y轴上的位置

    Background-attachment  背景是否滚动 scroll fixed

    背景属性连写:   

    backgroundred url(“1.png”) no-repeat 30px 40px  scroll

    Line-height = 50px; 行高

    作者:明明
    出处: http://www.cnblogs.com/mingm/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意,必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

  • 相关阅读:
    ole辅助类sqlhelperaccess
    Asp.net中常用的26个性能优化方法
    MVP模式的相关知识
    ASP.NET AJAX入门系列
    非常实用]Asp.net常用的51个代码
    一步一步学Silverlight 系列文章
    .NET设计模式系列文章
    Asp.net添加上传进度条
    asp.net 用ajax实现文件上传
    增加弹出层的拖拽功能
  • 原文地址:https://www.cnblogs.com/mingm/p/6442850.html
Copyright © 2011-2022 走看看