CSS基础

CSS基础

1.使用方式：

1. 在标签内部使用：“style=“color: red; height: 100px;”
2. 内部样式： 在HTML文档head出直接使用css
3. 外链式：单独写css文档，在head处用link引用

2.CSS语法：

选择器 {
    属性名：属性值;
    属性名：属性值;
    属性名：属性值;
    .....
}

3.CSS选择器：

1.标签选择器：

h1{
	background-color:red;
}
...
<h1>123</h1>

h1的背景颜色将会变成红色；

2.id选择器：

#qwe{
	background-color:red;
}
...
<h1 id="qwe">123</h1>

要在id值前加#;1个标签只能有1个id；一个id也只能给1个标签

3.类选择器：

.qwe{
	background-color:red;
}
...
<h1 class="qwe">123</h1>

1个标签可以有多个class

4.属性选择器：

[id]{
	background-color:red;
}
...
<h1 id="qwe">123</h1>

所有有id属性的都将变成红色背景

5.通配符选择器：

*{
	background-color:red;
}

整个文档都被通配符选择器选中

4.选择器权重：

 ！important      	Infinity
 行间样式          	1000
 id                  100
 class|属性|伪类      10
 标签|伪元素           1
 通配符                0

5.相关属性：

字体颜色， 字体大小 字体样式
color：设置文字颜色
    1,直接写颜色对应的英文单词
    2，十六进制，RGB red green blue 常用
    3,rgb表示 rgb(255, 100, 100); 取值是0-255
    4，rgba color: rgba(0, 255, 0, 0.2) 第四个取值表示透明度，0-1 0就是完全透明
font-*:
    font-size:设置字体大小
    font-weight:设置文字粗体
        normal 默认的
        bold 粗体
        bolder 更粗一些
    font-family：设置字体类型 黑体 宋体
text-*
    text-align:控制文字的位置
        center居中
        left:左边
        right：右边
    text-indent：设置文字缩进
        取值有像素 px
        em 一个em就是一个文字大小
    text-decoration:
        underline设置下划线
        line-through 删除线
        none:取消任何线
line-*
    line-height 设置行高
        取值有像素 和数字 （文字大小的倍数）
        text-align设置的是文字水平居中，如果需要垂直水平居中，当行高和父级容器高度相等时才是垂直居中 （常用）
        设置行高可以让标签变大；顶线、中线、基线、底线 基线与基线的距离
链接：

 - a:link - 普通的、未被访问的链接
 - a:visited - 用户已访问的链接
 - a:hover - 鼠标指针位于链接的上方
 - a:active - 链接被点击的时刻
轮廓：outline
属性	描述	CSS
outline			在一个声明中设置所有的轮廓属性。	
outline-color	设置轮廓的颜色。	
outline-style	设置轮廓的样式。	
outline-width	设置轮廓的宽度。	

6.css盒模型：

内边距：元素到边框间的距离；通常用padding来调节
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

也可用调节单边的内边距，有两种方式：

1.h1{padding :10px 30px 30px 10px;}
2.h1{	padding-top :10px;
		padding-right:30px;
		padding-bottom:30px;
		padding-left:10px;}

边框：用border调节；
border有3个属性：宽度 形式（直线，虚线） 颜色；
外边框用margin调节，方式与内边距调节相似；

7.css定位：

CSS相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

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

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

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

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

CSS浮动：

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

img
  {
  float:right;
  }

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。