• CSS总结


    1:概述

    •层叠样式表

    •标记语言 

    •命名规范:一般命名为style.csscss.css

     

    2:语法

    2.1基础

    选择器 +声明(属性:值)

    CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

    例:p {color:red;text-align:center;}

     

    2.2选择器

    2.2.1类型选择符

    类型选择符就是以DOM作为选择符,即选择某个HTML标签为对象。

    格式:

    E

    {

    /*CSS代码*/

    }

    例:

    div{                 

    border:3px double#f00;  /*边框为3px红色双线*/

    680px;
    }

     

    2.2.2class选择符

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用

    CSS 中,类选择器以一个点"."号显示

    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

    <h3 class=”center”>这个标题居中</h3>

    <h2 class=”center”>这个标题也居中</h3>

     

    .center {

    text-align:center;

    }

     

    2.2.3id选择符

    id 选择器可以为标有特定 id HTML 元素指定特定的样式。

    CSS id 选择器以 "#" 来定义

    例:

    <h2 id=”para1”>这个标题居中变红</h2>

     

    #para1

    {

     text-align:center;

     color:red;

    }    

    2.2.4span选择符

    span没有结构的意义,纯粹是应用样式

    <span id=”xx”> xxx</span> <span class=”xx”>xxx</span>

    2.2.5div选择符

    div是一个块级标签,可以包含段落、标题、表格等。

    格式同上。

    2.2.6通配符选择符

    通配符是一种特殊的选择符,用于定义页面所有元素的样式。

    格式:*{CSS代码}

    例:

    {   /*将页面中所有元素的外边距和内边距设置为0*/

    margin:0px;

    Padding:0px;

    }

    2.2.7

    此外还有包含选择符、属性选择符、伪类选择符等之后再说。

    3:插入样式表的方式

    3.1 外部样式表:

    在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

    <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

    文件不能包含任何的 html 标签。

     

    3.2 内部样式表:

     使用<style> 标签在文档头部定义内部样式表

    <head>

    <style>

     hr {color:sienna;}

    p {margin-left:20px;}

    body {background-image:url("images/back40.gif");}

    </style>

     </head>

     

    3.3 内联样式(慎用)

    在相关的标签内使用样式(style)属性:

    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

     

    多重样式优先级:内联>内部>外部

    4:div+css

    待补充

  • 相关阅读:
    android学习---Gallery画廊视图
    王立平--查看SQLite中的数据信息
    java中CyclicBarrier简单入门使用
    [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
    使用target打开的iframe 获取src的问题
    读《暗时间》的思考
    hdfs
    编译最新的SQLite 3.8.4.3为一个DLL
    使用Highcharts生成折线图_at last
    CentOS7 安装EFK(elasticsearch、fluent、kibana)进行Docker下日志搜集
  • 原文地址:https://www.cnblogs.com/rulasann/p/9229502.html
Copyright © 2020-2023  润新知