css基本介绍
Posted mingleyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css基本介绍相关的知识，希望对你有一定的参考价值。
目录
CSS初识
CSS(Cascading Style Sheets)通常被称为CSS样式表或层叠样式表（级联样式表），主要用于设置html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。
构造规则
样式表的每个规则都有两个部分，即选择器(selection)和声明(declaration)。
注意
- 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
我们也可以在样式规则中用/*注释内容*/语法来注释内容。另外，样式会被该元素的后代继承，不过浏览器在解析代码时，只会解析离它最近的样式。
样式表的定义和使用
行内式（内联样式）
基本语法：
<label style="样式属性:属性值;样式属性:属性值;···">内部样式表
基本语法：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>外部样式表（外链式）
基本语法：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>说明：
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件link：该标签是一个单标签
或者：
<style type="text/css">
@import url("外部样式表的文件名称")
</style>选择器
标签选择器（元素选择器）
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }不过我们必须在标签里面如下定义：
<label class="类名"></label>id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}不过我们也要在标签里面如下定义：
<label id="id名"></label>通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
链接伪类选择器
:link：未访问的链接:visited：已访问的链接:hover：鼠标移动的链接上:active：选定的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:hover{
color: red;
}
</style>
<body>
<a href="http://www.baudu.com/">百度</a>
</body>
</html>结构（位置）伪类选择器
:first-child:选取属于其父元素的首个子元素的指定选择器:last-child:选取属于其父元素的最后一个子元素的指定选择器:nth-child(n)： 匹配属于其父元素的第 N 个子元素，不论元素的类型:nth-last-child(n)：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
目标伪类选择器
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
复合选择器
交集选择器
我们直接把需要交集的选择器连在一起，如：
<style>
p.class#id{
...
}
</style>并集选择器
在选择器的中间加上逗号：
<style>
p,.class,#id{
...
}
</style>后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
<style>
p .class #id{
...
}
</style>子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 >进行连接，注意，符号左右两侧各保留一个空格。
<style>
.demo > h3 {color: red;}
</style>属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}伪元素选择器
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）E::first-line文本第一行；E::selection可改变选中文本的样式；E::before和E::after：在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用；
标签选择模式
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
特点：
- 独占一行
- 高度，行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
特点：
- 和其他行内元素会在一行
- 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素。（a特殊）
行内块元素（inline-block）
在行内元素中有几个特殊的标签如<img>、<input>、<td>，可以对它们设置宽高和对齐属性，我们称它们为行内块元素。
特点：
- 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度，行高、外边距以及内边距都可以控制
标签显示模式转换display
display:inline：块转行内display:block：行内转块display: inline-block：块、行内元素转换为行内块
以上是关于css基本介绍的主要内容，如果未能解决你的问题，请参考以下文章