1.CSS样式优先级

优先级：由上到下，由外到内。优先级越来越高

2.css选择器

html标签选择器

class选择器（.)

id选择器（#）

3.优先级

style属性>id选择器>class选择器>标签名

4.css扩展选择器

关联选择器：标签嵌套的

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div p {

        background-color: green;

    }

  </style>

 </head>

 <body>

<div><p>CSS的扩展选择器</p></div>

<p>WWWWWWWWWWWWWWWWWWWWWW</p>

 </body>

</html>

组合选择器：多个不同选择器进行相同样式设置

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div,p {

        background-color: orange;

    }

  </style>

 </head>

 <body>

    <div>QQQQQQQQQQQQQQQQQ</div>

    <p>AAAAAAAAAAAAAAAAAAAAAAA</p>

 </body>

</html>

伪元素选择器：预先定义好一些选择器，或者当前元素处于的状态

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    /*原始状态*/

    a:link {

        background-color: red;

    }

    /*悬停状态*/

    a:hover {

        background-color: green;

    }

    /*点击状态*/

    a:active {

        background-color: blue;

    }

    /*点击之后的状态*/

    a:visited {

        background-color: gray;

    }

  </style>

 </head>

 <body>

<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>

 </body>

</html>

5.css盒子模型：在进行布局前把数据封装到一块一块的区域内。

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div {

        width: 200px;

        height: 100px;

        border: 2px solid blue;

    }

    #div22 {

        padding: 20px;

    }

    #div23 {

        padding-left: 30px;

    }

  </style>

 </head>

 <body>

<div id="div21">AAAAAAAAAAAAAAA</div>

<div id="div22">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>

<div id="div23">CCCCCCCCCCCCCCC</div>

 </body>

</html>

6.css布局漂浮属性

float:none

默认值，对象不漂浮

left/right:文本流对象的左边/右边

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div {

        width: 200px;

        height:150px;

        border: 2px solid blue;

    }

    #div41 {

        float : left;

    }

    #div42 {

        float:left;

    }

  </style>

 </head>

 <body>

<div id="div41">AAAAAAAAAAAAAAA</div>

<div id="div42">BBBBBBBBBBBBBBB</div>

<div id="div43">CCCCCCCCCCCCCCC</div>

 </body>

</html>

7.css布局定位属性

position：

static:默认值，无特殊定位；

absolute：绝对定位，将对象从文档流中拖出其他对象覆盖原来的位置，使用left,right,top,bottom定位；

relative：对象不可层叠；

所谓的层叠是每个div盒子可以覆盖之前的位置，如果relative不可层叠说的就是不能覆盖之前的位置，但是之前的位置可以通过css代码改变的；

8.图文混排

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

        #imgtex11 {

            width: 400px;

            height: 300px;

            border:2px dashed orange;

        }

        #img11 {

            /*float:left;*/

            float:right;

        }

        #tex11 {

            color: green;

        }

  </style>

 </head>

 <body>

<div id="imgtex11">

    <div id="img11"><img src="aa.jpg" width="250" height="200"/></div>

    <div id="tex11">奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于</div>

</div>

 </body>

</html>

9.图像签名

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    #tex21 {

        position: absolute;

        top: 50px;

        left: 30px;

        color: red;

    }

  </style>

 </head>

 <body>

    <div id="img21"><img src="aa.jpg" width="450" height="350"/></div>

    <div id="tex21">这是很多美女</div>

 </body>

</html>

JAVAWEB复习笔记-day02的更多相关文章

  1. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  2. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

  3. Java基础复习笔记系列 七 IO操作

    Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...

  4. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  5. Java基础复习笔记系列 四 数组

    Java基础复习笔记系列之 数组 1.数组初步介绍? Java中的数组是引用类型,不可以直接分配在栈上.不同于C(在Java中,除了基础数据类型外,所有的类型都是引用类型.) Java中的数组在申明时 ...

  6. 李兴华JavaWeb开发笔记

    李兴华JavaWeb开发笔记 1.Java语法-基础 环境变量-JAVA_HOME, PATH, ClassPath 变量名 作用 举例 JAVA_HOME 指向JDK目录 C:\Program Fi ...

  7. JavaWeb学习笔记总结 目录篇

    JavaWeb学习笔记一: XML解析 JavaWeb学习笔记二 Http协议和Tomcat服务器 JavaWeb学习笔记三 Servlet JavaWeb学习笔记四 request&resp ...

  8. Java基础复习笔记基本排序算法

    Java基础复习笔记基本排序算法 1. 排序 排序是一个历来都是很多算法家热衷的领域,到现在还有很多数学家兼计算机专家还在研究.而排序是计算机程序开发中常用的一种操作.为何需要排序呢.我们在所有的系统 ...

  9. Angular复习笔记7-路由（下）

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

随机推荐

  1. 7.2 Spark Streaming

    一.Spark Streaming设计 Spark Streaming可整合多种输入数据源,如Kafka.Flume.HDFS,甚至是普通的TCP套接字.经处理后的数据可存储至文件系统.数据库,或显示 ...

  2. 源码编译Kubeadm二进制文件

    kubeadm是Kubernetes官方提供的用于快速安装Kubernetes集群的工具,伴随Kubernetes每个版本的发布都会同步更新,kubeadm会对集群配置方面的一些实践做调整,通过实验k ...

  3. docker使用，包括有nvidia-docker

    docker run 命令:https://www.runoob.com/docker/docker-run-command.html docker run -it ubuntu:15.10 /bin ...

  4. selenium中driver.close()和driver.quit()的不同点

    driver.quit()与driver.close()的不同:driver.quit(): Quit this driver, closing every associated windows;dr ...

  5. NOIP模拟赛2(two)

    题目描述 Description 很久很久很久以前,方方方造了一台计算机,计算机中开始有一个数 \(0\) .方方方想要让这个数变成 \(a\) ,他打算每次选择一个整数,把计算机中当前的数按位或上这 ...

  6. Linux学习笔记-第13天 最近有点跟不上节奏阿

    难度上来了.最近工作也忙起来了..有点跟不上节奏.加油吧

  7. Linux学习笔记-第10天 特殊的交换分区

    关键词,分区.mkswap swapon .uquota,RAID,/etc/fstab 此章开始,难度有些提升.不过还好自己有点基础.

  8. goroutine使用

    Goroutine是建立在线程之上的轻量级的抽象.它允许我们以非常低的代价在同一个地址空间中并行地执行多个函数或者方法.相比于线程,它的创建和销毁的代价要小很多,并且它的调度是独立于线程的.在gola ...

  9. stm32配置led

    前言:我们学习一门新语言的时候都是先从hello world入门,stm32也有自己的入门方式,那就是流水灯的配置. 在配置之前我们需要先配置好编译环境,我们需要手动修改头文件中的一些内容. 1.首先 ...

  10. Python连载22-调试&单元测试

    一.调试技术 (1)调试流程​:单元测试->集成测试->交测试部 (2)分类:i.静态调试(说白了就是看代码,看看有没有错):ii.动态测试 1.pdb调试 ​相关连接:https://b ...