CSS基础

一、 什么是CSS

  CSS: 层叠样式表，用于美化、渲染网页的一门技术.html+css开发一个完整的网页,使用css美化网页，可以使得设置样式的css代码和展示数据的html代码进行分离,可以增强网页的展示能力。

二、在HTML中引入CSS

1.通过style属性引入css(不推荐)

  通过标签上的style属性，可以为当前标签添加样式。这种方式是直接将css样式添加在标签上，如果样式过多，容易造成html页面结构的混乱，而且代码无法复用。因此这种方式不推荐大量使用。

<!-- 
    1.通过标签上的style属性给div设置样式 
    边框:2px solid red 
    字体大小:26px
    背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px;background:pink;">
    这是一个div...
</div>

2. 通过style标签引入css(推荐)

  在head标签内部添加一个style标签，在style标签内部可以书写css样式，这种方式是将所有的css代码集中在一个style标签内部统一管理。初步实现了html代码和css代码的分离。实现了代码的复用（文件内部复用）。推荐使用这种方式！

<!-- 2.通过style标签给span设置样式如下： 
    边框: 2px solid green
    字体大小: 30px
    字体加粗
-->
<style type="text/css">
    /* ****** CSS样式 ****** */
    span{
       border:2px solid green;
       font-size:30px;
       font-weight:bolder;
    }
</style>

3.通过link链接引入外部的css文件(推荐)

  将所有的css代码集中在一个单独的css文件中统一进行管理。真正的实现了css样式和html代码的分离。也可以在多个html中引入当前css文件，实现了代码的复用！因此这种方式也是推荐的！
demo.css文件内容如下:

@charset "UTF-8";
/* 指定当前css文件的编码为utf-8 */
p{
    border: 2px solid blue;
    color: red;
    font-family: "华文琥珀";
    text-indent: 

在html中引入css文件:

<!-- 引入demo.css文件 -->
<link  rel="stylesheet" href="demo.css"/>

三、CSS选择器

1.元素名、标签名选择器

格式: 元素名称/标签名称{ 若干css属性… }
根据元素的名称，选中指定的元素进行样式的设置

/* ----- 1.标签名选择器 ----- 
    将所有span标签的背景颜色设置为#DDA0DD, 设置字体大小为24px，
    字体加粗；*/
span{
    background:#DDA0DD;
    font-size:24px;
    font-weight:bolder;
}

2.类（class）选择器

格式: .class值{ 若干css属性… }
在标签上可以通过class属性为标签设置所属的类(组)，例如：

<span class="c1">span111</span> 
<span class="c1">span222</span> 
<span class="c1">span333</span>

具有相同class值的元素则为一组, 可以通过class值选中这一组的元素
再为这一组的元素设置相同的样式

/* ----- 2.class类选择器 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色
    设置为#b1eb0a, 字体颜色为#0b190b；
(2)将div下的span和内容为"span111"的span，背景颜色设置为
    #f3db09、字体颜色设置blue； */
.c1{ /* 表示选中所有class值为c1的元素 */
    background: #b1eb0a;
    color: #0b190b;
}
.c2{ /* 表示选中所有class值为c2的元素 */
    background:#f3db09;
    color: blue;
}

另外，一个元素可以设置多个class值，表示当前元素同时属于多个分组。例如：

<span class="c1 c2">span111</span>

多class的样式会同时作用在当前这个元素上。如果多个样式之间出现冲突（c1和c2同时给当前元素设置背景），后设置的样式会覆盖前面设置的样式。如下，由于c2在后面所以c2会覆盖c1

.c1{ /* 表示选中所有class值为c1的元素 */
    background: #b1eb0a;
    color: #0b190b;
}
.c2{ /* 表示选中所有class值为c2的元素 */
    background:#f3db09;
    color: blue;
}

3.id选择器

格式: #id值{ css样式 }
通过元素上的id属性可以为当前元素设置一个独一无二的编号，通过id值可以唯一的定位到一个元素。

/* ----- 3.id选择器 -----
    用id选择器将第一个p标签设置字体大小为28px，字体颜色
    为red, 首行文本缩进20px。 */
#p1{ /* 选中id为p1的元素 */
    font-size:28px;
    color: red;
    text-indent: 20px;
}

4.后代选择器

格式: 祖先元素 后代元素{ css样式… }
根据祖先元素选择器选中的元素内部, 匹配对应的后代元素。

/* ----- 4.后代选择器 -----
    为p元素内部的所有span元素，设置字体大小为20px,字体颜色
    为绿色,背景颜色为cyan; */
p span{/* 选中所有p元素内部的所有span元素 */
    font-size: 20px;
    color:green;
    background: cyan;
}

5.属性选择器

格式：选择器[属性条件…][…]{ css样式… }
在选择器选中元素的基础上，根据元素的属性条件选择元素。

/* ----- 5.属性选择器 -----
    为所有的文本输入框，设置背景颜色为pink、字体大小
    30px，首行缩进30px； */
input[type='text'][name='user']{
    /* 匹配元素名为input的并且type的值为text的元素 */
    background:pink;
    font-size:30px;
    text-indent:30px;
}

四、常用属性总结

1.文本属性

text-align:设置文本的水平排列方式
    left(居左) center(居中) right(居右)
text-indent:设置文本首行缩进
text-decoration:设置文本是否有下划线
    none(没有下划线) underline(有下划线)

2.字体属性

font-size: 设置字体大小
color: 设置字体颜色
font-weight: 设置字体粗细
    normal(正常) bold bolder(加粗)
font-family: 设置字体
    font-family:"微软雅黑";
line-height: 设置行高

3. 背景属性

background:背景颜色 背景图片 背景图片是否重复 背景图片的位置;
background-color:设置背景颜色
background-image:设置背景图片
background-repeat:设置背景图片是否以及如何重复排列
    repeat:默认值,重复排列
    no-repeat:不重复
    repeat-x:设置横向重复排列
    repeat-y:设置纵向重复排列
background-position:设置背景图片的位置

4.其他属性

Width:宽度
height:高度
display:设置元素是否以及如何显示
    none:设置元素隐藏    
    inline:行内元素的默认值,不可以设置宽高,但是可以和其他行内(块)元素处在同一行。
    block:块级元素的默认值,可以设置宽高，但是不可以和其他元素显示在同一行，默认独占一行。
    inline-block:行内块元素的默认值;