zoukankan      html  css  js  c++  java
  • CSS

    CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。

    CSS作用

    CSS样式表是一种网页内容的格式化技术,用于对网页显示内容进行效果装饰,它可以控制HTML中的几乎所有标记或者对其进行输出格式的重新设定,并且CSS可以将所修改的设定储存成一个独立的文件,提高其复用性。
    CSS不仅可以控制网页的输出格式,还可以控制其他的输出终端,常见的电视机,显示器,投影仪等均可以使用CSS进行控制(CSS2具有该功能)。 

    CSS定义规则

    1、直接对HTML文件内所使用的标签进行样式修改 
    应用范围:对某个具体的标签进行临时样式的修改,应用于该标签
    定义格式:
    <标签名 style="属性名1:属性值1; 属性名2:属性值2;……属性名n:属性值n;">

    2、在HTML文件内部的文件头定义处对标签样式进行总体定义
    应用范围:对某个网页中的某种标签进行样式的修改,应用于本网页内
    定义格式:

    <head>
        <style type="text/css">
        标签名1{
        属性名1:属性值1;
        属性名2:属性值2;
        ……
        }
        标签名2{
        属性名1:属性值1;
        属性名2:属性值2;
        ……
        }
        标签名N{
        属性名1:属性值1;
        属性名2:属性值2;
        ……
        }
        </style>
    </head> 
        
    

    3、将对标签样式的重定义制作成独立的CSS样式表文件(*.css)
    应用范围:定义一个独立的样式表文件,设定标签属性,应用于所有使用该文件的HTML文件
    定义格式:定义一个文件类型为css类型的文件

    CSS样式表与HTML结合方式

    直接对HTML文件内所使用的标签进行样式修改的无需再做其他操作,样式将直接应用到被修改的标签中
    在HTML文件内部文件头<HEAD>标签内定义的样式将在使用到该标签时自动应用其定义效果,无需再做其他操作

    使用独立制作的CSS样式表文件(*.css),讲该样式定义引入HTML文件的方式有如下两种:  
    在<HEAD>标签内使用<LINK>标签导入外部定义的CSS样式表文件
     <link rel=stylesheet href="mystyle.css" type="text/css">
    使用CSS 规则“@import”标记来导入样式表单
     <style>
       @import *.css;
     </style>

    选择符

    选择符即进行CSS样式表设定时的基础符号,用于定义被CSS样式表修饰的标记符号,共有四种类型  
    类型选择符
    包含选择符
    id选择符
    class选择符

    类型选择符

    以标签作为选择符
     p{ color:blue; }
     <p>类型选择符</p>

    包含选择符

    以被某个对象E包含的F作为选择符
    p b{ color:blue; }
    <p><b>包含选择符</b></p>
    <i><b>非包含选择符</b></i><br>
    <b>非包含选择符</b>
    <p>非包含选择符</p>

    id选择符

    以对象的唯一标识符的ID作为选择符
    #idselect{ color=red; }
    <b id=" idselect">ID选择符</b><br><b>非ID选择符</b>

    class选择符

    以对象的class属性作为选择符
    .class1{ color=red; }
    .class2{ color=blue; }
    <b class="class1"> class1类选择符</b><br>
    <b class="class1"> class1类选择符</b><br>
    <b class="class2"> class2类选择符</b><br>
    <b class="class2"> class2类选择符</b><br>
    <b>非类选择符</b>

    页面元素分类

    页面中的各种HTML标签对应的每个实体称为HTML元素,HTML元素根据页面效果分为两种
    块状元素(bolck)
    块状元素的宽度默认为占据一整行,常见的块状元素有div,h1-h6,hr,ul/ol,table,p等
    行内元素(inline)
    行内元素没有默认的宽度与高度,以行内元素的内容决定其大小,常见的行业元素有a,span,img,input,b,i等
    各种元素可以使用display样式修改其显示方法
    display:block/inline/none

    页面容器

    HTML语言提供了两种常用的容器元素
    div/DIV
     div也称为层,常用于将若干个组件组合在一起,DIV布局模式与早期的表格布局模式并称为两大布局模式
    span/SPAN
     span描述了一种没有任何样式、没有任何效果的行内组件,主要用于自定义样式组件的开发

     总结:

    在同一个HTML页面内使用多个CSS样式定义时,遵从就近原则,所谓就近原则是离被修饰的目标越近的定义将取代相对较远的定义

     

  • 相关阅读:
    合适的适配器的最佳模式
    poj3414--Pots(bfs,记录路径)
    HTML与XHTML差额
    获得球——采访拼图
    3-08. 栈模拟队列(25)(ZJU_PAT 模拟)
    学习内核驱动程序的错误及其解决方案的出现,
    Objective-C中的Block
    Objective-C语法之代码块(block)的使用
    ObjectiveC中的block用法解析
    使用Swift的代理,闭包来封装一个公用协议减少垃圾代码
  • 原文地址:https://www.cnblogs.com/sooper/p/3426000.html
Copyright © 2011-2022 走看看