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. 初学JavaScript正则表达式(十三)

    字符串方法 search(reg) search()用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串 方法返回第一个匹配结果index,查找不到返回-1 search()不执行全局匹 ...

  2. 浅谈this指向问题

    链接地址:https://www.jianshu.com/p/34572435b5d0

  3. 元昊讲django框架

    一 什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有 ...

  4. A1101 Quick Sort (25 分)

    一.技术总结 这里的一个关键就是理解调换位置排序是时,如果是元主,那么它要确保的条件就只有两个一个是,自己的位置不变,还有就是前面的元素不能有比自己大的. 二.参考代码 #include<ios ...

  5. A1029 Median (25 分)

    一.技术总结 最开始的想法是直接用一个vector容器,装下所有的元素,然后再使用sort()函数排序一下,再取出中值,岂不完美可是失败了,不知道是容器问题还是什么问题,就是编译没有报错,最后总是感觉 ...

  6. PMP图表（必背）

  7. JAVA学习知识杂烩

    idea快捷键使用:https://blog.csdn.net/youanyyou/article/details/97072410 int值类型与引用类型比较的坑:https://www.cnblo ...

  8. mysql-新增数据库

    一.新增数据库 1.检查mysql 新增数据库之前,先检查是否安装了数据库,本次我们使用的是mysql数据库,检查是否安装mysql直接使用 mysql --version即可: 显示了mysql的版 ...

  9. 连接树莓派中的MySQL服务器

    今天用笔记本连接树莓派的 MySQL ,结果连接不上.就直接连接到树莓派上进行操作.其实以前也知道远程访问 MySQL 需要进行配置,可以直接 mysql.user 表,也可以直接使用授权的 SQL ...

  10. F#周报2019年第23期

    新闻 支持社区的WF与WCF开源项目 视频及幻灯片 F# MonoGame平台游戏系列:摄像头 Xamarin.Forms的F#与Fabulous ML.NET端到端之二:构建Web API 使用F# ...