48/49 前端--CSS样式

目录

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(内容):  盒子的内容,显示文本和图像。

48/49 前端--CSS样式

占用空间: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>

48/49 前端--CSS样式

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>
上一篇:尝试方舟编译器下对Java中标识符中文命名


下一篇:csp-s模拟测试49(9.22)养花(分块/主席树)·折射(神仙DP)·画作