css语言基础

CSS：级联样式表

一种样式表语言

基本语法

行内样式表：

通过标签的style属性来设置,例如：

<p style="color: plum;font-size: 20px;font-weight: 600;">
			行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式
</p>

内嵌样式表：

写在标签内。例如：

<style type="text/css">
			p{color: palegreen;font-size: 30px;}
</style>

外部样式表：

将样式表写入css文件然后导入进来，例如:

<link href="css/index.css" rel="stylesheet" />

为什么采用样式表？

因为，在没有采用之前，对一个内容的修饰需要使用大量的标签进行嵌套很不方便。因此，使用样式表以便于方便对内容进行修饰。

选择器：

标签选择器，通过标签名字 匹配标签 格式：标签名{ }

p{
	color: palevioletred;font-size: 20px;
} 

类选择器，通过标签的class属性匹配标签 格式：.class属性值{ }

.p1{
	color: red;
}

id选择器，通过标签的id属性匹配标签 格式：#id属性值{ }

#h1{
    color: green;
}

选择器组合，通过选择器分组可以同时选中多个选择器对应的标签 格式：选择器1,选择器2,选择器N{ }

.p1,.p2,#h1{
	font-size: 20px;
}

通配选择器 选中所有标签

*{
	color: aquamarine;
}

注意：选择器分优先级 匹配越多的优先级越低

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

文本修饰：

color: palevioletred;颜色
font-size: 20px;字体大小 px 像素单位
font-weight: 800;字体加粗
font-family: 楷体; 字体类型 ，需要注意设置的字体是否在字体库中，如果不在则为默认字体
text-align: center; 水平对齐方式
text-decoration: line-through ;–加删除线
underline–加下划线

​ none–去除所有线

font-style: italic;斜体字

line-height: 50px; 文本行高
letter-spacing: 20px; 文字间的间隔大小
text-indent: 2em; 段首缩进 em：表示当前文本中一个字符的大小

背景修饰：

background-color: plum; 背景颜色
background-image: url(img/bj.png);背景图片
background-repeat: no-repeat;背景图片重复 no-repeat不重复
background-position: right top;背景图片位置
background-size: 800px 500px;背景图片大小

列表：

list-style-type: none;设置列表项标志的类型。
list-style-image:url(img/1.png);将图象设置为列表项标志
list-style-position: inside; 设置列表中列表项标志的位置

简写方式对列表的修饰
list-style: inside none url(img/2.png);

伪类：

用来表示标签的一种特殊的状态

:hover当鼠标移入到标签上时，切换到此样式表

:active当鼠标点击标签时，切换到此样式表

:focus 当鼠标聚焦到可以输入的标签时，切换到此样式表

透明度：

属性是：opacity 标签的透明度的设置，0 完全透明 ， 1 完全不透明

块级，行级，行级块标签：

块级标签：无论内容有多少都会独占一行
默认的宽与浏览器一致，或者与父标签一致
默认的高 如果没有内容高度是0，有内容与内容高度一致
块级标签可以设置宽和高
块级标签主要用来布局网页

 eg：<p>,<h1>,<hr>等

行级标签：只占内容的大小，不会占一行
不能设置宽和高，设置了也是无效的
主要用来包裹（选中）文字内容，对文字内容进行修饰

	 eg：<font>,<b>等

行级块标签：可以设置宽高，不占一行

eg：<input>,<img>等		        

注意：

一般情况用块级标签包含航机标签

<a>标签可以包含任何标签，除去自己
<p>标签不能包含任何块标签

display：

通过display的修饰改变标签的类型

block ：设置标签为块标签

inline ：设置标签为行级标签

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

none ：隐藏标签

div和span：

div,是一个块标签，可以包含任何标签
没有任何的附加功能，设置什么属性，就变成什么样子
是一个纯净版的块级标签
用div标签来进行网页布局

span，是一个纯净版的行级标签
没有任何的附加功能，设置什么属性，就变成什么样子
主要用来包裹文字，修饰文字

盒子模型：

分为内容区，内边距，边框，外边距

内容区：盒子中放置内容的区域

​ 默认是与盒子的大小是一致的

​ 通过width和height设置内容区的大小

内边距：放置内容的区域与边框的距离

​ 通过padding来设置

边框：可以在标签周围创建边框

​ border设置边框

外边距：边框与周围标签之间的距离

​ 通过margin设置

浮动、定位：

文档流：标签在排列时占用的位置

浮动：使标签脱离原来的文档流，让标签漂浮起来

​ 使用float属性。none不浮动、left向左浮动、right向右浮动

浮动的问题：浮动后的标签不占原来的文档流空间
没有将父标签撑开，称为高度塌陷
会影响后面标签的布局

解决办法：1、为父级标签设置一个高度
2、清除浮动影响

       <div style="clear: left;"></div>

​ 清除浮动后，将父级标签自动撑开和浮动标签高度一致

​ both全部浮动

定位：就是让标签出现在我们想让它出现的位置，要定位，就要有参照物

​ 相对定位，开启标签相对定位 如果不设置偏移，标签不会移动。相对定位是以它自己原来的位置进行移动的，移动后，原来的空间任然被占用着（没有脱离原来的文档流）

​ 绝对定位，开启了标签的绝对定位，标签就会漂浮起来（脱离原来的文档流）。绝对定位是相对于，离它最近的，开启了定位的父标签，以及浏览器的窗口进行定位（不建议使用）所以一般开启一个标签的绝对定位，都会为其父标签开启相对定位。