CSS入门

一、概述

1、css简介

css层叠样式表
什么是CSS：大名：Cascading(层叠) Style(样式) Sheets(列表)
css的作用：结构与样式分离的方式，便于后期维护与改版。可以用多层样式，使网页有任意样式切换的效果。使页面载入更快、降低服务器的成本

2、css基础

样式表分类：外部、内部、行内样式

二、CSS基本使用

1、css选择器

选择器

p{
background-color:red;
font-size:40px;
}《标签选择器》<p>
.p1{
font-family:Comic Sans MS;
}《类选择器》<p class="p1">    

2、css样式设置

background-position属性列表

3、使用外部样式表

外部样式表：单独文件扩展名写css，在html中 使用link 引用
<link rel="stylesheet" type="text/css" href=“index.css”>

link：指明所需要链接的关系，用于定义文档外部资源的关系
rel="stylesheet"：链接样式表，rel时relationship的英文缩写，也就是“关系”
type="text/css":指明的是要链接的文件类型，定义css样式文件的类型，可省略
href="index.css":指明外部样式表的文件，引用的具体文件

内部样式表：写在html中的head标签内，声明使用<style type="text/css"> </style> 

4、css样式加载的三种方式优先级

三种优先级样式：

行内元素样式设置>内部样式设置>外部链接样式设置

三、CSS常用样式

1、文本类样式

文本样式：对齐方式、文本修饰、文本转换、文本缩进…

作用：美化、修饰页面的文字部分相关内容

属性	属性值	作用
color	表示颜色的内容	设置文本颜色
directon	ltr、rtl	文本的方向/文本书写方向
letter-spacing	npx(n可以是负数)	字符间距
line-height	npx	行高
text-align	left、center、right、justify	文本对齐方式
text-decoration	none、underline、overline、line-through	文本的修饰:下划线
text-shadow	h-shadow v-shadow blur color	文本设置阴影
text-transform	none、capitalize、uppercase、lowercase	改变字母大小写
text-indent	npx、nem	首行缩进

direction 和 text-align的区别:

如果是字母汉字 左对齐和右对齐没有多大区别
而对于阿拉伯语或者 . 来说direction: rtl; 会使字符从右往左显示

快捷操作：光标放在行尾ctrl+/——注释这一行

2、字体类样式

italic和oblique的区别：italic对大多数的文字都有斜体效果，个别文字没有斜体效果。oblique对任何文字都有斜体效果。
font-weight：100-900的设置，对不同的浏览器效果不同，所以现在先很少使用渐变加粗的效果，只使用normal和bold。

3、列表样式

属性	属性值	作用
list-style-type	（none（无）或disc（默认）或circle（空心圆）或square（实心圆）或decimal（数字）	设置列表符号外观）
list-style-position	inside或outside	列表符号位置
list-style-image	url（“图片路径”）或none	把图像设置为列表项目的标记
list-style	同前面三个	简写属性，涵盖以上三个列表样式属性

注意：如果image生效那么type自然会失效
可以把所有属性写在一个list-style:属性1；属性2；属性3；

四、伪类和伪元素

1、伪类样式

属性	作用
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标移动到链接上（浮动、悬停）
a:active	向被激活的元素添加样式
:focus	选择拥有键盘输入焦点的元素

2、伪类分类

伪类包含两种：状态伪类和结构性伪类
:first-child
选择父元素的第一个子元素如果第一个子元素不是指定的元素类型，则不会生效样式
举例：p:first-child{color:red;}
先从标签p往上定位到父元素如果定位到的父元素下的第一个子元素是p那么这个p的内容就会生效这个样式如果第一个元素不是p，那么就不会生效

:last-child
选择元素的最后一个子元素如果最后一个子元素不是指定的元素类型，则不会生效样式
举例：p:last-child{color:red;}
先从标签p往上定位到父元素如果定位到的父元素下的最后一个子元素是p那么这个p的内容就会生效这个样式如果最后一个元素不是p，那么就不会生效

:nth-child(n)
选择某个元素的一个或者多个特定的子元素可以通过n来指定第几个子元素来生效该样式从1开始计算
举例：p:nth-child(2){color:red;}
先从标签p往上定位到父元素然后第2个子元素生效这个样式

:nth-last-child(n)
选择某个元素的一个或者多个特定的子元素可以通过n来指定第几个子元素来生效该样式是从最后一个往前开始算 举例：p:nth-last-child(2){color:red;}
先从标签p往上定位到父元素然后倒是第2个子元素生效这个样式

:first-of-type
选择一个上级元素下的第一个同类元素和first-child不同的时候，他会遍历子元素，寻找匹配的，而不是只看第一个子元素
举例：p:first-of-type{color:red;}
先从标签p往上定位到父元素然后在这个父元素下寻找第一个p元素，对其生效样式

3、伪元素选择器

伪元素选择器
伪类选择器选择整体，伪元素选择器选择部分。
（1）::before
p::before{
content:“终于找到你”;
}
（2）::after
body::after{
content:“addf”;
}
（3）p::first-line{
background-color:yellow;
}
（4）p::first-letter{
font-size: 30px;
}
（5）p::selection{
background-color: red;
} 鼠标选择的文字是红色
*::selection{
background-color: red;
} 所有都会显示颜色，除了语法格式改的部分，比如上面的“终于找到你”

属性	作用
::selection	选择指定元素中被用户选中的内容
::before	可以在内容之前插入新内容
::after	可以在内容之后插入新内容
::first-line	选择指定选择器的首行
::first-letter	选择文本的第一个字符

五、其他选择器

1、css其他选择器

class允许重复，id不允许重复，id是唯一的标识

css其他选择器

选择器	作用
id，*	选择指定元素中被用户选中的内容
逗号选择器	联合选择器
空格选择器	子孙(后代)选择器
>选择器	子选择器(不是子孙后代)
+选择器	相邻兄弟选择器
[]	属性选择器

1）空格选择器也称作子孙（后代）选择器
举例：div标签下的所有p标签被选中。注意，不论p标签位于那一层。
div p{
color:blue;
}
2）>选择器就是子选择器（不是子孙后代）
举例：div标签下一层的p标签被选中
div>p{
color:red;
}
3）+选择器就是相邻兄弟选择器
举例：div标签同一个层级的p标签被选中
div+p{
color:red;
}
4）[]属性选择器
举例：p标签的属性class是p1的元素选中
p[class=“p1”]{
}

2、css选择器的优先级

• 在属性后面加 !important表示强制优先。一般不建议使用
• 同级别设置有冲突时，以后面出现的为准

1）
<div class="div1 div3" id="div2"></div>
2）
.div1{
  background-color: yellow;
}
.div3{
  background-color: yellow;
}
会显示蓝色
3）嵌套组合也可以使用
①.d1 .div1{
    background-color: yellow;
}
②<div clss="d1" id="d2">
         <div class="div1" id="div2"></div>
   </div>