测开：css学习1

http://css.cuishifeng.cn/ css在线操作手册

css介绍和引用

1.1、CSS 概述

​ CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

[图片上传失败...(image-331cce-1567523609387)]

1.2、css的基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

[图片上传失败...(image-e4f153-1567523609386)]

1.3、css引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。

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

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

2、css背景

2.1、设置背景色

background-color 设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为红色：

p {background-color: red;}

2.2、设置背景图像

background-image：要把图像放入背景， 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

• 背景图平铺

  如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

  属性值 ：

  • repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样

  • repeat-x ：图像只在水平上重复，

  • repeat-y ：图像在垂直方向上重复

  • no-repeat ：不允许图像在任何方向上平铺。

  默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

  body
    { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat: repeat-y;
    }
  
  

2.3、背景定位

可以利用 background-position 属性改变图像在背景中的位置。

定位方式：位置关键字、百分比、

下面的例子在 body 元素中将一个背景图像居中放置：

• 位置关键字：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

单一关键字	等价的关键字
top	top center 或 center top
bottom	bottom center 或 center bottom
center	center center
right	right center 或 center right
left	left center 或 center left

• 百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

• 长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

2.4、背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

background-attachment 属性：声明图像相对于可视区是固定的，因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

3、颜色表示法

颜色三种表示方法：

• 颜色名表示，比如：red ，cyan gold

• rgb表示，比如：rgb(255,0,0)表示红色

• 16进制数值表示，比如：#FFFF00 表示黄色

颜色对照表地址：http://tool.oschina.net/commons?type=3

[图片上传失败...(image-f2a708-1567523609385)]

4、css文本样式

常用的应用文本的css样式：

• color 设置文字的颜色，

  • color:red;

• font-size 设置文字的大小

  • font-size:12px;

• font-family 设置文字的字体

  • font-family:'微软雅黑';

• font-style 设置字体是否倾斜：

  • 不倾斜: font-style:'normal';
  • 倾斜: font-style:'italic';

• font-weight 设置文字是否加粗，

  • font-weight:bold 设置加粗
  • font-weight:normal 设置不加粗

• line-height 设置文字的行高 (行高相当于在每行文字的上下同时加间距)，

  • line-height:30px;

• 设置文字的几个属性，顺序如下： font：是否加粗 字号 /行高 字体；

  • font:normal 12px/36px '微软雅黑';

• text-indent 设置文字首行缩进

  • text-indent:24px; 设置文字首行缩进24px

• text-align 设置文字水平对齐方式

  • 如text-align:center 设置文字水平居中

5、css选择器

5.1、标签选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

<h1>h1标题</h1>
<h2>h2标题</h2>

h1 {color:blue;}
h2 {color:silver;}

5.2、id选择器

首先，ID 选择器前面有一个 # 号

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，一个ID只能在文档中使用一次，id名一般给程序使用，所以不推荐在css设置样式时使用id作为选择器

<input type="test" name="uname" id="user">
#user {font-weight:bold;}

5.3、类选择器

必须将 class 指定为一个适当的值，类名前有一个点号（.）,通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

<div class="menu"></div>

.menu {color:red;}

5.4、属性选择器

通过元素的属性进行选择，

选择带name属性的a标签

<a href="" name="nb"></a>
<a href=""></a>
<a href=""></a>

a[name] {color:red;}

5.5、包含选择器（层级选择器）

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

<div class="menu">
    <div>
        <p>p标签</p>
    </div>
</div>

.menu div p{color:cyan}

5.6、组选择器

多个选择器，，每个选择器之间用逗号隔开如果有同样的样式设置，可以使用组选择器。

h1, h2, h3 {color:blue;}

5.7、伪类及伪元素选择器

伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1

6、css模型框

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

img

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

1、边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。

border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式

CSS 边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

除了以上四种，还可以对四个方向单独设种子

border的样式类型

[图片上传失败...(image-4f8328-1567523609383)]

solid    # 实线
dotted   # 点线
dashed   # 线
double   # 双线

2、内边距

padding 属性定义元素边框与元素内容之间的空白区域。

CSS 内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

设置的时候可以通过像素，也可以按元素的百分比进行设置。

h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

也可以给四个方向设置不同值，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left

另外

把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

3、外边距

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

外边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距

7、浮动和定位

1、CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

通过使用 position 属性，我们可以选择不同类型的定位。

2、相对定位

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

3、绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

#box {
  position: absolute;
  left: 30px;
  top: 20px;
}

4、固定位置

• 需要设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化

5、浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

在 CSS 中，我们通过 float 属性实现元素的浮动。

img{
  float:right;
  }

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

8、display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：

• none 元素隐藏

• block 元素以块元素显示