CSS学习

1.认识CSS

1.1什么是CSS

CSS：Cascading Style Sheet——层叠级联样式表

CSS：表现（美化网页）

字体；颜色；边距；高度；宽度；背景图片；网页定位；网页浮动...

1.2CSS发展史

CSS1.0：只包含字体颜色 CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想，网页变得简单 CSS2.1：加入了浮动和定位 CSS3.0：加入了圆角边框，阴影，动画...

1.3快速入门

规范：

​

​

​

​

sxc

​

/*外部样式*/

h1{

    color:yellow;

}

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器(重点)

2.1.1 标签选择器

标签选择器，会选择到页面上所有这个标签的元素

   

​

​

​

​

sxc

sxc

中国围棋第一人

​

结果如下：

2.1.2 类选择器

类选择器的格式 .class的名称{} 优点：可以多个标签归类，同一个class可以复用

   

​

​

​

围棋第一人

围棋第一人

围棋第一人

​

结果如下图所示：

2.1.3 id选择器

id选择器:id必须全局唯一！ 语法：#id名称{}

   

​

​

​

sxc

​

2.1.4三种选择器的优先级

id选择器>类选择器>标签选择器

2.2层次选择器

2.2.1后代选择器

后代选择器：在某个元素的后面

/*后代迭代器*/

      body p{

           background: green;

          }

2.2.2子选择器

子选择器：一代

/*子选择器*/

       body>p{

           background: red;

      }

2.2.3相邻兄弟选择器

相邻兄弟选择器：只有一个，相邻（向下）

/*相邻兄弟选择器*/

       .active+p{

           background: yellow;

      }

2.2.4通用选择器

通用选择器:当前选中元素的向下所有兄弟元素

/*通用选择器*/

       .active~p{

           background: yellow;

      }

2.3结构伪类选择器

/*ul的第一个元素*/

   ul li:first-child{

       background: red;

  }

​

   /*ul的最后一个元素*/

   ul li:last-child{

       background: green;

  }

​

/*选中p1：定位到父元素，选择当前的第一个元素

  选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，按顺序选择

    */

   p:nth-child(1){

       background: yellow;

  }

​

   /*选中父元素下的p元素的第一个*/

   p:nth-of-type(1){

       background: red;

  }

2.4属性选择器(常用+重点)

语法：属性名=属性值（正则）

=：绝对等于 *=：包含这个元素 ^=：以这个开头 $=：以这个结尾

 

​

​

​

​

​

​

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

​

​

结果如下：

3.美化网页元素

3.1为什么要美化网页

有效的传递页面信息 美化网页，页面漂亮，才能吸引用户 凸显页面的主题 提高用户的体验

3.2字体样式

font-family:字体 font-size:字体大小 font-weight：字体粗细 color:字体颜色

 

​

​

​

​

2-16勇夺第一

​

棋手战鹰，职业二段

​

在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩，率队成功降级，是当今中国围棋第一美女主播

​

   She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.

​

结果如下图所示：

3.3文本样式

3.3.1颜色

RGB：0-F RGBA A：0~1

3.3.2文本的对齐方式

text-align: center;居中

3.3.3首行缩进

text-indent: 2em;首行缩进两个字符

3.3.4行高

height line-height 行高与块的高度一致，就可以上下居中

3.3.5装饰

text-decoration:underline下划线

3.3.6文本图片水平对齐

img,span{ vertical-align: middle; }

​

​

​

​

2-16勇夺第一

​

棋手战鹰，职业二段

​

在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩，率队成功降级，是当今中国围棋第一美女主播

​

 She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.

​

战鹰美照

​

结果如下图所示

3.4超链接伪装

 

​

​

​

​

骑手战鹰

职业二段

 2-16勇夺第一

​

结果如下图所示：

3.5文本阴影

/*text-shadow；阴影颜色，水平偏移，垂直偏移，阴影半径*/

   #price{

     text-shadow: aquamarine 10px 10px 2px;

  }

3.6列表

#nav{

   width: 300px;

   background: bisque;

}

​

.title{

   font-size: 18px;

   font-weight: bold;

   text-indent:1em;

   line-height: 35px;

   background: red;

}

​

ul{

   background: bisque;

}

​

ul li{

   height: 30px;

   list-style: none;

   text-indent:1em;

}

​

a{

   text-decoration: none;

   font-size: 14px;

   color: #000;

}

​

a:hover{

   color: orange;

   text-decoration: underline;

}

3.7背景图片应用及渐变

 

​

​

​

​

​

​

3.8渐变

 

​

结果如下图所示：

4.盒子模型

4.1什么是盒子模型

4.2边框

边框的粗细 边框的样式 边框的颜色

 

​

​

​

​

4.3内外边距

margin+border+padding+内容宽度

盒子的计算方式：元素到底有多大

h2{

     font-size: 16px;

     background-color:aqua;

     line-height: 30px;

     margin: 0 2px 3px 5px;

  }

​

4.4圆角边框

下面给出一个最简单的圆角边框的案例：

 

​

​

​

​

结果如下图所示：

4.5盒子阴影

下面给出一个最简单的盒子阴影的案例：

​

​

​

​

结果如下图所示：

5.浮动

5.1 display

5.2 float

.layer01 {

border: 1px #F00 dashed;

display: inline-block;

float: right;

}

5.3父级边框塌陷问题

clear

/*

claer:right;右侧不允许有浮动元素

claer:left;左侧不允许有浮动元素

claer:both;两侧侧不允许有浮动元素

claer:none;

*/

解决方案：

增加父级元素的高度 #father {

border: 1px #000 solid;

height: 800px;

} 增加一个空的div标签，清除浮动

.clear{

clear: both;

margin: 0;

padding: 0;

}

overflow 在父级元素中增加一个  overflow：hidden;

父类添加一个伪类：after(推荐) #father:after{

   content: '';

   display: block;

   clear: both;

}

6.定位

6.1相对定位

加入下面这语句——position: relative;

相对于原来的位置，进行指定的偏移

top: -10px;

bottom: -10px;

left: 10px;

right: 10px;

完整代码如下：

 

​

​

​

​

结果如下图所示：

6.2方块定位练习

 

​

​

​

​

结果如下图所示：

6.3绝对定位

没有父级元素的前提下，相对于浏览器定位 假设父级元素存在定位，通常会相对父级元素进行偏移 在父级元素范围内移动

 

​

​

​

​

结果如下图所示：

6.4固定定位

 

​

​

​

​

​

结果如下图所示：

无论浏览器页面如何滑动，其位置不变

6.5 z-index

z-index：默认为0，最高为999

 

​

​

​

​

#content{

   width: 800px;

   padding: 0;

   margin: 0;

   overflow: hidden;

   font-size: 12px;

   line-height: 25px;

   border: 1px #000 solid;

}

ul,li{

   padding: 0;

   margin: 0;

   list-style: none;

}

#content ul{

   position: relative;

}

.tipBG,.tipText{

   position: absolute;

   width: 800px;

   top: 367px;

   height: 25px;

}

.tipText{

   color: #FFFFFF;

   z-index: 999;

}

.tipBG{

   background: #000;

   opacity:0.5;

}

结果如下图所示：

7.CSS3.0总结

好文阅读