CSS介绍

[基于达内教育的学习,总结提炼]

一. css概述

css:层叠样式表, 用来美化html页面的, 比如html为盖房子,css则为装修. css增强了网页的显示能力，并且css代码可以和html代码完全分离.

二. 在html页面引入css

2.1.通过标签上的style属性引入

绝大部分标签都提供style属性，可以通过style属性设置当前标签的css样式这种引入方式不推荐大量使用，会造成页面的混乱.

2.2.通过style标签引入

在head中，可以提供一个style标签，标签内部可以写入css样式

初步实现了css代码和html代码的分离.

2.3.引入外部的css文件

通过在head标签内添加link标签引入外部的css文件

Demo.css: 

这种方式真正的实现了css代码和html代码的分离

 三. 选择器

4.1.基本选择器

4.1.1.标签名选择器

通过标签的名称选中指定名称的标签进行样式的修饰

格式: 元素名{}, 如: span{}

<span></span>

<span></span>

Exer: 将所有span标签的背景颜色设置为#DDA0DD, 设置字体大小为16px

4.1.2.类选择器

通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过标签名选择器选中这一类的标签进行修饰.

格式: .类名{ css属性 }, 如: .c1{}

<div class=”c1”></div>

<p class=”c1”></p>

<span class=”c1”></span>

Exer: 2.类选择器
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#8FBC8F, 字体颜色为绿色
(2)将div1下的span和内容为"span111"的span字体颜色设置blue,背景颜色设置为#F0E68C

 4.1.3.id选择器

通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签

格式: #id值{ css属性 }, 如: #d1{}

<div id=”d1”></div>

Exer: 用id选择器将第一个p标签设置字体加粗, 首行文本缩进20px.

4.2.扩展选择器

4.2.1.后代选择器

在父选择器选中的元素内部, 再选中指定的后代元素进行修饰

格式: 父选择器 后代选择器{  }

如: 选中div下所有的后代span -> #d1 span{}

Exer: 将div下所有的span标签的字体大小设置为22px, 背景颜色设置为#DDA0DD

4.2.2.子元素选择器

在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰

格式: 父选择器>子元素选择器{  }

如: 选中div下所有的子元素span -> #d1>span{}

Exer: 将div下所有的span子元素标签的字体大小设置为16px, 背景颜色设置为#DEB887

4.2.3.分组选择器

可以将多个选择器选中的元素统一来设置样式

格式:选择器1,选择器2,选择器3,…选择器n{}

Exer: 将span1、span2和 p标签下的 span的背景颜色设置为 #F4A460

4.2.4.属性选择器

可以通过属性条件选中元素进行修饰

格式: 选择器[属性条件..]{}

如: 选中所有的普通文本输入框 -> input[type=’text’]{}

<input type=”text” name=”xx”/>

<input type=”submit” name=”xx”/>

Exer: (1)将所有有class属性的元素的边框设置为2px、实线、灰色.
         (2)将所有的type="text"的<input>标签的背景颜色设置为red, 设置字体首行缩进10px

4.2.5.兄弟选择器

如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.

格式: 大哥+小弟{  }

Exer: (1)将id为p1元素后面的p元素的背景颜色设置为 #DB7093S

4.2.6.伪元素选择器

伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态

状态分为如下几种:

:link  表示元素未被点击时的状态

:hover 表示光标(鼠标)悬停时的状态(掌握!)

:active   表示元素被点击时的状态

:visited   表示元素被点击之后的状态

Exer: 设置a标签(去掉边框)
            未点击时的状态是{ 
                font-size:24px;
                text-decoration: none;/* 无下划线 */
            }
            光标移入的状态是{
                color:green;
                font-size:36px;
                text-decoration: underline;/* 有下划线 */
            }
            被点击时的状态是{
                color:#8FBC8F;
                font-size:50px;
                text-decoration: none;/* 无下划线 */
            }
            被点击后的状态是{
                color:gray;
                font-size:24px;
            }

5.盒子模型

/*外边距*/

margin: 20px;/*四边*/

margin: 20px 40px;/*上下、左右*/

margin: 20px 30px 40px 50px;/*上右下左*/

margin-top: 40px;

margin-bottom: 20px;

margin-left: 10px;

margin-right: 30px;

注意: 垂直外边距合并的现象:

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

/*边框*/

border: 10px solid pink;

border-bottom: 20px solid grey;

border-top: 20px solid green;

border-left: 20px solid blue;

border-right: 20px solid yellow;

/*内边距*/

padding: 20px;/*四边*/

padding: 30px 10px;/*上下、左右*/

padding: 10px 20px 30px 40px;/*上右下左*/

padding-bottom: 20px;

padding-left: 20px;

padding-right: 20px;

padding-top: 20px;