Web信息安全实践_2.3css简介

CSS（Cascading Style Sheets，层级样式表）

  • 内容和格式分离

使用方式

  • 外部样式表 （保存在外部 .css ）
  • 内部样式表（位于 <head> 标签内部）
  • 内联样式（在 HTML 元素内部）

css语法

选择器、属性、值

p { font-family: times; }

选择器

  • 类选择器用于指定一组元素的样式
    • 类选择器使用 HTML类属性，并使用“.”定义
  • id 选择器用于为单个唯一元素指定样式
    • id 选择器使用 HTML元素的id属性，并使用“＃”定义
  • 简单的元素选择器
p { color: blue }
  • 派生选择器
#main img { border: solid black 5px; } //id为main中的img控制

css定位

  • CSS定位属性（ top 、 bottom 、 left 、right ）：定位元素
  • 有四种不同的定位方法
  • 静态定位
    • 默认情况下， HTML元素定位为静态，始终根据页面的正常流定位静态定位元素（按照内容顺序进行显示）
    • 静态定位元素不受 top 、left 、bottom 、right属性的影响
  • 相对定位
    • 相对定位的元素相对于其 正常位置定位
    • 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
<style type="text/css">
?
    #div-before, #div-after {
        background-color:#aee;
        color:#000;
        width:400px;
    }
?
    #div-1 {
        width:400px;
        background-color:#000;
        color:#fff;
        position: relative; //相对定位
        left: 120px; //
        top: 30px; //
    }
?
    #div-1-padding {
        padding:20px;
    }
?
</style>
?
<div>

    <div id="div-before">
        <p>id = div-before</p>
    </div>

    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>Lorem ipsum dolor sit amet .</p>
            </div>
        </div>
    </div>
?
     <div id="div-after">
        <p>id = div-after</p>
    </div>

</div>

  • 绝对定位
    • 绝对定位元素相对于第一个具有非静态定位的父元素定位。 如果找不到这样的元素，则相对的块是 <HTML>
    • 元素框从文档流完全删除。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样
  • <style type="text/css">
?
    #div-before, #div-after {
        background-color:#aee;
        color:#000;
        width:400px;
    }
?
    #div-1 {
        width:400px;
        background-color:#000;
        color:#fff;
        position: absolute; //
    }
?
    #div-1a {
        background-color:#d33;
        color:#fff;
        position: absolute;  //绝对定位
        right: 0px; //
        top: 0px; //
    }
?
    #div-1-padding {
        padding:20px;
    }
?
</style>
?
<div>

    <div id="div-before">
        <p>id = div-before</p>
    </div>

    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>Lorem ipsum dolor sit amet .</p>
            </div>
        </div>
    </div>
?
     <div id="div-after">
        <p>id = div-after</p>
    </div>

</div>
  • 绝对定位元素div-1a相对于第一个具有非静态定位的父元素div-1定位。
  • 元素框div1a从文档流完全删除，所以div1b上移。

div-after???
    • 固定定位
      • 具有固定位置的元素相对于浏览器窗口定位
      • 即使滚动窗口，它也不会移动

原文地址：https://www.cnblogs.com/tianjiazhen/p/12235537.html

时间： 2024-08-30 16:07:01

Web信息安全实践_2.3css简介的相关文章

Web信息安全实践_2.5 JS语法基础

JavaScript历史 HTML页面缺乏交互性 造成带宽.时间和服务器资源的浪费 前端加入基本的检查:登录名.密码是否为空,两次密码输入是否一致... JavaScript代码嵌入在HTML中 <script> ... </script> 浏览器加载页面时执行代码,代码的动态输出和HTML的静态内容进行集成 可以在用户输入提交给远程服务器之前进行验证 JavaScript语法 1.动态数据集成 document.write:向文档流写入HTML表达式或JavaScript代码 &

Web信息安全实践_2.1 HTML_2.2HTML重要元素

HTML(Hypertext Markup Language):指定网页静态内容的语言 Hypertext:文本.多媒体.链接... Markup:可以用来标识文档结构和内容类型的特殊符号,即标签 2.2HTML重要元素 标签 Anchors 使用标签 <a> 来设置,可以链接到网络上的任意文件 href 属性来描述链接的地址, name :锚名称 <a href="#001"> 点我跳转到页面底部 </a> <br> <a hre

Web信息安全实践_2.6 JavaScript DOM_2.7 JavaScript 攻击

DOM (Document Object Model,文档对象模型) HTML DOM 定义了访问和操作 HTML 文档的标准方法 DOM 以树结构表达 HTML 文档 通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素 通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量: JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS

Web信息安全实践_2.8 PHP

PHP(HyperText Preprocessor,超文本预处理器) PHP 功能 PHP 可以生成动态页面内容 PHP 可以创建.打开.读取.写入.关闭服务器的文件 PHP 可以收集表单数据 PHP 可以发送和接收cookies PHP 可以添加.删除.修改数据库中的数据 PHP 可以加密数据 PHP 与表单的交互 PHP 使用超全局变量 $_GET .$_POST 或者 $_REQUEST 用于收集表单数据 $_GET 和 $_POST 分别接受通过GET 和 POST 方法提交的数据 $

Web信息安全实践_3.4 CSRF防御

错误的CSRF防御方法 (1)只接受 POST 请求 攻击者不能基于链接简单地攻击( IMG ),但是可以使用脚本创建隐藏的 POST 请求 (2)转账需要多步 e.g. 第一个请求转多少个coin,第二个请求转给谁 CSRF 攻击可以按顺序执行每个步骤 (3)检查 Referer Referer Referer报文头是网页请求头的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器藉此可以获得一些信息用于处理. 用户正常转账:请求从

Web信息安全实践_3.2 Cookie

HTTP 持久性 (1)HTTP 是一个无状态的协议:服务器不记录请求之间的关系 e.g. 购物,提交购物车.付钱两次请求之间,http协议不记录这两个请求之间的关系 (2HTTP 如何实现会话的持久性的呢? Cookie HTTP Cookie Cookie 的用途 (1)Cookie 用户浏览器访问网站时,在用户本地存储信息 服务器设置cookie的值,本地保存 (2)Authentication cookie 存储关于用户登录状况的信息 使用 Authentication Cookie 可

Web信息安全实践_6 SQL注入

www.myzoo.com 输入示例 Login a'# 用户a登录 a' or 1# a' or 1=1# a' and 1;# d' or 1# a' or '1  思考:为什么无密码可以登录?为什么最终登录的都是a? b' or 0;#  用户b登录 profile a', Coins=100 where Username='a' ;# User c' union select 1,1,1,1,1,1,if(substring(database(),1,1)=char(119),bench

Web信息安全实践_1.3 HTTP

HHTP HTTPs:HTTP/ssl,安全的http Apache:HTTP服务器 SSL:安全的套接进程,应用层和tcp层中间,提供数据加密.身份认证 OpenSSL 浏览器/服务器交互 URL+HTML+HTTP→www URL(Uniform Resource Location,全局资源定位符) ∈ URI(Uniform Resource Identifiers) URL URL可定位到物理位置一台主机上一份文件的具体位置. e.g. HTTP请求 HTTP请求 方法:Get.Post

Web信息安全实践_1.7 OpenSSL

OpenSSL 用于实现SSL协议,能实现证书生成.证书签名.密钥生成.加解密等各种操作 命令行举例 openssl version openssl prime echo "encode me" |openssl | enc -base64 /*对字符串encode me进行base64编码*/ echo "ZW5jb2RIIG1lCg==" | openssl enc -base64 -d /*对经过base64进行编码的字符串进行解码*/ 自建HTTPS(使用O