【css基础】

css基础

CSS：是一种用于修饰网页的文本样式语言，还可以配合Javascript脚本语言动态对网页各元素操作。
1、内联方式（行内样式）

<p style="color:red">在HTML中如何使用css样式</p>

2、内部方式（内嵌样式），在head标签中使用

<style type="text/css">
p {
color:red;
}
</style>

3、外部导入方式（推荐），在head标签中使用

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

选择器

选择器：需要改变样式的HTML元素
格式：选择器{属性:值;属性:值;属性:值;…}
常见选择器：标签选择器、类选择器、ID选择器、派生选择器

元素选择器：

使用html标签作为选择器，为指定标签设置样式。
示例1：h1元素设置样式

h1 {
color: red;
font-size: 14;
}

示例2：多个元素设置样式

h1,h2,h3,h4,h5,h6 {
color: green;
}

示例3：子元素会继承最高级元素所有属性

body {
color: #000;
font-family: Verdana, serif; /*字体*/
}

选择器：ID

id选择器：使用“id”作为选择器，为指定id设置样式。
使用格式：#id名{样式…}
特点：
•每个id名称只能在HTML文档中出现一次
•在实际开发中，id一般预留JavaScript使用

第一步：给标签指定id

<p id="t">...</p>

第二步：针对id设置样式

#t {
color: red;
}

选择器：类

类选择器：使用“类名”作为选择器，为指定类设置样式。
使用格式：.类名{样式…}
第一步：给标签指定类

<p class="c">...</p>

第二步：针对类设置样式

.c {
color: red;
}

选择器：派生

派生选择器：依据元素在其位置的上下文关系来定义样式
示例：

<style type="text/css">
.c p {
color: red;
}
</style>
<div class="c">
<h1>一号标题</h1>
<p>这是一个段落</p>
</div>

CSS常用属性：内边距和外边距

padding（内边距）：元素到div内边框的距离
margin（外边距）：元素div距离父级元素div边缘的距离
border：元素div边框宽度
示例：

padding:10px 5px 15px 20px #上右下左
padding:10px 5px 15px #上右下
padding:10px 5px #上右
padding:10px #四边都是10px

内边距：
padding 设置四边的内边距
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
外边距：
margin 设置四边的外边距，使用方法同padding
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

CSS常用属性：字体font-*

属性	描述	值
font-size	设置字体的尺寸	xx-small、x-small、small、medium、large、x-large、xx-large，从小到大，默认值medium length固定长度，例如12px
font-family	字体系列。可以写多个，如果第一个不支持，使用下一个
font-weight	设置字体的粗细	normal默认值 bold粗体 bolder更粗 lighter更细<
font-style	字体样式	normal正常 italic斜体 oblique倾斜的字体

CSS常用属性：文本

属性	描述	值
color	字体颜色	颜色名称，例如red 十六进制值，例如#ff0000 rgb 代码，例如rgb(255,0,0)
text-align	文本对齐方式	left左边 right 右边 center 中间 justify 两端对齐文本效果
text-decoration	文本修饰	none 默认，定义标准的文本，例如去掉超链接下划线 line-through 删除线 underline 文本下加一条线
text-overflow	文本溢出后显示效果	clip 修剪文本 ellipsis 显示省略号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本
letter-spacing	字符间的距离	normal 默认 length 自定义间距
line-height	行间的距离（行高）	normal 默认 length 设置固定值

CSS常用属性：边框border-*

border	所有边框样式的缩写
示例：border: 1px solid blue; 宽度样式颜色

border-radius	圆角边框 直接写像素

box-shadow	给元素添加阴影:
**格式：**
box-shadow: h-shadow v-shadow blur spread color inset;
•h-shadow 必选，水平阴影的位置
•v-shadow 必选，垂直阴影的位置
•blur 可选，模糊程度
•spread 可选，阴影的大小
•color 可选，阴影的颜色
•inset 可选，从外层的阴影（开始时）改变阴影内侧阴影
示例1：box-shadow: 1px 2px 3px 1px #c2c2c2;
示例2：box-shadow: 0 5px 20px 0 #e8e8e8;

CSS常用属性：背景background-*

background-color
描述：背景颜色
•颜色名称，例如red
•十六进制值，例如#ff0000
•rgb 代码，例如rgb(255,0,0)

background-image
描述：背景图片
•url('URL') 图片路径
•none 不显示背景图片

background-repeat
描述设置是否及如何重复背景图像
•repeat 默认。背景图像将在垂直方向和水平方向重复
•repeat-x 背景图像将在水平方向重复
•repeat-y 背景图像将在垂直方向重复
•no-repeat 背景图像将仅显示一次

background-position
描述：背景图片的位置
•left、top、top right、center left、center center、center right、bottom left、bottom center、bottom right
•x% y% 水平位置和垂直位置

background-size
描述：背景图片的尺寸
•length 背景的高度和宽度，例如80px 60px
•percentage 以父元素的百分比设置背景图像的高度和宽度，例如50% 50%

CSS常用属性：Flex弹性布局

在之前要控制HTML元素的布局，会用到padding、margin、postion、float等方法，经过反反复复调试才能实现效果。
自从Flex弹性布局出现，一切似乎豁然开朗！
启用Flex布局，只需要在外部元素设置display:flex属性。
Flex布局有一个隐式的坐标空间，水平方向有一条主轴，垂直方向有一条交叉轴：
改变主轴（横向）的布局：

justify-content:
•flex-end：右对齐
•center：居中对齐
•space-evenly：平分空间
•space-between：两端对齐

改变交叉轴（竖向）的布局：

align-items
•flex-end：靠下对齐
•center：居中对齐

调整空间占比（子元素宽度）：

例如第一个元素三分之一，第二个元素占三分之二，第三个元素占三分之一：flex:1;flex2;flex1