欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端教程(9)css入门教程-css属性设置

程序员文章站 2022-06-19 10:50:35
一 宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。 块级标签才能设置宽度,内联标签的宽度由内容来决定。 二 字体属性 1、font-weight:文字粗细 2、font-style:文字风格 3、font-size:文字大小 4、font-family:文字字体 5 ......

一 宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度,内联标签的宽度由内容来决定。

二 字体属性

1、font-weight:文字粗细

取值 描述
normal 默认值,标准粗细
bord 粗体
border 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值

2、font-style:文字风格

 normal 正常,默认就是正常的
 italic 倾斜 

3、font-size:文字大小

fs:一般是12px或13px或14px

注意:
1、通过font-size设置文字大小一定要带单位,即一定要写px

2、如果设置成inherit表示继承父元素的字体大小值。

4、font-family:文字字体

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

常见字体:
serif 衬线字体
sans-serif 非衬线字体
中文:宋体,微软雅黑,黑体

注意:
    1、设置的字体必须是用户电脑里已经安装的字体,浏览器会使用它可识别的第一个值。
    2、如果取值为中文,需要用单或双引号扩起来

5、文字属性简写

/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: 'serif','微软雅黑';*/
简写为
font: bolder italic 50px 'serif','微软雅黑'; 

 

6、color:文字颜色 

取值 格式 描述
英文单词

color:red;

大多数颜色都有对应的英文单词描述,但英文单词终究有其局限性:无法表示所有颜色

rgb color:rgb(255,0,0)

什么是三原色?
red,green,blue
什么是像素px?
对于光学显示器,一整个屏幕是有一个个点组成,每一个点称为一个像素 
点,每个像素点都是由一个三元色的发光元件组成,该元件可以发出三种颜 
色,red,green,blue。
发光元件协调三种颜色发光的明亮度可以调节出其他颜色
格式:rgb(255,0,0);
参数1控制红色显示的亮度
参数2控制绿色显示的亮度
参数3控制蓝色色显示的亮度

数字的范围0-255,0代表不发光,255代表发光,值越大越亮

红色:rgb(255,0,0)
绿色:rgb(0,255,0)
蓝色:rgb(0,0,255)
黑色:rgb(0,0,0) # 所有都不亮
白色:rgb(255,255,255) # 所有都最亮
灰色:只要让红色/绿色/蓝色的值都一样就是灰色,而且三个值越小,越偏 
黑色,越大越偏白色

rgba color:rgba(255,0,0,0.1);

rgba到css3中才推出,比起rgb多了一个a,a代表透明度
a取值0-1,取值越小,越透明

十六进制 color: #FF0000;

#FFEE00 其中FF代表R,EE代表G,00代表B
只要十六进制的颜色每两位都是一样的,那么就可以简写为一个,
例如#F00 等同于#FF0000 

 

三 文本属性

1、text-align:规定元素中的文本的水平对齐方式。

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐

2、text-decoration:文本装饰

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

3、line-height:行高

前端教程(9)css入门教程-css属性设置

前端教程(9)css入门教程-css属性设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p {
            width: 500px;
            height: 200px;
            background-color: yellow;

            text-align: center;

            text-decoration: underline;

            line-height: 200px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>

<div>
    <p>hello英雄不问出处,流氓不论岁数</p>
    <a href="#">点我啊</a>
</div>

</body>
</html>

示例
示例

四 背景属性

注意:没有宽高的标签,即便设置背景也无法显示

属性 描述
background-color
设置标签的背景颜色的

background-color: rgb(0,255,0);

background-color: #00ffff;
background-image
设置标签的背景图片

background-image: url("images/2.jpg");

background-image: url("图片网址");

注意:如果图片的大小没有标签的大小大,那么会自动在水平和锤子方向平铺和填充

background-size
设置标签的背景图片的宽、高

 background-size: 300px 300px;

 background-size: 100% 100%;

background-repeat
设置标签的背景图片的平铺方式
background-repeat: repeat; #默认值,在垂直和水平方向都重复
background-repeat: no-repeat; #不重复,背景图片将仅显示一次
background-repeat: repeat-x; #背景图片将在水平方向平铺
background-repeat: repeat-y; #背景图片将在垂直方向平铺
应用:可以在服务端将一个大图片截成小图片,然后在客户端基于平铺属性将小图重复
这样用户就以为是一张大图,如此,既节省了流量提升了速度,又不影响用户访问
例如很多网站的导航条都是用这种手法制作的
background-attachment
设置标签的背景图片在标签中固定或随着页面滚动而滚动
background-attachment: scroll; #默认值,背景图片会随着滚动条的滚动而滚动
background-attachment: fixed; #不会随着滚动条的滚动而滚动
background-position
前端的坐标系":
         -------------------->x轴
|
|
|
|
|
|
y轴

图片默认都是在盒子的左上角,
background-position:属性,就是专门用于控制背景图片的位置

background-position:水平方向的值,垂直方向的值

1、具体的方位名词

水平方向:left,center,right
垂直方向:top,center,bottom
   如果只设置了一个关键词,那么第二个值就是"center"。

2、百分比
  第一个值是水平位置,第二个值是垂直位置。
  左上角是 0% 0%。右下角是 100% 100%。
  如果只设置了一个值,另一个值就是50%。
3、具体的像素(一定要加px单位)
    例如:30px,50px等等
  第一个值是水平位置,第二个值是垂直位置。
  左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
  如果只设置了一个值,另一个值就是50%。
  可以混合使用%和position值。
inherit
设置从父元素继承background属性值
以上背景属性的值均可以设置为inherit,代表从父元素继承background属性 
背景缩写  
body { 
  background: red url(xx.png) no-repeat fixed center/300px 300px; 
}

1、背景属性缩写

前端教程(9)css入门教程-css属性设置

前端教程(9)css入门教程-css属性设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        div {
            width: 500px;
            height: 500px;
            /*background-color: red;*/
            /*background-image: url("http://images2.10qianwan.com/10qianwan/20180529/b_0_201805291917346718.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: right bottom;*/
            /*background-size: 100px 100px;*/
            background: red url("http://images2.10qianwan.com/10qianwan/20180529/b_0_201805291917346718.jpg") no-repeat right bottom/100px 100px;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>
示例

2、背景图片和插入图片的区别

#1、
背景图片仅仅只是一个装饰,不会占用位置,
插入图片会占用位置

#2、
背景图片有定位属性,可以很方便地控制图片的位置,
而插入图片则不可以

#3、
插入图片语义比背景图片的语义要强,所以在企业开发中如果你的图片
想被搜索引擎收录,那么推荐使用插入图片
前端教程(9)css入门教程-css属性设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510214613754-737636530.jpg");
            background-repeat: no-repeat;
            background-position: right bottom;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: green;
        }

    </style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
    <img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510214613754-737636530.jpg" alt="">
</div>
</body>
</html>

练习
小练习

3、背景图片练习

。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

前端教程(9)css入门教程-css属性设置

这是一个有用的工具,它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

 

这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

前端教程(9)css入门教程-css属性设置

不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

 

这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法,那就是对容器 div 进行浮动:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

 

这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。

十 verflow溢出属性 

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

 

  • overflow(水平和垂直均设置)
  • overflow-x(设置水平方向)
  • overflow-y(设置垂直方向)

 圆形头像示例

前端教程(9)css入门教程-css属性设置
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 100%;
      overflow: hidden;
    }
    .header-img>img {
      max-width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>

圆形头像示例
示例代码讲解

十一 定位(position)

static

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

relative(相对定位)

相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。

absolute(绝对定位)

定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed(固定)

fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

示例代码:

前端教程(9)css入门教程-css属性设置
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回顶部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>
返回顶部示例代码

十二 z-index

 

#i2 {
  z-index: 999;
}

 

设置对象的层叠顺序,数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。

前端教程(9)css入门教程-css属性设置
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义层叠框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

自定义模态框示例
自定义层叠框

十三 opacity

用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。