CSS学习

CSS是层叠样式表（Cascading Style Sheets）的简称。

有时候也会称之为CSS样式表或级联样式表。

CSS也是一种标记语言。

CSS主要设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。

HTML可以专注去做结构，CSS用来做样式。

CSS的语法规范

CSS由（1）选择器和（2）声明的样式组成，一般写在head中。

<style>
	/* 选择器{样式} 如下，选择器找到所有的p标签，然后将样式赋予所有的p标签*/
	/* 给谁改样式{改什么样式} */
	p {
		color: red;
		font-size: 12px;
	}
</style>

选择器的分类

基础选择器

标签选择器

HTML的标签名作为选择器。为页面中所有的同一标签全部改样式。

p {
	color: red;
	font-size: 12px;
}

类选择器

如果要差异化选择不同的标签，使用类选择器(开发最常用），类型太长可以用-来分隔。

/* 定义类选择器 */
.red {
	color: red;
}
.font35 {
  font-size:35px
}
<!-- 使用类选择器 -->
<p class="red">hello world</p>

多类名的使用：

一个HTML元素中class可以指定多个类名，多类名之间必须用空格分开。

<p class="red font35">hello world</p> 

ID选择器

id选择器可以为标有特定id的HTML元素指定特定的样式，ID选择器只能被调用一次。

/* 定义ID选择器 */
#pink {
	color: pink;
}
<!-- 使用ID选择器 -->
<p id="pink">hello world</p>

通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

/* 定义通配符选择器，这里将html，body，head等等标签全部改为红色 */
* {
	color: red;
}

复合选择器

复合选择器是由两个或更多个复合选择器通过不同的方式组合而成的。

后代选择器

/* 只改变ol中的li的样式 */
ol li {
	color: pink;
}
/* 也可以用带class=nav的基础选择器来寻找 */
.nav li a {
	color: pink;
}

子选择器

只影响儿子标签，不影响孙子标签。

.nav > a {
	color: red;
}
<div class="nav">
	<a href="#">我是儿子</a>
	<p>
		<a href="#">我是孙子</a>
	</p>
</div>

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。

div,
p {
	color: red;
}

可以和别的选择器混合使用。

div,
p,
.nav li{
	color: red;
}

伪类选择器

伪类选择器有链接伪类、结构伪类、表单伪类等。

链接伪类

书写顺序link，visited，hover，active。

a:link选择所有未被访问的链接

a:visited选择所有已被访问的链接

a:hover选择鼠标指针位于其上的链接

a:active选择活动链接（鼠标按下未弹起的链接）

focus伪类选择器

用于选择焦点的表单元素。

input :focus{
	background-color: yellow;
}

CSS字体属性

字体系列

font-family定义文本的字体系列。当冒号后有多个字体，会从左往右选择，直到选择了电脑中存在的能显示的为止。

h2 {
	font-family: 'Microsoft Yahei';
}

文字大小

font-size定义文字的大小。

/* 标题和标签比较特殊，需要单独指定文字的大小 */
body {
	font-size: 16px;
}

字体的粗细

font-weight定义文字的粗细，一般都用数字。

notmal（400）：正常字体。

bold（700）：粗体。

bolder：特粗体。

lighter：细体。

文字样式

font-style定义字体的样式：normal（默认），italic（倾斜）

字体的复合属性

font用来设置复合属性,各属性用空格分开，不要的属性可以省略，但是font-size和font-family属性必须要有。

/* font的顺序为font-style font-weight font-size/line-height font-family */
p {
	font: italic 700 16px/20px 'Microsoft yahei'
}

CSS文本属性

文本颜色

color定义文本颜色

div {
	color: red;
	/* color: #ff0000; */
  /* color:rgb(200,0,0) */
}

文本对齐

text-align设置文本内容的水平对齐方式。

h1 {
	/* 属性有right，left，center */
	text-align: center;
}

装饰文本

text-decoration设置文本装饰。

p {
/* 属性有underline下划线 line-through删除线 over-line上划线 none去除文本默认下划线 */
	text-decoration: underline;
}

文本缩进

text-indent定义首行缩进。

p {
	text-indent: 10px;
	/* text-indent: 2em; 2个文字的大小*/
}

行间距

line-height属性用于设置行间的距离（行高）。

p {
	/* 行间距包括文本高度+上间距+下间距 */
	line-height: 26px;
}

CSS引入方式

行内样式表（行内式）

直接写在元素标签内部的style属性中设置CSS样式。

<div style="color: red;font-size: 12px;">不关注嘉然今天吃什么的，有难了</div>

内部样式表（嵌入式）

把CSS写到html的内部的style标签内部，一般吧style放在head里面。

外部样式表（链接式）

将CSS单独写在外部的CSS文件中。

<link rel="stylesheet" href="css文件路径">