1. 技术文章
  2. 48/49 前端--CSS样式

48/49 前端--CSS样式

由 不问归期 提交于 2019-11-29 22:16:03

目录

CSS样式

1. 高度宽度

width:200px;    # 宽度。50% 按父级标签的宽度百分比来算
height:200px;   # 高度

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

2. 字体属性

文字字体 font-family

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

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

文字大小 font-size

默认16px。

p {
  font-size: 14px;
}

文字字重(粗细) font-weight

font-weight用来设置字体的字重（粗细）。

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

字体颜色

https://htmlcolorcodes.com/zh/yanse-ming/

rgb表示法：
    rgb:red green blue
    color:rgb(255,255,255); 白色
    color:rgb(0,0,0);       黑色

16进制：F最高，0最低
    color:#000000-#FFFFFF;
    
单词表示：
    color:red green;

rgba()表示：
    # a表示透明度  0-1，0是完全透明

3. 文本

文本对齐 text-align

text-align: center;
text-align: right;
text-align: left;
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

line-height:200px # 垂直居中 ，行高的px=200px（是height设置的px，即容器高度）

文字装饰 text-decoration

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

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进 text-indent

将段落的第一行缩进 32像素：

p {
  text-indent: 32px; #首行缩进两个字符，一个字在页面上的默认大小为16px
}

text-indent: 2em;   # em是一个相对单位，相对当前字体大小

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
    <style>
        p{
            background-color: yellow;
            height: 200px;
            width: 200px;
            font-family: '楷体','仿宋';
            font-size:24px;
            font-weight: 600;
            /*color: red;*/
            color:RGB(255,0,0);

            text-align: center;
            /*text-align: right;*/
            text-decoration: line-through;
            line-height: 200px;
        }

        a{
            text-decoration: none;
        }

        div{
            text-indent: 2em;
        }

        div:first-letter{
            font-size: 32px;
            color: red;

        }

        span{
            background-color: pink;
            height: 200px;
            width: 200px;
            font-family: '微軟正黑體';
        }
    </style>
</head>
<body>
<p>
    唧唧复唧唧
</p>

<a href="http://baidu.com">百度</a>

<div>
    做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。
</div>

<span>
    木兰
</span>
</body>
</html>

4. 背景图 background

*背景颜色*/background-color: red;
/*背景图片*/
background-image: url('1.jpg');  #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了
background-repeat: no-repeat; 
/* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片。

background-attachment:fixed;    # 设置固定

浏览器位置坐标：

left top center top right top
left center center center right center
left bottom center bottom right bottom 
# 简写：
background:yellow url('1.jpg') no-repeat center center;
background:背景 图片 方式 位置;

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 600px;
            height: 600px;

            background-color: pink;
            background-image: url("https://cn.bing.com/th?id=OIP.TJf26WLC_G6tlx7f3jl3UAAAAA&pid=Api&rs=1");
            background-repeat: no-repeat;   /*不铺满*/
            /*background-repeat: repeat-x;    !*x铺满*!*/
            /*background-repeat: repeat-y;    !*y铺满*!*/
            background-position:center center;
            /*background-position: 100px 100px;*/

        }
        .c3{
            width: 600px;
            height: 600px;

            background: #b2fffd
                url("https://tse1-mm.cn.bing.net/th?id=OIP.7O5T9faA_Ywbd7EIKzQtdQHaHa&w=209&h=209&c=8&rs=1&qlt=90&dpr=1.25&pid=3.1&rm=2")
                no-repeat 100px 100px;

            background-attachment:fixed ;


        }

        .c2{
            width: 600px;
            height:600px;

            background: yellow url("https://www.bing.com/th?id=OGC.3543af710332ffad155374652914b951&pid=1.7&rurl=https%3a%2f%2fws1.sinaimg.cn%2flarge%2f9150e4e5gw1faey3cbk9gg204x04xmx8.gif&ehk=36QSjWAOIuPGuWFVzq9JgA")
                no-repeat center center;

        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c3"></div>
<div class="c2"></div>

</body>
</html>

5. 边框 border

属性：

border-style:       # 样式
border-color:       # 颜色
border-width:       # 宽度

边框样式style：

值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。 
# 简写
border: 10px dotted red;
宽度  样式  颜色
# 左边框：
border-left:10px dotted red;
# 右边框：
border-right:10px solid red;

设置圆角：

border-radius: 5%;      # 设置圆角，50%是圆
width:200px;
hegith:200px;   #可修改高、宽度，变椭圆。

调试玩法：document.body.contentEditable=true

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            /*border-width: 1px;*/
            /*border-style: solid;*/
            /*border-color: red;*/
            /*border-radius: 5%;*/
            text-align: center;

            /*border:10px dotted red ;    !*简写*!*/

            border-left:10px dotted red;

        }
    </style>

</head>
<body>
<div class="c1">
    唧唧复唧唧

</div>
</body>
</html>

6. display属性

设置控制HTML元素的显示效果。

将块级变成内联inline， 将内联变成块级block.

值 意义
display:none HTML文档中元素存在，但是在浏览器中不显示(隐藏)。一般配合JavaScript代码使用。
display:block 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:inline 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:inline-block 使元素同时具有行内元素和块级元素的特点。行内块。

display:none与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            height:200px;
            width:200px;
            border:1px solid red;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none;      /*隐藏*/

            /*visibility:hidden;*/

        }

        span{
            height:200px;
            width:200px;
            border: 1px solid green;
            display: block;
        }
        p{
            height:200px;
            width:200px;
            border: 1px solid blue;
            display: inline;
        }
    </style>
</head>
<body>
<div>div1</div>
<span>span1</span>
<p>p1</p>
</body>
</html>

7. 盒子模型

在CSS中，每个标签都可以称为一个盒子模型。

1.margin:    外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2.padding:       内边距：用于控制内容与边框之间的距离；   
3.Border(边框):   围绕在内边距和内容外的边框。
4.Content(内容):  盒子的内容，显示文本和图像。

1568193305264

占用空间：content+padding+border

margin外边距

在chorme浏览器调试窗口中，会发现chorme浏览器body标签自动加了8px。

.test{
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
    }
    
简写：顺序 上右下左
.test{margin:5px 10px 15px 20px} 

body{margin:0;}     # body的上下左右的margin都设置为0.

.test{margin:0 auto;}   #上下0像素，左右自适应，居中的效果
如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为10


如果将上下标签都设置了margin，会按照最大的来间隔两者，并不是相加。

padding内边距

.test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写：顺序 上右下左
.test {
  padding: 5px 10px 15px 20px;
}


补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边。

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            width: 200px;
            height: 200px;
            border:2px solid red;
            padding: 20px 15px 10px 5px;
            margin: 5px 10px 15px 20px;
        }
    </style>
</head>
<body>
<div class="test"></div>
</body>
</html>

1568193038126

8. float 浮动

一般用来进行页面布局。浮动会脱离正常文档流。

设置浮动后，标签不独占一行,可以设置高宽度。

float:rigth;
float:left;

浮动会造成父级标签塌陷

解决方式1：父级标签设置高度。

解决方式2：在下面的其他标签加：  clear:both/left/rigth ; # 清除浮动

解决方式3：伪元素方式，自己清除浮动

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

<div class='c1 clearfix'></div>

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

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: red;
            float:right
        }

        .c2{
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: pink;
            float:left
        }
        .c3{
            height: 200px;
            text-align: center;
            background-color: green;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="c1">111</div>
    <div class="c2">222</div>
</div>

<div class="c3">333</div>
</body>
</html>

9. overflow 溢出属性

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

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height:200px;
            text-indent: 2em;
            border:1px solid red;
            /*overflow: visible;*/
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div>
    做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。

</div>
</body>
</html>

10. 定位 position

position: relative/absolute/fixed;
top/right/bottom/left:100px;    # 0的时候不用加px


static默认没有定位。
relative相对定位：相对自己原来的位置移动，移动后原来的空间还占着
absolute绝对定位：不占空间
    如果没有父级盒子或者有父级，但父级没有设置position定位，那么绝对定位是相对于整个html页面的边界定位；优先级提高；
    如果有父级盒子且设置了position，那么绝对定位是相对于父级盒子的的边界定位。（父相子绝）
    
    不占用自己原来的位置，移动时如果父级标签以及祖先辈都没有设置相对定位，就会按照整个html文档进行移动。优先级会提高。
    如果父级标签以及祖先辈设置了相对定位，会按照父级标签移动。
        
fixed固定定位：相对于整个窗口。

z-index 层级

z-index:正整数；

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

opacity 标签透明度

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

opacity:给整个标签设置透明度.

rgba() :是给属性（如背景）设置透明度.

圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border:1px solid red;
            overflow: hidden;
        }

        div img{
            width: 100%;
        }

    </style>
</head>
<body>

<div class="c1">
    <img src="2.jpg" alt="">
</div>

</body>
</html>
标签
css边框
html代码
background
绝对定位
边框背景
border
text-align
padding
css样式
margin
css
display
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!