【前端】:CSS-白红宇

【前端】:CSS

阅读量：5146 次

发布时间：2019-06-13

本文共 5260 字，大约阅读时间需要 17 分钟。

前言: 关于前端的第二篇博客，会写关于css的，内容比较基础。写完这篇博客，会做一个类似的界面。good luck to me~

一、css-引用样式

标签上设置style属性：

引用样式的三种方式:

第一种:在<body>直接定义与引用样式

1 
     
      aa

第二种: 在<head>头部加上下面代码(类似全局变量)，然后在<body>引用: <div class="cc">c1</div>。PS:(如果class="cc", 那它就会去全局里找.cc样式。)

第三种：将需要引用的样式存放在其它文件(eg:commons.css文件)中

然后在head头部导入样式: <link rel="stylesheet" href="commons.css" />, 再在body调用样式: <div class="cc">c1</div>

关于优先级，第一种最高(在body直接定义引用样式)，推存使用第三种。如果在head头部定义并且在body引用了两种样式，如下:

1  2     
      3     Title 4     12 13 14     
     
      15         AA16     
     
17

如果样式不冲突，则样式cc和ccc都应用，如果样式有冲突，那是优先应用cc还是ccc样式？？

当引用了两种有冲突样式，两种样式都是在head定义的，head头部中后一种定义的样式会把前一种覆盖，故上面代码引用的是ccc样式!!就算把第14行改为<div class="ccc cc">，仍是引用ccc样式。

运行界面:

二、css-选择器

选择器(即寻找标签): class选择器、标签选择器、ID选择器(这三种是重点，推荐使用class选择器)

1、class选择器（推荐）

1  2     
      3     Title 4     10 11 12      
     
      第一层
     
13      
     
      第二层
     
14      
     
      第三层
     
15

2、标签选择器

1  2     
      3     Title 4     10 11 12      
     
      第一层
     
13      
     
      第二层
     
14      
     
      第三层
     
15

标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容

3、id选择器

1  2     
      3     Title 4     10 11 12     
     
      第一层
     
13

把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名。

4、层级选择器

1  2     
      3     Title 4     10 11 12      
     
      第一层
     
13      14         
      
       span里的div
      
15      16      
     
      第三层
     
17

只让span里面的div标签应用样式，可多层嵌，类似于路径

5、组合选择器

1 2

3 Title 4 9 10 11 A12

表示a标签或者p标签可以引用定义的样式。逗号表示或

运行界面:

6、属性选择器

1  2     
      3     Title 4      7  8  9     10     11     12

三、css-应用样式

1、border

1 2     
     
      3         第一层边框4     
     
5 
     6

边框其他样式

运行界面:

2、float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

里面的div的宽度是以上一层div的宽度的标准的。

运行界面:

如果在父标签加上background-color:blue;会发现结果与上图一样，并没有显示出蓝色。

可以加上<div　style="clear:both;"></div>

运行界面:

3、display

块级标签和行内标签相互转换

运行界面:

注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

行内标签：无法设置高度，宽度，padding margin

块级标签：可以设置高度，宽度，padding margin

1 2     行内3     
     
      块级
     
4

注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

运行界面:

4、margin,padding

margin 　外边距 margin-top：上边距

padding 内边距

padding:20px 上下左右边距都是20px

margin:10px 20px 10px 10px 分别指上右下左

padding:10px 20px 指上下与左右)

margin:　　　　　　　　　　同上

运行示意图:

5、position

fixed固定到浏览器界面某个位置

返回顶部按钮:好多页面都有返回顶部的按钮，随着你页面的下拉，按钮永远在页面的右下角，下面就来实现：

View Code

实现动态效果，点击返回顶部:

1  2  3  4     
      5     Title 6  7  8     
     
      12         返回顶部13     
     
14     
     
      15         ddddddddddddd16     
     
17 18     23 24

固定菜单栏：

1  2  3  4     
      5     Title 6     22 23 24     
     
      固定头部
     
25     
     
      内容
     
26 27

运行界面:

relative+absolute（相对与relative固定路径）

加了position:relative; 则子标签的位置是相对父标签来定位的；如果去掉positon:relative;则子标签的位置是相对整个界面的定位的；

运行界面:

6、多层模态

用了position样式实现三层页面: 当页面整个浮动在上面的时候，如果想让页面整体覆盖底层页面，要用到top,right,left,bottom属性，而非margin-top、margin-left....

opacity:设置透明度（0~1之间）

z-index:设置层级（z-index越大，越放在顶层）

1  2  3  4     
      5     Title 6  7  8     
     
11 12     
     
18 19     
     
20 21

运行界面(top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px是对最顶层的div进行居中处理；):

7、hover

可以看一下的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；下面就来试试搞一下这个

1  2  3  4     
      5     Title 6     32 33 34     
     
      35         
      
       36             
       LOGO37             
       全部38             
       42区39             
       段子40             
       102441             
       爆文42         
      
43     
     
44     
     
      45     
     
46 47

其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时，字段样式变成新定义的样式

运行界面:

8、background

background-image

之前一直在用backgroud样式基本上都是设置背景颜色什么，其实background还可以设置背景为图片.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

1  2  3  4     
      5     Title 6  7  8     
     
10 11

运行示意图(实际图片只有3 X 789):

background-repeat

background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）

默认情况下 background-image 属性会在页面的水平与垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

1  2  3  4 
        5 菜鸟教程(runoob.com)  6 12 13 14 15     Hello World!
16 17 18

View Code

运行示意图:

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

1  2  3  4 
        5 菜鸟教程(runoob.com)  6 13 14 15 16     Hello World!
17 18 19

View Code

运行示意图:

background-position-x、background-position-y

为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:

1 2     
     
4

background-position-x表示看背景图片的窗口水平方向向右移动，background-position-y表示看背景图片的窗口垂直向下移动

CSS 背景属性总结

Property	描述
	简写属性，作用是将背景属性设置在一个声明中。
	背景图像是否固定或者随着页面的其余部分滚动。
	设置元素的背景颜色。
	把图像设置为背景。
	设置背景图像的起始位置。
	设置背景图像是否及如何重复。