zoukankan      html  css  js  c++  java
  • 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

    待补充

  • 相关阅读:
    覆盖索引和联合索引
    docker是个啥?
    golang--解决邮件发送标题乱码问题
    爬虫-爬取美少女壁纸
    漫谈--ssh协议-中间人攻击
    golang--常用的字符串操作
    干支纪年
    JS实现纯前端将数据导出Excel两种方式亲测有效
    猴子吃香蕉-Java岗位面试题
    content:"26A1"特殊字符和图标记录
  • 原文地址:https://www.cnblogs.com/rulasann/p/9229502.html
Copyright © 2011-2022 走看看