zoukankan      html  css  js  c++  java
  • CSS学习

    1、CSS简介与作用

    CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,用来表现HTMLXML等文件样式。CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

    2、CSS使用方法

    有三种方法可以在站点网页上使用样式表

    外部样式:将网页链接到外部样式表。

    <head >
        <link rel="stylesheet" type="text/css" href="css文件所在地址" />

    </head>

    内页样式:在网页上创建嵌入的样式表。

    <head >
        <style type="text/css">
            h1 {
                font-family: SimSun;
                font-size: 12px;
                font-style: normal;
            }
        </style>

    </head>

    行内样式:应用内嵌样式到各个网页元素.

    <div style="font-family:SimSun;font-size:12px">

    使用了行内样式div

    </div>

    3、CSS语法

    CSS规则由两个主要部分构成:选择器+一条或多条声明

    selector

    {

    declaration1;

    declaration2;

    ……

    }

    每条声明由一个属性和一个值组成:{property:value};声明之间用分号“;”分割

    4、选择器介绍

    4.1 派生选择器:依据元素在其位置的上下文关系来定义样式

    比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

    li strong {
        font-style: italic;
        font-weight: normal;
      }
    <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
    
    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>
    4.2 id选择器:以 "#" 来定义,通过HTML元素的id属性进行关联
    #red {color:red;}
    #green {color:green;}
    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

    4.3 类选择器:类选择器以一个点号显示,通过HTML元素的class属性进行关联

    .center {text-align: center}
    <h1 class="center">
    This heading will be center-aligned
    </h1>
    注意:类名的第一个字符不能使用数字!

    4.4 属性选择器:为拥有指定属性的 HTML 元素设置样式

    注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

    为带有 title 属性的所有元素设置样式:

    [title]
    {
    color:red;
    }
    为 title="W3School" 的所有元素设置样式:
    [title=W3School]
    {
    border:5px solid blue;
    }
    4.5 标签选择器:直接使用HTML标签作为选择器
    p{border:5px solid blue; }
    更多详情,请参照:http://www.w3school.com.cn/css/css_pseudo_elements.asp
     
    只是为了传播知识,侵犯到您的权益,请与1366678737@qq.com联系
  • 相关阅读:
    《网络攻防与实践》第九周学习
    《网络攻防技术与实践》第八周作业
    《网络攻击技术与实践》第七周作业
    《网络攻防技术与实践》第六周学习
    《网络攻防技术与实践》第五周作业
    《网络攻防技术与实践》第四周学习
    《网络攻防技术与实践》第三周学习总结
    《网络攻防技术与实践》第二周学习总结
    20169214 2016-2017-2 《网络攻防实践》第十一周实验 SQL注入
    20169214 2016-2017-2 《移动平台开发实践》Android程序设计 实验报告
  • 原文地址:https://www.cnblogs.com/Jxwz/p/3781537.html
Copyright © 2011-2022 走看看