css(2)

一、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是完全不透明。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • taro+react导航条组件/自定义底部Tabbar导航

    最近在研究taro框架技术,发现官方提供的实例基本都是H5、小程序,对于RN端实例甚少,如是自己就实现了自定义导航栏+tabbar组件,支持自定义背景、颜色、左...

    andy2018
  • 设计模式七大原则

    累加器(Accumulator)是Spark提供的累加器,顾名思义,该变量只能够增加。由Driver端进行初始变量,Task再对声明的变量进行累加操作。

    俺也想起舞
  • IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • IT兄弟连 HTML5教程 CSS3属性特效 边框

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • 黑产代码解密--利用canvas加载代码

    前段时间获取到黑产的一些代码,不得不感叹黑产的代码实在在写的是好得很,思路巧妙,环环相扣。不得不说,技术不好,黑产都做不了了。虽然分析了好多天,但是也只是一知半...

    madneal
  • 同样做前端,为何差距越来越大?

    过去一年,阿里巴巴新零售事业群支撑的数据相关业务突飞猛进,其中两个核心平台级产品代码量急速增长,协同开发人员增加到数十人。

    IT大咖说
  • IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • IT兄弟连 HTML5教程 CSS3属性特效 圆角

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • C#程序员的福音来啦,Blazor框架概览

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    乐百川
  • Spark中累加器的陷阱

    累加器(Accumulator)是Spark提供的累加器,顾名思义,该变量只能够增加。由Driver端进行初始变量,Task再对声明的变量进行累加操作。

    俺也想起舞

扫码关注云+社区

领取腾讯云代金券