css基础入门

e度空间

2020-05-27

关注关注

CSS基础入门

一、CSS介绍和引用

1、CSS概述

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

2、CSS的基础语法

css规则主要由两个主要部分构成
- 选择器
- 以及一条或多条声明
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和值组成
属性(property)是您希望设置的样式属性(style attribue)，每个属性由一个值，属性和值被冒号分开。

/*选择器选择h1标签*/
h1{
    /*一条颜色的声明*/
    color:red; /*属性：color 值：red*/
    font-size:14px;
}

3、CSS引入方法：

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

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../css/home_page.css" type="text/css">
</head>

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

<head>
    <meta charset="UTF-8">
    <title>嵌入式</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 10px;
            background: #154FB5;
        }
    </style>
</head>

3、内联式：通过标签的style属性，直接给标签设置样式

<body>
    <div style="background: #154FB5; width: 100px">........</div>
</body>

二、CSS背景样式

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

1、设置背景色

background-color： 设置背景颜色，这个属性接收任何合法的颜色值
四种种颜色表达：
- 颜色英文
- ＃号颜色：#E9F1F9
- rgb(177,222,333) 三个值锁定一个颜色
- rgba(177,222,333,0.2) 第四个为0-1的范围，表示透明度

body, html {
    background-color: red;
    background-color: #E9F1F9;
    background-color: rgb(177,222,333);
    background-color: rgba(177,222,333,0.4);
   
}

2、设置背景图像

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

背景图平铺
- 如果要对页面上背景图片进行平铺么可以使用background-repeat属性

属性值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-image:url("img/bd_logo1.png");
background-repeat: no-repeat;

3、背景定位

可以利用background-position改变图像的位置

关键字
百分比
像素

属性	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值

background-position: 50% 25%;
background-position: 100px 100px;
background-position: top center;

4、背景关联

如果文档比较长，那么当文档向下滚动时，背景图形就会消失，此时设置background-attachment 就可以声明图像对于可视区固定，不受滚带影响

-可能的值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-color: #154FB5;  /* 颜色*/
background-image:url("img/bd_logo1.png");/* 图像*/
background-repeat: no-repeat; /* 图像不平铺*/
background-position: top center; /* 图像定位*/
background-attachment: fixed; /* 图像不移动*/

5、通过background 属性一次将背景

背景颜色
背景图像
图像属性
图像位置
图像显示

/*任意顺序都可，单独设置颜色和图片也可以*/
body,html{
        background: #154FB5 url("img/bd_logo1.png") no-repeat top center fixed;
        }

三、CSS文本样式

1、常用的文本样式

color: 设置字体颜色
- color:red;
font-size：设置文字的大小
- font-size:14px;
font-family：设置文字的字体
- font-family: 宋体;
font-style：设置字体是否斜体
- font-style: italic; 斜体
- font-style: normal; 不斜体
font-weight：设置字体是否加粗
- font-weight: bold; 加粗
- font-weight: normal; 不加粗
line-height：设置字体的行高
- line-height: 40px;
font: 字体的样式属性一起设置
- 顺序
  - font-style
  - font-weight
  - font-size/line-height
  - font-family
- 案例
  - font: italic bold 28px/40px "微软雅黑";
  - font: 28px/40px "微软雅黑";
text-indent：设置首行缩进
- text-indent: 50px; 缩进50个像素
text-align：设置文字水平对齐方式
- text-align: center; 水平居中

四、CSS选择器

1、常见选择器

标签选择器
- 通过标签名选择标签给标签设置样式
- div{}
id选择器
- ID选择器，通过#号加标签id来选择
- #id{}
类选则器
- 通过点加类名选择
- .classname{}
属性选择器
- 通过标签名+元素属性进行选择
- div[属性名]
层级选择器
- 主要应用在父元素下的子元素
- div div{}： div下面的div标签
组选择器
- 多个选择器，每个选择器直接用逗号隔开
- div ,#id,.classname{}
伪类选择器
- 在支持CSS的游览器中，链接不同状态都可以不同的显示，这些状态包括：
  - 活动状态
  - 已被访问状态
  - 未被访问状态
  - 和鼠标选题状态
- 具体使用点击跳转w3school

五、CSS模型框

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

见图片盒子模型

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

1、边框

元素的边框 (border)是围绕元素内容和内边距的一条或多条线。border属性允许你规定元素边框的样式、宽度和颜色。
border-style d的默认值是none，因此如果希望边框出现，必须声明一个边框的样式

属性	描述
border	简写属性，四个边框属性一起设置
border-style	简写属性，用于设置元素所有边框的样式，或者单独为各边设置样式
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独为各边设置款第
border-color	简写属性，设置元素所有边框中可见部分的颜色，或者单独为各边设置颜色

border的样式类型

solid 实线
dotted 点线
dashed 线
double 双线

div{
     border: solid 2px #154FB5;
    }

1、内边距

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

CSS内边距属性

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

一般通过padding四边内边距一起设置

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

元素各边边距右10px
- div{padding: 10px;}
对称设置上下相等，左右相等
- div{padding: 10px 30px ;}
四边一起设置，属性从上开始顺时针旋转
- padding: top rigth bittom left;

2、外边距

1、margin(外边距)属性：定义元素周围的空间

2、margin属性接受任何长度单位、百分数值甚至负值

3、magin塌陷（和并）

边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

六、浮动和定位

1、CSS定位机制

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

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

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

通常使用position 属性,我们可以选择不同的定位方式

2、相对定位：relative

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

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

#box_relative {
  position: relative; //相对定位模式
  left: 30px;
  top: 20px;
}

3、绝对定位：absolute

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

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

注意: 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(也就body)。

<html>
<head>
<style type="text/css">
img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

4、浮动：float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

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

css css样式