css基础

css

CSS是Cascading Style Sheets（级联样式表）,是一种样式表语言，用来修饰网页外观，CSS可将页面的内容与表现形式分离，达到样式的重复利用

CSS与html的关系：

html是网页的内容

CSS定义也网页页面的样式

基本语法

1.行内样式表

通过Style来设置元素的样式，基本语法格式：

<标签名 style="css语法——属性名：值;属性名:值">内容<标签名>
<>

2.内嵌样式表

将CSS代码写在html的头标签中，用style标签定义。基本语法格式：

<style  type="text/css">
    标签名{
        属性名：值;属性名:值;
    }
</style>

3.外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通 过link标签将外部样式表文件链接到HTML文档中

语法格式：

创建css文件 ，写入样式代码如下：

 标签名{
        属性名：值;属性名:值;
    }

2.在html头标签中导入外部样式表

<link href="css文件" res="stylesheet"/>  res="文件类型"

这三种基本语法，行内样式表用的少，内嵌样式表在平常练习中会使用，外部样式表主要用于开发中。

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器

常用选择器：

• 标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

• 类选择器：通过标签的class属性值选中一组标签

语法：.class属性值{}

• id 选择器：通过标签的id属性值选中唯一的一个标签

语法： #id属性值 {}

• 选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器1,选择器2,选择器N{}

• 通配选择器:可以用来选中页面中的所有的标签

语法：*{}

选择器的优先级：高->低 id选择器>类选择器>标签选择器>通配选择器

文本

​

            color: #7FFFD4;    字体颜色
			font-size: 50px;   字体大小
			font-weight: 700;  字体加粗
			font-family: 楷体;  字体样式
			font-style: italic; 斜体文字
			text-align: center ; 文本水平对齐方式
			text-decoration: line-through; 文本删除线
			text-decoration:underline ;  文本下划线
			text-decoration: none ;   文本标准格式
			text-indent: 2em;     首行缩进 em指当前一个字符的大小
			line-height: 30px;    行高
			letter-spacing:10px ; 字符间距

背景

            background-color: #FF0000; 背景颜色
			width: 800px; 
			height: 600px;
			background-image: url(img/baidu.ico); 背景图片
			background-repeat: no-repeat; 背景图片不重复
			background-position: center;  背景水平和垂直位置 

背景图片的优先级高于背景颜色

列表

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

            list-style-type: none; 设置列表项图标
			list-style-image: url(img/baidu.ico);将图片设置为列表项图标
			list-style-position: inside; 设置图标位置，在列表的里面还是外面

简写方式：没有先后顺序之分

list-style: inside url(img/baidu.ico)  none ;

伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类 。

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式。

透明

定义透明效果的属性是 opacity。

opacity 属性设置标签的不透明级别 值为1。

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

块级、行级、行块级标签

块级标签： 无论内容多少都独占一行，不需要br标签进行换行，这种标签可以设置宽和高，默认宽和父级标签一致，高由内容决定，这种标签主要用来布局网页。例如：h1 h2…p标签

行级标签：只占自身内容大小，不会占一行，换行需要br标签进行换行，不能设置宽和高设置了也是无效的。例如：a、b标签

行级块标签：可以设置大小，不会占一行，换行需要br标签进行换行。例如：input、img

注意：

• 一般情况下，使用块级标签包含行级标签，不使用行级标签包含块标签。
• a标签可以包含除a标签以外的所有标签
• p标签不能包含其他块标签

display

通过display样式可以修改标签的类型(块级、行级、行块级)。

可选值：

block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失）

div和span

div标签：div是一个块级标签，可以包含任何标签，没有任何附加功能，主要用来布局网页

span标签：span是一个行级标签，没有任何附加功能，它可以用来修饰文档中的文字

盒子模型

CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。

它分为四个区域：

• 内容区：标签中的内容都是放在内容区中，如果一个标签没有设置内边距和边框，那么内容区的大小就是标签的大小。通过width和height可以设置内容区的大小

• 内边距：内边距指边框和内容区之间的距离，不能放标签，内边距可以影响标签的大小，标签内边距的大小使用padding属性来设置。例如

  标签名{
        padding-top:10px;
        padding-left:10px;
        padding-bottom:10px;
        padding-right:10px; 设置上下左右四个方向的内边距
        padding:10px; 设置上下左右四个方向的内边距
        padding:10px 20px;设置上下 左右的内边距
        padding:5px 10px 15px 20px;设置 上 右 下 左  的内边距
  }
  

• 边框：边框是标签可见框的最外部，可以使用border属性来设置盒子的边框：

  设置格式为：border-方向-宽度/颜色/样式：设置内容;

  ​ 也可以 border-方向：宽度 颜色 内容;

  ​ 设置四个方向也可以 border:宽度 颜色 内容;

  后两种设置方式 宽度 、颜色 、 内容 书写没有顺序。

  边框的三个属性必须要设置，其中样式有dotted （点线）、 dashed （虚线）、 solid （实线）、 double （双线）、 groove （槽线）。

  边框还可以设置圆角边框，设置格式为：border-redius: n像素

  ​ border-上/下-左/右:n像素
  例如：

  .box1{           
        
  				border-top-color: #00FFFF;
  				border-top-width:5px ;
  				border-top-style:solid ;
  				border-top:  5px solid #00FFFF   ;
  				border: 5px solid #00FFFF ;
  				border-radius:20px ;
  				border-top-left-radius: 20px;
  			}
  

• 外边距：外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置 外边距。用法和padding类似，同样也提供了四个方向的 。

  语法格式为：margin-方向: n像素;

  ​ margin：上下 左右；

  其中margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，当将上下外边距设置为auto时值为0.

  例如：

  margin-top: 100px;
  				margin-bottom: 100px;
  				margin-left:auto ;
  				margin-right:auto ;
  				margin: 100px auto;
  

  外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

标签的大小=内边距+内容区

清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

方法为：

               *{
				margin: 0px;
				padding: 0px;
				outline: none;
			   }

文档流

文档流指的是文档中标签在排列中所占用的位置，将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。在文档流中标签会默认紧贴到上一个标签的右边，如果右边不足以放下标签，则会另起一行。

浮动

浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。浮动使用float属性

语法为：float:none/left/right

行级标签浮动之后会自动变成一个块级标签。当一个块级标签浮动以后，宽度是默认内容的宽度，所以块级标签浮动时都会为其指定宽度

当标签浮动后，标签会脱离文档流，浮在文档上方，所以其下方的标签会上移。且标签浮动以后不会在影响父标签的高度。

清除浮动

因为标签浮动以后会改变周围标签的位置，所以需要清除浮动，clear属性可以清除浮动标签对周围标签的影响。

语法：clear: left/right/both;忽略左边浮动/忽略右边浮动/忽略全部浮动。

定位

定位是指允许标签出现在除原本位置外的其他任何位置

相对定位

相对定位是指相对于标签的初始位置进行移动，移动后原来的位置还被占用，可以通过position:relative;开启相对定位，通过left right top bottom四个属性来设置标签的偏移量。

特点：

相对定位的标签不会脱离文档流

标签开启相对定位后，而不设置偏移量时，标签不会发生任何变化

绝对定位

绝对定位是指相对于离它最近的开启了定位的祖先标签进行定位（一般情况下，开启了子标签的绝对定位都会同时开启父标签的相对定位），如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位。

开启绝对定位后会使标签脱离文档流，所以绝对定位是不占空间的

可以通过position:absolute;开启绝对定位，通过left right top bottom 四个属性来设置标签的偏移量

特点：标签开启绝对定位后，而不设置偏移量时，标签不会发生任何变化

绝对定位会使标签提升一个层级

绝对定位改变标签的性质，行级标签变成块标签