首页
学习
活动
专区
工具
TVP
发布

css(2)

作者头像
GH
发布2019-12-16 15:25:37
1.4K0
发布2019-12-16 15:25:37
举报

一、css属性及用法

1.1css样式操作

块级标签的长度和宽度都是可以设置的,但是行级标签不可以直接设置长度和宽度。如:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div {
                width:200px;
                height:300px;
                background-color: fuchsia;
                }
            span{
                width:100px;
                height:150px;
                background-color: aqua;
            }

    </style>
</head>
<body>
    <div>
        我是div
    </div>
<span>
    我是span
</span>

1.2字体属性

1.2.1文字字体

font-family可以将多个字体名保存起来,如果浏览器不支持第一个字体会依次尝试后面的字体。

body{
            font-family:"华文行楷","微软雅黑","Arial", sans-serif

        }

注意:sans-serif必须要加上,否则不能用。

1.2.2字体大小

body{
            font-family:"华文行楷","微软雅黑","Arial", sans-serif;

            font-size:50px;
        }

可以更改整个body的字体,也可以只更改某一行的字体,以及字体的大小。

1.2.3font-weight

描述

normal

默认值,标准粗细

bold

粗体

bolder

更粗

lighter

更细(更淡)

100~900

设置具体的粗细

inherit

继承父元素字体的粗细

这里需要说明,上面这些都是font-weight的属性,具体用法和上面的字体、字体大小用法相同。

1.2.4文本的颜色

方法1:color用于修改文本的颜色,color直接选取对应的颜色单词。

方法2:使用pycharm的取色版取出色值,在取出的色值前面加#作为color的值,如:color: #FF00FF;

方法3:使用RGB设置颜色,如:color: rgb(255,255,255);

另外设置RGB值的方式还有color:rgba(123,123,123,0.6);最后一个值用来调节字体的透明度。

1.3文字属性

1.3.1文字对齐

text-again属性规定了元素中文本的水平对齐方式。

描述

left

左对齐,默认这种方式

right

右对齐

center

居中

justify

两端对齐

1.3.2文字装饰

text-decoration给文字添加特殊的效果。

描述

none

定义的标准文本

underline

文本下方画的一条线

overline

文本上方画的一条线

line

穿过文本的一条线

继承父元素的text-decoration的值

常用的应用场景:去掉a标签自带的的下划线。

a{
            text-decoration: none;
        }

1.3.3首行缩进

p{
            text-indent:40px ;
        }

1.4背景属性

添加背景图片

background-image: url("图片1.jpg");
background-color:black;只有不设置背景图片时可以用
background-repeat:repeat-x;只在水平方向上平铺背景图片
background-repeat:repeat-y;只在竖直方向上平铺背景图片
background-repeat:no-repeat;不平铺背景图片
这三个功能只有在背景图片小于网页大小时才能够使用,否则看不到效果,所谓平铺就是几个背景图片把规定的区域铺满。
background-position: center;背景图片的位置,可以设置x,y轴,也可以直接设置x,y轴的数值。
如background-position: 200px 200px;

可以对以上程序进行简写:

background: url("捕获.PNG")no-repeat left top;

1.5边框

1.5.1边框的属性

  • border-width
  • border-style
  • border-color

直接对其边框进行设置:

 #a1{
            border-width: 5px;
            border-style: solid;
            border-color: darkslateblue;
        }

可简写为如下:

border:5px solid darkslateblue;

边框样式

描述

none

无边框

dotted

点状虚线边框

dashed

矩形虚线边框

solid

实线边框

边框的上、下、左、右等的设置:

        border-top-style: dotted;
        border-top-color: cornflowerblue;
        border-right-style: dotted;
        border-bottom-style: dotted;
        border-left-style: none;

1.5.2border-radius

border-radius给边框的四角加弧度,当边框是正方形时,设置半径是边框的一半可以得到一个圆形,如果边框是长方形则可以得到一个椭圆。

border-radius: 50%;

1.6display属性

display用于控制HTML元素的显示效果。

描述

none

HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用

block

默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分,使行内元素变成块级元素

inline

按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。使块级元素变成行内元素

inline-block

使元素同时具有行内元素和块级元素的特点

display的none和visibility的hidden的区别:两者都可以隐藏元素,但是display将元素隐藏之后,元素所占用的位置也会被其他元素占用,而visibility的hidden只隐藏了元素,元素的位置还是存在的。

1.7css盒子模型

描述

margin

控制元素与元素之间的距离

padding

控制内容与边框之间的距离

border

内容外面的边框

content

内容

margin的设置与border的设置类似:

        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        margin-left: 20px;  

也可以使用简写方式:

margin: 10px 10px 15px 20px;
这里如果只写第一个参数默认所有的边框都按第一个参数,如果只写两个参数,默认第一个参数控制上下,第二个参数控制左右,如果写三个参数则第一个控制上,第二个控制左右,第三个控制下,如果四个全写则控制顺序为上、右、下、左(顺时针)。

此外padding的使用方式和margin相同。

1.8float(浮动)

在css中任何元素都可以浮动,浮动的特点:

浮动的框可以左右移动,直到碰到网页的边框或者另一个浮动的框,浮动的框可以覆盖固定的框,而且浮动的框会把原来框占有的位置让出来。(需要说明的,浮动的框可以覆盖固定的框,但是覆盖不了固定框的文本内容,这些文本内容会被挤出到浮动框下方显示)(另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div,但是浮动的div可以。)

浮动的应用场景:

浮动多用于页面的功能块的搭建,如小米商城的页面,就大量使用了浮动。

浮动常用的三种方式:l

  1. left 向左浮动
  2. right 向有浮动
  3. none 默认值,不浮动

1.8.1浮动带来的影响

会使浮动框的父标签塌陷,就是当边框是父标签的时,如果子标签设置为浮动,则外边框就会塌陷成一条线。

如:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:200px;
            height: 200px;
            background: cornflowerblue;
            float: right;

        }
        .c2{
            border: 1px solid black ;
        }

        #d2{
            width:200px;
            height: 200px;
            background: red;

        }

        p{
            width: 100px;
            height: 300px;
            display: block;
            background: blueviolet;
            float: left;
            margin-top: 0px;
        }

    </style>
</head>
<body>
<div id="d1" class="c2">
<div class="c1"></div></div>
<div id="d2">div2</div>
<p>p</p>
</body>

clear属性规定元素的哪一册不允许其他浮动元素。

描述

left

左侧不允许浮动元素

right

右侧不允许浮动元素

both

两侧不允许有浮动元素

none

默认值,允许浮动元素

inherit

从父元素继承clear属性的值

clear只会对自身起作用。

1.8.2清除浮动带来的影响

解决浮动带来的父标签塌陷问题。

主要有三种方式:

  1. 固定高度(给父标签加固定高度)
  2. 伪元素清除法(clearfix)
  3. overflow:hidden

伪元素清除法(使用较多):

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

具体使用如下程序:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:200px;
            height: 200px;
            background: cornflowerblue;
            float: right;

        }
        .c2{
            border: 1px solid black ;
        }

        #d2{
            width:200px;
            height: 200px;
            background: red;

        }

        p{
            width: 100px;
            height: 300px;
            display: block;
            background: blueviolet;
            float: left;
            margin-top: 0px;
        }

        .clearfix:after {
                  content: "";
                  display: block;
                  clear: both;
                }

    </style>
</head>
<body>
<div id="d1" class="c2 clearfix">
<div class="c1"></div></div>
<div id="d2">div2</div>
<p>p</p>
</body>

1.9overflow溢出属性

溢出发生的原因是标签的文本内容太多,标签的尺寸放不下这么多内容,导致标签文本内容的溢出。

描述

visible

默认值。内容不会被修剪,会呈现在元素框之外。

hidden

内容会被修剪,并且其余内容是不可见的。

scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

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

具体程序如下:

 #d2{
            width:200px;
            height: 200px;
            background: red;
            overflow: auto;

        }
可以直接在id,或者继承的类里写。

1.9.1 圆形头像示例

<head>
    <meta charset="UTF-8">
    <title>圆头像</title>
    <style>
        body{
            background-color: cornflowerblue;
        }
        .c3{
            height: 120px;
            width:120px;
            border: 5px solid black;
            border-radius: 50%;
            overflow: hidden;
        }
        img{
            width: 150%;
        }
    </style>
</head>
<body>
<div class="c3">
    <img src="小狗.png" alt="">
</div>
</body>

效果:

1.10定位(position)

1.10.1static

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

1.10.2relative(相对定位,了解)

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

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

1.10.3absolute(绝对定位,重要)

定义:相对于已经定位过得父标签再做定位。已经定位过指的是这个标签的position不是static状态。

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

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

粉红色框借助蓝色框进行了绝对定位,具体程序如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
           margin: 0px 0px ;
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;

        }
        .c2{
            position: absolute;
            height: 100px;
            width: 150px;
            background-color: fuchsia;
            left :100px;

        }

    </style>
</head>
<body>
<div class="c1">

</div>
<div class="c2"></div>
</body>

1.10.4固定定位(fixed)

固定定位实现的功能是比如侧边功能调,不管你怎么滑动网页,它都会固定在某一个位置不变。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
           margin: 0px 0px ;
        }
        .c1{

            height: 1000px;
            background-color: blue;
        }
        .c2{
            height: 1000px;
            background-color: fuchsia;
        }

        .c3{
            border: 5px solid black;
            background-color: aqua;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
<div class="c1">

</div>
<div class="c2"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">回到顶部</div>

</body>

脱离文档流:

浮动的元素、绝对定位、固定定位

不脱离文档流:

  相对定位

1.10.5z-index

#i2 {
  z-index: 999;
}

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁,数值大的压盖住数值小的,
  2. 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  3. z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位的元素,永远压住没有定位的元素。
  4. 从父现象:父亲怂了,儿子再牛逼也没用

1.10.6opacity

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-11-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、css属性及用法
    • 1.1css样式操作
      • 1.2字体属性
        • 1.2.1文字字体
        • 1.2.2字体大小
        • 1.2.3font-weight
        • 1.2.4文本的颜色
      • 1.3文字属性
        • 1.3.1文字对齐
        • 1.3.2文字装饰
        • 1.3.3首行缩进
      • 1.4背景属性
        • 1.5边框
          • 1.5.1边框的属性
          • 1.5.2border-radius
        • 1.6display属性
          • 1.7css盒子模型
            • 1.8float(浮动)
              • 1.8.1浮动带来的影响
              • 1.8.2清除浮动带来的影响
            • 1.9overflow溢出属性
              • 1.9.1 圆形头像示例
            • 1.10定位(position)
              • 1.10.1static
              • 1.10.2relative(相对定位,了解)
              • 1.10.3absolute(绝对定位,重要)
              • 1.10.4固定定位(fixed)
            • 1.10.5z-index
              • 1.10.6opacity
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档