css

样式的设置主要有选择器+声明{}；声明里又分为属性和值；

注释代码：/*注释语句*/

内联式：写在元素开始的标签里；例：<p style = "color:red;font-size:12px"></p>;

嵌入式：写在<style type="text/css"></style>标签之间；一般写在<head></head>之间；例：

外部式：写在一个css文件中，通过<link>标签连接到html文件内；<link href="xxx.css" rel="stylesheet" type="text/css" />;这个链接一般写在<head>标签内；rel="stylesheet" type="text/css"这个是固定的格式；

优先级：内联>嵌入>外部(如果外部的链接早于嵌入的位置，那就会外部优先，即就近原则，且这里的顺序是在其相同的权值的情况下)

类选择器：已英文点开头，名字任意起，在元素标签中通过class="类名"进行调用；

ID选择器：和类选择器一样的原理，只不过将英文点换成#符号，调用的时候将属性class改成属性id；

类和ID选择器的区别：

1、在一个html中，id选择器只能调用一次，而类可以多次；

2、在一个元素中可以调用多个类选择器，用空格隔开，如<p class=类名1 类名2>；而一个元素内只能调用一个id选择器；

子选择器：用于选择指定标签元素的第一代子元素；如：.food>li{border:1px solid red;}；在元素标签里设置好class = “food”，在这个标签下的第一个子标签为<li>标签的内容样式会被修改定义；

后代选择器：.food li{border:1px solid red;};与子选择器不同的是大于号>改成了空格，且其范围不通，子选择器只包括第一代<li>标签，而后代选择器的包含所有的<li>标签；

通用选择器：*{xxx ；xxx；}；涉及的范围最大，任意的标签元素都会根据通用选择器的声明进行设置；

伪类选择符：可以给html还不存在的标签状态进行设置样式（如鼠标滑过标签时标签状态）；例：a:hover{color:red;}（使鼠标滑过标签时标签内容变红色）；其中：hover是可以放到任何标签中，但是由于兼容性比较不好，所以常用的还是a：hover组合；

分组选择器：通过逗号对两个标签隔开，后加生命，这样多个标签可以拥有同一个样式；例：h1,span{color:red;}；

权限：标签的权限值为1、类选择器为10、ID选择符为100；注意：继承也有权限值，只不过很小很小；

层叠覆盖：指如果权限相同，后面的样式会覆盖前面的样式；

最高权限：！important，写在分号前；例：p{color:red!important;}；

字体设置：font-family:"宋体"；所设置的必需是浏览器有安装的字体；

字号、颜色：font-size、color;

粗体：font-weight：bold；

斜体：font-style:italic;

下划线：text-decoration:underline;

删除线：text-decoration：line-through；

缩进：text-indent：2em；2em指的是文字的2倍大小；

行间距（行高）：line-height：2em

字间距:字母间距：letter-spacing:50px;单词间距：word-spacing:50px;

对齐：text-align：center/left/right；居中、向左或者向右对齐

居中：

行内居中：text-align：center

定宽块状元素：需先固定好width宽度，根据左右margin得值设为“auto”,使得其居中对齐；

不定宽块状元素：

1、加入table标签：利用table标签得长度自适应性，因此可以看做是一个定宽度块元素；再根据左右margin得值设为“auto”,使得其居中对齐；

2、通过改变块级元素得display为inline类型，然后通过text-align：center来进行居中；

3、通过给父元素设置float，然后给父元素设置 position:relative和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中：

1、如果是单行文本，且父元素的行高：leight已经是固定的，那么只要将其的行高line-height也设置一样的高度，即可实现垂直居中，缺点是：当文字内容的长度大于块的宽时，就有内容脱离了块；

2、如果是多行文本，css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用；td 标签默认情况下就默认设置了 vertical-align 为 middle，因此可以使用<tb>标签作为多行文本的父标签，这样多行文本就会实现垂直居中，如：

<body>

<table><tbody><tr><td>

<div>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

这样，只要在css代码中改变td盒范围就可以显示出效果了：td{position:absolute;    left:50%;    top:50%;}（文本内容将会处于浏览器中间）

3、可以通过display：table-cell改变元素属性为表格属性，这样该元素就拥有vertical-align为middle的属性；从而达到垂直居中的效果，缺点是兼容性较差，不兼容IE6、7；不建议使用；

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：

<img>、<input>

特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

切换：display：block（块级元素）/inline（内联元素）/inline-block（内联块状元素）

隐性改变display的类型：

设置以下 2 个句之一：

1.position:absolute;

2. float : left 或 float:right;

只要出现了以上两句之一，元素类型就会自动变为display:inline-block；

盒模型：边框

div{border：2px solid red；}分别对应：border-width(边框宽度)、border-style（边框类型）、border-color（边框颜色）；

border可根据可根据border-top、border-right、border-left、border-bottom四个不同的边进行不同的设置；

div{padding:20px 20px 20px 20px}：元素内容和边框之间的距离，称为“填充”，同样地，填充也分4个方向；

div{margin:20px 20px 20px 20px}：元素和其他元素之间的距离，称为“边界”，同样地，填充也分4个方向；

一个元素实际宽度（盒子的宽度）=左边界（margin-left）+左边框（border-left）+左填充（padding-left）+内容宽度（width）+右填充+右边框+右边界。

css布局模型：

在网页中，元素有三种布局模型：
1、流动模型（Flow）：块垂直、内联水平
2、浮动模型 (Float)：让块水平：float：left
3、层模型（Layer）

层模型有三种形式：

1、绝对定位(position: absolute)：相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

2、相对定位(position: relative):相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动(表示不在块范围内的内容不会改变)

3、固定定位(position: fixed)：相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

绝对和相对定位的组合使用；绝对定位可以作为相对定位的子元素，这样绝对定位采用的参照物就不是浏览器，而是相对定位的的这个父元素；

简写：

方向：4个相同可写1；上下相等左右对称可写上下和左右共为2；左右相等可写上右下为3；如不相等按顺时针写；

颜色：相等可对半；颜色值 是根据红、绿、蓝取0~255的整数比例调节而成,用16进制表示，如：p{color:#00ffff;}

字体：font:12px/1.5em "宋体",sans-serif;（常见，注：字号和行高要加入“/”斜杠）；

长度值：px、em、百分比：都是相对单位；px像素是指显示器上的一个小点；

java基础笔记（11）的更多相关文章

  1. Java基础笔记11

    异常: 即java程序在运行时出现的意外情况.  java如何处理异常. try{ //可能发生异常的地方 }catch(异常类型 对象){  //异常处理处 }catch(异常类型 对象){ }.. ...

  2. Java基础笔记 – Annotation注解的介绍和使用 自定义注解

    Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 |  被围观 25,969 views+ 1.Anno ...

  3. 【转】Java基础笔记 – 枚举类型的使用介绍和静态导入--不错

    原文网址:http://www.itzhai.com/java-based-notes-introduction-and-use-of-an-enumeration-type-static-impor ...

  4. JAVA自学笔记11

    JAVA自学笔记11 1:Eclipse的安装 2:用Eclipse写一个HelloWorld案例,最终在控制台输出你的名字 A:创建项目 B:在src目录下创建包.cn.itcast C:在cn.i ...

  5. Java基础语法(11)-面向对象之关键字

    title: Java基础语法(11)-面向对象之关键字 blog: CSDN data: Java学习路线及视频 1.this this是什么 它在方法内部使用,即这个方法所属对象的引用: clas ...

  6. 黑马程序员----java基础笔记中（毕向东）

    <p>------<a href="http://www.itheima.com" target="blank">Java培训.Andr ...

  7. 黑马程序员----java基础笔记上（毕向东）

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 笔记一共记录了毕向东的java基础的25天课程,分上.中.下 本片为上篇,涵盖前10天课程 1. ...

  8. Java基础笔记05-06-07-08

    五.今日内容介绍 1.方法基础知识 2.方法高级内容 3.方法案例 01方法的概述 * A: 为什么要有方法 * 提高代码的复用性 * B: 什么是方法 * 完成特定功能的代码块. 02方法的定义格式 ...

  9. Java基础笔记1

    java (开源,跨操作系统)j2ee jre java基础 javaoop java高级 JDK(JAVA developer Kitool): java开发工具 (开发人员使用) JRE(java ...

  10. 【Java基础】11、java方法中只有值传递，没有引用传递

    public class Example { String testString = new String("good"); char[] testCharArray = {'a' ...

随机推荐

  1. 【NOIP2014模拟8.17】Magical GCD

    题目 对于一个由正整数组成的序列, Magical GCD 是指一个区间的长度乘以该区间内所有数字的最大公约数.给你一个序列,求出这个序列最大的 Magical GCD. 分析 根据暴力的思想, \( ...

  2. Codeforces Gym 101505C : Cable Connection （计算几何）

    题目链接 题意:给出第一象限的N个点,存在一直线x/a+y/b=1(a>0,y>0)使得所有点都在这条直线下面,求 min{sqrt(a^2+b^2)} 显然,这样的直线必然经过这N个点中 ...

  3. Elastic-Job介绍

    1 什么是分布式任务调度 什么是分布式?当前软件的架构正在逐步转变为分布式架构,将单体结构分为若干服务,服务之间通过网络交互来完成用户的业务处理,如下图,电商系统为分布式架构,由订单服务.商品服务.用 ...

  4. [BZOJ2111]:[ZJOI2010]Perm 排列计数（组合数学）

    题目传送门 题目描述 称一个1,2,...,N的排列${P}_{1}$,${P}_{2}$,...,${P}_{N}$是Magic的,当且仅当2≤i≤N时,${P}_{i}$>${P}_{\fr ...

  5. js测试用

    一,大纲 二,目录二 三,目录三

  6. php curl http digest

    php用curl访问有http digest验证的网址时,不能直接加在URL上,例如: http://user:pass@xxx.xxx.xxx.xxx/index.php?a=1&b=2 这 ...

  7. Selenium IDE环境部署

    摘自https://blog.csdn.net/ywyxb/article/details/59103683 Selenium IDE环境部署 - Firefox浏览器 Firefox-ESR版本下载 ...

  8. 开发一个Flink应用

    步骤列表本次实战经历以下步骤: 创建应用:编码:构建:提交任务到Flink,验证功能: 环境信息Flink:1.7:Flink所在机器的操作系统:CentOS Linux release 7.5.18 ...

  9. 【工具安装】VMware 安装教程

    介绍:介绍一下 VMware 的安装. 0x01. 下载软件 打开官网 VMware Workstation Pro 点击立即下载即可.  也可以直接使用迅雷,添加下载任务,比浏览器下载速度快些,提 ...

  10. 中国MOOC_零基础学Java语言_第6周 使用对象_2GPS数据处理

    2 GPS数据处理(5分) 题目内容: NMEA-0183协议是为了在不同的GPS(全球定位系统)导航设备中建立统一的BTCM(海事无线电技术委员会)标准,由美国国家海洋电子协会(NMEA-The N ...