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. 基础习题1——print

    引号内,空格就表示空格,引号外,逗号表示空格 print('100+200 =',100 + 200)===100+200 = 300 print('hello','world')===hello w ...

  2. Pycharm中文显示异常

    pycharm2019,中文显示乱码异常,配置了encoding为utf8还是不行,需要设置备用字体 原因是某些英文字体库不支持非英文字符,无法显示 设置fallback字体 File-setting ...

  3. chalk插件 使终端输出的字带颜色

    1.使终端输出红色字体: const chalk = require('chalk'); console.log(chalk.red('this is red!') 这时运行终端,打印的this is ...

  4. AJAX - 服务器 响应

    AJAX - 服务器 响应 服务器响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性.大理石构件来图加工 属性 描 ...

  5. java+web+大文件上传下载

    文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...

  6. 奇怪的 Markdown / LaTeX 笔记

    记一下日常见到的一些奇怪的 Markdown / LaTeX 用法... Markdown LaTeX LaTeX 数学 1. 运算符 1.1 造运算符: a \operatorname{sin} c ...

  7. Springboot 构建http服务，返回的http行是'HTTP/1.1 200' 无状态码描述 客户端解析错误

    ————————————————————————————————————————— *** 响应的数据格式  HTTP/1.1 200 OK  Server: Apache-Coyote/1.1  A ...

  8. D. Print a 1337-string...

    D. Print a 1337-string... 输出一个字符串 里面包含n个子序列 1337 #include<bits/stdc++.h> using namespace std; ...

  9. .Net MVC JsonResult在IE下返回值变成下载文件问题

    昨天,有用户反馈公司的系统,一提交表单就变成了下载文件.匆匆忙忙地发现是IE浏览器(360兼容模式,不就是IE内核吗),返回Json格式的字符串变成了下载JSON文件.(代码如下) return Js ...

  10. 【Python】Python读取文件报错：UnicodeDecodeError: 'gbk' codec can't decode byte 0x99 in position 20: illegal multibyte sequence

    环境描述 text.txt 今天的天气不错 是个皻的选择 读取文件的代码 #!/usr/bin/python #-*- coding:UTF-8 -*- f = open(r'D:\Python\Py ...