CSS入门

表单控件

在HTML中使用form来创建一个表单，表单中包含各式各样的输入控件、选框以及按钮。最终表单要提交到服务器，这就需要在form标签上面设置method='post'和action='index.php'。表单中 可以使用fieldset来区分不同的类型的输入信息，使用<legend></legend>。

<form method="post" action="index.php">
    <fieldset>
        <legend>
            基本信息
        </legend>
        <!--一些输入控件--->
    </fieldset>
    <fieldset>
        <legend>
            详细信息
        </legend>
        <!--一些输入控件--->
    </fieldset>
</form>

输入控件主要是input标签，不同类型的输入控件，它的type属性值不一样：

• type='text' 普通文本框 可以输入一行信息 一般是短内容的输入，它支持的属性：

  • size：文本框的长度

  • maxlength：可输入的最大字元

  • value：初始化的默认值

  • placeholder：初始化的提示信息 它以灰色且不阻塞输入的方式呈现

  • readonly：只读属性，该输入框 不支持修改 该控件可以提交到服务器

  • disbabled ：禁用的控件是指服务端无法接收该文本框的值，一般用户展示信息

  文本框还可以配合datalist标签一起使用，datalist用来输入提示信息，每个提示项放在<option>标签中，然后在文本框里面使用list属性关联该datalist列表：

  <input type='text' name='username' list='rel'>
  <datalist id='rel'>
      <option value="Wang" />
      <option value="Hey Gor" />
      <option value='lautin' />
  </datalist>

  <!-- more -->

• type='password' 密码框，输入内容不可见，它的属性同文本框相似

• type='number' 数值输入框，指定输入数值以及控制它的范围，属性如下：

  • min：可输入的最小值

  • max：可输入的最大值

  • value：初始化的值

 

• type='date' 它可以生成一个日历控制面板 供用户选择一个日期 避免输入格式的混乱

  • value：默认的日期时间 该日期的格式必须是2019-08-12

  • 实际上 除了date日期外，还支持time、datetime、week、month类型的日历。目前FF不完全支持，谷歌都支持

• type='color' 它可以一个颜色面板 供用户选择

• type='url' 支持输入一个url地址，在提交时 会验证格式中是否包含http(s)://协议

• type='email' 支持输入一个邮箱地址，同样在提交时 会自动严格它的格式 至少写成a@b

表单中的按钮选框也是使用input，它有几种类型：

• type='radio' 单选框 同一个选项它的name值必须一致，否则无法实现单选

  • checked属性 设置默认选中项

• type='checkbox' 多选框，支持同时选择多个值 它的name值必须使用数组形式，否则服务端只能接收到选中的第一个值。同样的使用checked来默认选中项

• select定义下拉框：

表单中 必须的控件还有按钮，按钮也分为几种：

• type="button" 普通按钮 它没有默认行为 需要配合javascript来实现交互

• type="reset" 重置按钮 清空表单内容 重新输入

• type="submit" 提交按钮 触发表单的提交行为

特别强调

所有的表单控件（输入控件、选框等）都必须声明它的name属性，用于服务端接收数据

 

 

CSS入门

基本语法

<style>
    选择器 {
        /*声明列表*/
        属性1:值1;
        属性2:值2；
    }
</style>

引入方式

在HTML中嵌入css样式 有三种方式：

• 内联样式： 在HTML中 使用style标签嵌入的样式

• 外联样式：当样式较多的时候 创建单独的css文件来定义样式，接下来在HTML头中使用link引入该文件

• 行内样式：在标签中通过style属性给该元素定义样式

当对同一元素 使用了不同的方式定义了同一个属性，会存在优先级，采用就近原则。

 

基本选择器

• 标签/元素名选择器：直接通过标签名来选择相应的元素

• class类选择器：通过给标签添加类名 然后在css中使用.类名来选中元素。class可以同时标记多个元素

• ID选择器：给标签设定ID名称，然后在css中使用#ID来选中该元素，ID名不能重复

 

常用的属性

• 文本相关的属性设置：

  • color :

  • font : 缩写形式，它包含 font-weight,font-style|font-size,font-family

  • text-align :

  • text-decoration ：

• border ：缩写形式，它包含：border-width,border-style,border-color

• background ：缩写形式，它包含：background-color,background-image,background-repeat,background-position

• width和height：它只对块级（整行）元素有效，行内元素无意义

 

选择器详解

关系选择器

关系选择器是通过元素之间的关联关系来查找元素，例如：父子关系、兄弟关系、邻里关系

• 后代选择器：S1 S2，匹配S1内部的所有后代S2，不限于某一级

• 子选择器：S1>S2，匹配S1中的下一级S2，也就是“子级”元素。

• 相邻选择器：S1+S2，匹配S1后面紧挨着的同级（兄弟）元素S2

• 兄弟选择器：S1~S2 ，匹配S1后面的所有同级（兄弟）元素S2

在书写时 关系符号和元素之间 可以有空白符，但不建议加，可以使用格式化去除。

 

 

属性选择器

根据HTML标签的属性特征来选择元素，它有几种匹配的方式：

• [attr]：[]表示匹配具有attr属性的元素 ，不要求值

• [attr="aa"] 表示具有attr属性且为定值==aa==的元素

• [attr*="aa"] 表示具有attr属性，值==包含==aa关键字即可

• [attr~="aa"] 表示具有attr属性，值中包含aa==单词==，aa必须作为一个单词出现

• [attr^="aa"]表示具有attr属性，值以aa==开头==即可

• [attr$="aa"]表示具有attr属性，值以aa==结尾==即可

 

 

伪类选择器

伪类选择器是通过单冒号（：）和特定的具有某种含义的单词来确定所选元素。

所谓伪类选择器，是相对于“类选择器”来说的，对比如下：

• 类选择器：

  说明：类的名称是由我们程序员来设定的，符合命名规范就行。

  形式：.类名称{ ... }

• 伪类选择器：

  说明：伪类的名称是CSS标准中所预先设定的，我们不能自己设定。可用的伪类名不多。

  形式：:伪类名称{ ... }

 

a链接伪类

这4个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。

它们可以设定一个链接在不同状态下的外观表现（样式表现）。

:link ——表示一个链接初始时候的状态。

:visited ——表示一个链接在访问（点击）过之后的状态。

:hover ——表示一个链接在鼠标移上去（鼠标悬停）的时候的状态。

:active ——表示一个链接在活动状态的时候的状态，通常就是点击的瞬间（按住不放能看到）。

==注意==：

1. 这几个伪类选择器主要用于a标签，形式类似这样： a:link{ ... }, a:visited{ ... }等。

2. :hover也经常用于其它标签，表示鼠标放上去的时候的样式表现。

3. 对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果（lvha，Lv哈）

 

E:focus

表示一个元素在成为可输入状态（获得焦点）的时候，主要用于表单元素。

其中“E”表示某个元素（或某个选择器所选中的元素）。

前缀元素E是表示该元素在获得焦点的时候，其样式表现如何。

也可以不用前面写“E”，而是直接用“:focus”，但实际应用中，一般会在前面有这个限定。

比如：

input:focus{ .... } /表示input元素在获得焦点的时候/

也可以不用input，如下所示：

:focus{ .... }

但此时其实所选择的范围扩大了（不仅仅针对input元素）。

 

子元素伪类

这几个伪类用于表示（或选中）“具有某种特征的子元素E”，它有如下几种形式：

• E:first-child ——匹配作为父元素的第一个子元素E。

• E:last-child ——匹配作为父元素的最后一个子元素E。

• E:only-child ——匹配作为父元素的唯一一个子元素E。

• E:nth-child(n) ——匹配作为父元素的第n个子元素E。括号中的n是一个具体数字

• E:nth-last-child(n) --匹配作为父元素的倒数第n个子元素E，n的值从1开始

li:first-child{ ... }   /*表示作为第一个子元素的li标签*/
td:last-child{ ... }    /*表示作为最后一个子元素的td标签*/
p:only-child{ ... }     /*表示作为父元素中只有一个子元素且为p标签*/
li:nth-child(2){ ... }  /*表示作为第2个子元素的li标签*/

子元素选择器中 一些特殊的用法：

• :nth-child(2n+1)在表达式2n+1中，n的值从0开始，代表0,1,2,3,,,,n这样的值。它表示每2个中的第1个元素，也就是所有子元素中编号为奇数的那些。编号为偶数的即是2n或者2n+2

• nth-last-child(-n+3) 表达式中n的值也是0,1,2,，，n，随着n值的改变 -n+3表达式的值是3,2,1，对应的倒数前3个元素。也就是说-n+x可以用来选择连续倒数的x个元素。

 

注意：上述也可以单用（不要冒号前面的部分），但一般较少这样用。

 

其他伪类

• E:empty：选择内容为空的E元素，就是标签内什么都没有，空格也不能有。毋庸置疑 所有的单标签一定符合

<style>
    li:empty {
        color : red;
    }
</style>
<ul>
    <li>item1</li>
    <li> </li>  
    <li></li>   /*它会变红*/
</ul>
​

• E:checked：作为选中项的E元素 它针对radio和checkbox

• E:enabled：作为有效控件的E元素，不能含有disabled属性

• E:disabled：作为无效控件的E元素，也就是含有disabled属性的输入控件

 

伪元素选择器

伪元素选择器是通过双冒号（：：）和特定的具有某种含义的单词来确定所选元素。

伪元素选择器通常是"本没有这个元素（标签）"，但会创建出一个隐性元素并对其进行样式设定。

伪元素选择器又称为“伪对象选择器”。

• E::before

  • 表示会创建一个新元素并添加到元素E的内部的最前面（伪元素）。

    其中必须写上一个属性：content:"内容"; 当然，内容可以为空。

• E::after

  • 表示会创建一个新元素并添加到元素E的内部的最后面（伪元素）。

    其中必须写上一个属性：content:”内容”;

• E::selection

  • 表示给元素E内容中“选中的部分”创建一个伪元素并设置它的样式。

• E::first-line

  • 表示给元素E中的“第一行内容”创建一个伪元素并设置它的样式。

• E::first-letter

  • 表示元素E中的“第一个字符”可以单独作为一个元素（伪元素）。

 

 

选择器组合

选择器的组合是将多个不同形式的选择器组合起来以确定所选元素，它主要有以下几种形式：

• E(Element)：元素选择器

• E.class：表示选择E元素 同时它的类名是class

• E#id：表示选择E元素 同时ID是id

• E[attr]：表示选择E元素 且属性为attr

• 并列选择器：表示同时选中这些元素，例如：div , p 选择div和p

 

 

CSS样式特性

层叠性

所谓层叠性，是指对同一元素同一属性的设定，后设定的某个样式（属性）会覆盖之前设定的样式。例如：

.d1 { color: red; }
.d1 {color: blue; }
<div class="d1">文字内容</div>

则此时文字颜色就是blue，即后者覆盖了前者的设定。

事实上它分为两种情况：

1. 两个相同的选择器选中了相同的元素，并设置了同样的属性，后者覆盖前者。

2. 两个同级别的不同选择器选中了相同的元素，并设置了同样的属性，也是后者覆盖前者。

body .d1 { color : red; }
div.d1 { color : blue; }

 

继承性

所谓继承性，是指对某个元素所设定的样式，不但影响该元素本身，还==影响该元素的后代==元素。例如：

.d1 {color:red;}
<div  class="d1">
    文字1
    <p>文字2</p>
</div>

则此时文字1和文字2实际都是红色。

实际上继承性不是普遍情况，而只是少数一些属性才具有继承性（即能够影响后代元素）。

应用中继承性通常用在==有关文字==属性上。

 

盒子模型

所谓盒子，就是将HTML网页中的标签在网页版面中所占据的平面范围，抽象出来的一个“视觉形状”。

一个简单的理解就是：几乎所有标签，都可以看做是一个“矩形盒子”，具有一定的宽高（区域）。

总体上来说，一个盒子是由若干个部分构成的，从内到外依次包括：

盒子内容区，内边距区，边框，外边距区

• content：内容

• padding：内边距，又称为内补白，是一片空白区域

• border：边框

• margin：外边距，又称为外补白，也是一片空白区域

  top，right，bottom，left：上，右，下，左

特别注意：

1. 一般情况下，给容器设置的width和height是指内容区的大小，不包括边框和内边距。事实上盒子模型有两种，可以通过box-sizing来设置：

   1.1 外扩型：内容区大小不变 当设置内边距和边框时 盒子模型放大

   1.2 内减型：盒子的总大小不变 当设置内边距和边框时 内容区减小

2. 平常我们看不到内边距，边框和外边距，是因为他们默认都是0（宽度，或厚度）。

 

盒子属性

与盒子模型相关的属性有：

border

边框可以使用border缩写形式，它包含三个属性：border-width，border-style，border-color。这里使用border是给盒子整体设置的边框，还可以分别设置某一侧的边框：

• border-left ：左边框

• border-right：右边框

• border-bottom：下边框

• border-top：上边框

css中 合成词 都是以"-"作为逻辑断点的

div {
	border-bottom:1px solid red;
}
div {
	border-bottom-width : 1px;
	border-bottom-color : red;
	border-bottom-style : solid;
}

 

outline

outline是边框以外的轮廓设置，它有四个属性：

• outline-width：轮廓的宽度

• outline-style：轮廓样式 可选值和边框是一样的

• outline-color：轮廓的颜色

• outline-offset：轮廓距离边框的偏移值

• outline：以上四个属性的缩写形式

 

background

• 基本使用：

  • background-color :

  • background-image：

  • background-repeat：

  • background-position：

  • background：背景图片的几个属性写一起，颜色现在它们的前面或后面都行

  div {
      background:  url() no-repeat left top  red;
  }
  

   

• 精灵图（spirit）设计

  • 精灵图也叫雪碧图，它是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的==背景定位==来显示需要显示的图片部分。

  • 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，==使用雪碧图只需要引用一张图片，对内存和带宽更好，并且可以减小图片的总大小==。

   

 

width

width和height设置盒子内容区的尺寸，重点：只有==块级元素== 才有盒子模型的概念以及尺寸大小。

• min-width

• max-width

 

padding

css中使用padding给盒子或者元素 添加内补白（内间距），它是元素和边框之间的距离，有四个方向：

• 左边距：padding-left

• 右边距：padding-right

• 上边距：padding-top

• 下边距：padding-bottom

• 缩写形式：padding，书写时要遵循固定的顺序（顺时针）：↑→↓←

  div {
      padding-top : 5px;
      padding-right : 10px;
      padding-bottom : 15px;
      padding-left : 20px;
      padding : 5px 10px 15px 20px;
     
      padding : 8px;/*四个方向都是8px*/
      padding : 8px 18px;	/*上下8px 左右18px*/
      padding : 8px 18px 25px;/*缺省的第四个值 取第二个*/
  }
  

   

margin

margin是外补白，也就是外边距，它的设置和padding是一样的：

• margin-top

• margin-right

• margin-bottom

• margin-left

• margin：