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. ACM-冒泡排序

    将多组输入数据进行冒泡排序,并去除相同的数据 #include <iostream> #include <vector> using namespace std; void R ...

  2. TeamyinyinFish-> 测试报告

    测试人员 1. 姓名:鱼嘤嘤 2. 年龄: 21 3. 职业: 大三学生 4. 感情状况: 单身 用户故事 软件工程课上,老师想要他们组实现一个小组项目,鱼嘤嘤原本想摸鱼,但是转念一想觉得 还是需要好 ...

  3. C++中的C

    前言 因为C++是以C为基础的,所以要用C++编程就必须熟悉C的语法. C语言的学习可以学习K & R C的<C程序设计语言> 创建函数 Q: 函数原型? A: 标准C/C++有一 ...

  4. 第十周计划周二&周三计划

    今天又一次被导师训了,怎么也达不到他的要求,好像我俩不在一条线上.所以现在重新整理一遍思路,继续走. 我认为重点还是主题追踪这一块,但是主题追踪的结果以及显示是个问题,目前还是打算做出来当天最热的前几 ...

  5. Linux学习笔记-第12天 实用的一章

    关键词nmtui.nm-connection-editor./etc/sysconfig/network-scripts.iptables.firewalld.firewall-cmd.firewal ...

  6. 【BZOJ4816】[SDOI2017] 数字表格（莫比乌斯反演）

    点此看题面 大致题意: 求\(\prod_{i=1}^n\prod_{j=1}^mf(gcd(i,j))\). 推式子 首先,按照套路我们枚举\(gcd\),得到: \[\prod_{d=1}^{mi ...

  7. PMP图表（必背）

  8. 用 Raspberry Pi 架设加密 DNS 客户端

    Cloudflare 宣布使用 1.1.1.1 作为 DNS,并且强调隐私保护.由于 Cloudflare DNS 支持 DNS-over-TLS 和 DNS-over-HTTPS,这使得加密 DNS ...

  9. python运维开发常用模块(6)发送电子邮件模块smtplib

    1.模块常用方法 SMTP类定义:smtplib.SMTP([host[,port[,local_hostname[, timeout]]]]),作为SMTP的构造函数,功能是与smtp服务器建立连接 ...

  10. ubuntu python 版本管理

    ubuntu 命令行查看 python 目录 $ whereis python # 显示所有得到 python 目录 $ which python  # 显示默认的 python 解释器目录 $ wh ...