2018年2月

第一步：点击run；选择Edit Configurations
20180210134419.png
第二步：点击+;找到Tomcat Server；如果是本地的Tomcat就选择Local
20180210134518.png
第三步：1.填入TomCat的名字；2.选择TomCat的安装位置；3.选择默认浏览器
20180210141331.png
第四步：选择Deployment，然后点击Fix
20180210141424.png
第五步：点击右边的铅笔
20180210141442.png
第六步：点击文件夹，输入文件夹的名称
20180210141522.png
20180210141544.png
第七部：点击OK，点击Apply即可。

背景

背景颜色

属性：background-color
值：参考颜色的表示方式

背景图片

属性：background-image
值：url();url里跟的是图片的地址。

背景平铺

属性：background-repeat
值：repeat(默认)表示平铺这个标签；no-repea表示不平铺；repeat-x表示沿x轴平铺；repeat-y表示沿y轴平铺。

背景定位

属性：background-position
值：left表示水平方向的左；right表示水平方向的右；center表示中间；top表示垂直方向的上；bottom表示垂直方向的下。
注意：

  • 当方位属性的值只写一个的时候，另外一个值默认居中。
  • 如果写2个方位值，顺序没有要求。

  • 如果写的是2个具体值的时候，第一个值代表距离左侧的距离，第二个值代表距离顶部的距离。

    固定背景

    属性：background-attachment
    值：

  • scroll表示背景在页面的位置不固定，在页面的位置随内容改变而改变。
  • fixed表示背景在页面的位置固定，在页面的位置不会随内容改变而改变。相当于在浏览器页面内进行了定位。

附录：背景属性的连写
background:background-color background-image background-repeat background-position background-attachment;
注意：

  • background后面只写属性的值；

  • background-image的url是必写项，顺序无要求。

    行高

    行高：是基线与基线之间的距离
    行高=文字高度+上下边距
    注意：一行文字行高和父元素高度一致的时候，垂直居中显示。
    行高的计算
    单位除了像素以为，行高都是与文字大小乘积。
    在继承的时候，不带单位时，行高等于行高乘以子元素文字大小，em和%的行高等于和行高乘以父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
    推荐行高使用像素为单位。行高也可以撑开盒子。不设置行高，默认是盒子的高度
    行内元素父元素给了行高之后，子盒子不能使用font，要单独设置字体样式，行内元素尽量不适用font。

超链接标签的CSS伪类

  • a:link{属性:值;} 链接默认状态，也可以表示为a{属性:值}。
  • a:hover{属性:值;} 鼠标放到链接上显示的状态。
  • a:active{属性:值;}链接激活（鼠标点击时）的状态。
  • a:visited{属性:值;}链接访问之后的状态。

  • :focus{属性:值;}获取焦点
    注意：四种状态都写的时候，必须按顺序写，否则会出现错误。

    附录一：去除链接下划线

    属性：text-decoration
    值： none有下划线（默认）； underline无下划线；line-through无下划线，有删除线

    附录二：鼠标放在链接时的鼠标的形状

    属性：cursor
    值：

  • url：需使用的自定义光标的 URL。注意：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
  • default：默认光标（通常是一个箭头）。
  • auto：浏览器设置的光标（一般标签默认）。
  • crosshair：光标呈现为十字线。
  • pointer：光标呈现为指示链接的指针（一只手）。
  • move：此光标指示某对象可被移动。
  • e-resize：此光标指示矩形框的边缘可被向右（东）移动。
  • ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）。
  • nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）。
  • n-resize：此光标指示矩形框的边缘可被向上（北）移动。
  • se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）。
  • sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
  • s-resize：此光标指示矩形框的边缘可被向下移动（南）。
  • w-resize：此光标指示矩形框的边缘可被向左移动（西）。
  • text：此光标指示文本。
  • wait：此光标指示程序正忙（通常是一只表或沙漏）。
  • help：此光标指示可用的帮助（通常是一个问号或一个气球）。

继承性

前提：继承性发生的前提是包含（嵌套关系）
作用：子元素可以继承父元素的样式
注意：

  • 文字的所有属性都可以继承。
  • 标题（h1~h6）不能继承文字的大小

  • 超链接（a）标签不能继承文字颜色

    层叠性

    注意：当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行样式表后边的代码(浏览器的执行顺序是从上向下的，所以和标签调用选择器的顺序没有关系）。

    优先级

    !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承>默认样式
    权重参考表（只作为参考，无实际意义）

    内联样式ID类，伪类和属性选择器类型选择器和伪元素选择器通配符、子选择器、相邻选择器
    10001001010

    注意：

  • !important1000以上
  • 继承的权重为0
  • 权重会叠加

块状元素

特点：

  • 独占一行；
  • 元素的高度、宽度、行高以及顶和底边距都可设置；

  • 元素宽度在默认不设置的情况下，宽度和他的父级元素相同。
    典型代表：div、p、h1、form、ul、li

    内联元素（行内元素）

    特点：

  • 在一行显示；
  • 元素的高度、宽度及顶部和底部边距不可设置；

  • 元素的宽度是他包含内容的宽度，不可改变。
    典型代表：span、a、label、 strong、em

    内联块状元素（行内块元素）

    特点：

  • 在一行显示；

  • 元素的高度、宽度、行高以及顶和底边距都可设置。
    典型代表：img、input

    附录：转换

  • 块状元素转行内元素：display:inline;
  • 行内元素转块状元素：display:block;
  • 块状元素和行内元素转行内块元素：display:inline-block;

内嵌式

特点：样式只作用于当前网页文件，没有真正实现结构表现分离

<style type="text/css">
    样式表位置
</style>

外链式

特点：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。（建议使用）

<link rel="stylesheet" type="text/css" href="1.css">

行内式

特点：作用范围仅限于当前标签，范围小，结构表现混在一起。（不建议使用）

<p style="width:12px;height: 30px">你好</p>

属性

  • font-size 文字大小。
  • Font-weight文字粗细，值从100-900，也可以使用：normal（400）默认值；定义标准的字符。bold（700）定义粗体字符。bolder定义更粗的字符；lighter定义更细的字符。（建议使用数字）
  • Font-family 文本的字体。值得形式：中文名称；英文名称；unicode 编码。
  • Font-style 值：normal 默认值；italic斜体。
  • line-height 行高。

注意：谷歌不支持12px以下字体。

附录一：文本属性连写

font: font-style font-weight  font-size/line-height  font-family;

注意：font:后边写的是属性的值一定按照书写顺序；文本属性连写文字大小和字体为必写项。

附录二：查看字体的unicode 编码

第一步：打开浏览器的调试模式
快捷键：F12
也可以点击鼠标右键，选择审查元素（不同的浏览器可能不同）
第二步：选择console
20180208171610.png
第三步：输入escape("字体名称")
20180208171929.png
注意：一定是在英文状态下
第四步：把%u换成/

颜色的名称

示例：p{color:gray;}

RGB颜色

  • 使用百分比 p{color:rgb(100%,100%,100%);} 注：可以有小数
  • 十六进制颜色p{color:#cc00cc;} 注：范围（0~f）
  • 数字颜色1p{color:rgb(255,125,246);} 注：范围（0~255），不可以有小数
  • 数字颜色2p{color:rgba(255,125,246,0.5);} 注：范围（0~255），不可以有小数,a代表alpha 不透明度(值 0-1,1代表不透明)

注意：opacity可以使盒子变透明。优点方便，里面的内容也会半透明。

基础选择器

标签选择器

格式：标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
示例：

p{
  font-size:20px;
  color:#AA0044;
}

类选择器

格式：.自定义类名{属性:值;}
特点：只对调用他的标签生效，定义格式是class="类名",一个标签可以调用多个类选择器(class="类名1 类名2"), 多个标签可以调用同一个类选择器。
示例:

.box{
  font-size:20px;
  color:#AA0044;
}

ID选择器

格式：#自定义名称{属性:值;}
特点： 一个ID选择器在一个页面只能调用一次（如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题）；一个标签只能调用一个ID选择器，但是一个标签可以同时调用类选择器和ID选择器。
示例:

#box{
  font-size:20px;
  color:#AA0044;
}

通配符选择器

格式：*{属性:值;}
特点：给所有的标签都使用相同的样式。
示例:

*{
  font-size:20px;
  color:#AA0044;
}

注：不推荐使用。

复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

格式：标签+类(ID)选择器{属性：值;}
特点：即要满足使用了某个标签，还要满足使用了类（或Id）选择器。
示例：

div#box{
  font-size:20px;
  color:#AA0044;
}

后代选择器

格式：选择器+空格+选择器{属性：值;}
特点：后代选择器首选要满足包含（嵌套）关系；父集元素在前边，子集元素在后边；可以无限制隔代，并且只要能代表标签，标签、类选择器、ID选择器自由组合。
示例：

.one #box{
  font-size:20px;
  color:#AA0044;
}

子代选择器

格式：选择器>选择器{属性:值;}
特点：选中直接下一代元素,不能隔代。
示例：

.one>#box{
  font-size:20px;
  color:#AA0044;
}

并集选择器

格式：选择器+，+选择器+，选择器{属性:值;}
特点：多个相同的类或Id具有形同的属性或部分相同的属性。

.one,#box{
  font-size:20px;
  color:#AA0044;
}

属性选择器

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

a[href] {
  color:red;
}

注意：选择器尽量不要超过3级。

附录：命名规则

  • 不能用纯数字或者数字开头来定义类名。
  • 不能使用特殊符号(_ 除外)来定义类名。
  • 不推荐使用汉字来定义类名。
  • 不推荐使用标签名、属性、属性值来定义类名。
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5