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显式类型转换与隐式类型转换

    隐式类型转换 四则运算 判断语句 toString 在 JavaScript 中声明变量不需指定类型,对变量赋值也没有类型检查,同时还允许隐式类型转换. 这些特征说明 JavaScript 属于弱类型 ...

  2. python 2.7 操作mysql数据库 实例

    create table msg(id int primary key auto_increment,title varchar(20),name varchar(60),content varcha ...

  3. 展示出版社：写上URL地址对应函数、函数当中查询出所有的出版社、对象交给模板、循环对象拿出每条数据展示

    URL: from django.conf.urls import urlfrom django.contrib import adminfrom app01 import views urlpatt ...

  4. [CEOI2019]Cubeword（暴力）

    没错,标签就是暴力. 首先发现棱上的所有词长度都相等,枚举长度 \(len\). 然后发现这些词中只有第一个字符和最后一个字符比较重要(只有这两个位置会与别的串衔接,中间的是啥无所谓). 令 \(cn ...

  5. docker 部署 HFish（集群部署）

    主节点部署: docker run -d --name hfish-master -p : -p : -p : -p : -p : -p : -p : -p : -p : -p : -p : -p : ...

  6. vue与Element实际应用参考

    https://www.cnblogs.com/dmcl/p/6722315.html https://www.cnblogs.com/hbb0b0/p/8399996.html https://ww ...

  7. FFmpeg 常用API

    一.通用API 1.1 av_register_all() 初始化 libavformat 和注册所有的复用器.解复用器和协议处理器.如果不调用这个函数,可以调用下面的三个函数来选择支持的格式. 注册 ...

  8. JDBC的安装与使用

    JDBC的安装 首先在登录MySQL的官网下载JDBC-MySQL数据库驱动,或者去www.mysql.com/products/connector直接下载. 因为jdbc包属于第三方包,因此要自己导 ...

  9. RocketMQ多master迁移至多master多slave模式

    一.项目背景 由于当前生产环境RocketMQ机器使用年限较长,已经过保,并且其中一台曾经发生过异常宕机事件.并且早期网络规划较乱,生产.开发.测试等网络没有分开,公司决定对当前网络进行规划,区分各个 ...

  10. 使用python对美团的评论进行贝叶斯模型分类

    环境配置需要安装的包pip install pandas pip install jieba pip install sklearn 一.数据获取利用python抓取美团的数据集,获取非空的数据,抓取 ...