CSS入门（一）

一、 CSS 基础选择器

1、标签选择器

2、类选择器

3、 id 选择器

4、通配符选择器

二、CSS 复合选择器

1、后代选择器（重要）

后代选择器选择后代元素简单的说就是选择子孙元素

语法：元素1 元素2
元素1和元素2 中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2

eg：

  ul li {
      /* 选择ul里的li标签文字颜色为红色 */
      color: red;
    }

2、子选择器

子元素选择器（子选择器）只能作为某元素的最近一级子元素，简单理解就是选亲儿子元素

语法：元素1>元素2 {样式声明} # 表示选择元素1里面的所有直接后代（子元素）元素2
元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是直接元素

eg：

div>p{ 样式声明} /* 选择 div 里面所有最近一级 p 标签*/

3、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

语法：元素1，元素2 { 样式声明 } #表示选择元素1和元素2
元素1和元素2中间用逗号隔开

eg：

ul,div {样式声明} /* 选择 ul 和 div 标签元素*/

4、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素

链接伪类选择器：

a: link /* 选择所有未被访问的链接 */
a: visited /* 选择所有已被访问的链接 */
a: hover /* 选择鼠标指针位于其上的链接 */
a: active /* 选择活动链接（鼠标按下未弹起的链接） */

注意事项：

确保生效，按照LVHA的顺序声明：link、visited、hover、active

:focus 伪类选择器：

：focus伪类选择器用于选取获得焦点的表单元素

eg：

input:focus {

 bcakground-color:yellow;

}

三、字体系列

1、CSS Fonts 字体属性

font-family——设置字体系列（默认微软雅黑）

eg：h2
font-szie——定义字体大小（默认16像素）

注：标题标签比较特殊，需要单独指定大小

eg：
```
p{ font-size: 16px;}
```
font-weight——设置文本字体的粗细

属性值：

normal：正常的字体相当于 number 为400

bold：粗体相当于 number 为700

bolder：IE5+ 特粗体

lighter：IE5+ 细体

number：IE5+ 100 | 200 | 300 |400 | 500 | 600 | 700 | 800 | 900

eg：
```
h2{ font-weight: normal;}
```
font-style——设置文本的风格

属性值：

normal：默认值，浏览器会显示标准的字体样式

italic：浏览器会显示斜体的字体样式

eg：
```
p{ font-style: italic;}
```
font属性复合写法

语法规范：font： font-style font-weight font-size/line-height font-family;

注：切记不要颠倒顺序,不需要设置的属性可以省略但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作业

eg：
```
body{ font: italic 700 16px  '微软雅黑';}
```

2、CSS Text 文本属性

color——定义文本的颜色

三种写法：

预定义的颜色值 eg: red;

十六进制 eg: #FF0000;

RGB代码 eg: rgb(255,0,0);

eg：
```
div{ color: red;}
```
text-align——设置元素内的文本内容水平对齐方式

属性值：

left：左对齐（默认值）

right：右对齐

center：居中对齐

eg：
```
div{ text-align: center;}
```
text-decoration——添加文本的修饰

属性值：

none：默认，没有装饰

underline：下划线

overline：上划线

line-through：删除线

eg：
```
a{ text-decoration: none; }
```

text-indent——文本缩进

eg：

p{ text-indent:10px;} #设置缩进的长度
p{ text-indent:2em;} #em是一个相对元素 相对于当前元素1个文字的大小，如果当前元素没有设置大小，则按照父元素的1个文字大小。

line-height——设置行间的距离（行高），可以控制文字行与行之间的距离

行间距=上间距+文本高度+下间距
单行文字垂直居中小技巧：文字行高等于盒子高度

四、CSS 引入方式

1、行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。

eg:

<div style="color: red;">test</div>

2、内部样式表（嵌入式）

内部样式表，就是在html页面写样式，但是单独写道style标签内部里面

eg:

<style>
        /* 选择器{样式} */
        p {
            color: red;
            font-size: 12px;
        }
    </style>

3、外部样式表（链接式）

样式单独写道CSS文件中，之后把CSS文件引入到HTML页面中使用

在HTM页面中，使用link标签引入这个文件

eg：

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

五、CSS 元素显示模式

HTML元素一般分为块元素和行内元素两种类型

1、块元素

常见的块元素有h1-h6、p、div、ul、ol、li等，其中div标签是最典型的块元素。

独占一行，高度、宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器盒子，里面可以放行内元素或者块级元素。
文字类元素内不能使用块级元素,eg:p 标签主要存放文字，因此不能放块级元素，特别不能放div

同理，h1-h6等都是文字类块级标签，里面也不能存放其他块级元素。

eg：

<div style="background-color: red; width: 100px;">1</div>
<div style="background-color: yellow; width: 100px;">2</div>

2、行内元素

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中 span 标签是最典型大的行内元素（内联元素）。

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本和其他行内元素
链接里面不能再放链接

特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全

eg:

 <!-- 设置宽度是无效的 -->
 <span style="background-color: red; width: 100px;">1</span>
 <span style="background-color: yellow; width: 100px;">2</span>

3、行内块元素

在行内元素中有几个特殊的标签——img、input、td,它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）

高度、行高、外边距以及内边距都可以控制（块级元素特点）

eg：

  <input type="text" style="width: 200px; height: 50px;">
  <input type="text" style="width: 200px; height: 20px;">

4、元素显示模式转换

转换为块元素：display：block；

<!-- 样式 -->
<style>
        a {
            width: 150px;
            height: 50px;
            background-color: skyblue;
            <!--转换为块元素 -->
            display: block;
        }
  </style>
    
  <a href="#">Sini</a>
  <a href="#">Sini</a>

转换为行内元素：display:inline;

 <!-- 样式 -->
    <style>
        div {
        /* 行内元素设置宽度高度无效*/
            width: 300px;
            height: 200px;
            background-color: violet;
            /* 块元素转换为行内元素 */
            display: inline;
        }
    </style>
<div>Sini</div>
 <div>Sini</div>

转换为行内块元素：display：inline-block；

<!-- 样式 -->
    <style>
        span {
            width: 300px;
            height: 20px;
            background-color: blue;
            display: inline-block;
        }
    </style>
     <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>

六、CSS 的背景

1、背景颜色

background-color：transparent|color

一般情况下，元素背景颜色默认值是 transparent （透明）

背景色半透明

background：rgba( 0, 0, 0, 0.3);

最后一个参数是alpha透明度，取值范围在0~1之间
背景半透明是盒子背景半透明，盒子里面的内容不受影响
IE9+版本浏览器才支持

2、背景图片

background-image：none|url(url)

3、背景平铺

background-repeat：repeat | no-repeat | repeat-x | repeat-y

repeat：背景图像在纵向和横向上平铺（默认）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺

4、背景位置

background-position：x y；

参数代表的是：x坐标和y坐标，可以用方位名词或者精确单位

参数值：

length：百分数|由浮点数和单位标识符组成的长度值
position：top|center|bottom|left|center|right 方位名词

如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐

5、背景图像固定（背景附着）

background-attachment：scroll | fixed