CSS颜色表示法、CSS文本属性设置、边框属性设置、背景属性、元素溢出

最新推荐文章于 2022-07-20 11:14:54 发布

Chains-X ♔

最新推荐文章于 2022-07-20 11:14:54 发布

阅读量985

点赞数

分类专栏： WEB前端文章标签： web前端 CSS

本文链接：https://blog.csdn.net/mk1843109092/article/details/100066295

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css颜色表示法

颜色名表示，比如：red 红色，gold 金色
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0);
RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色的表示方式</title>
    <style>
        .item1{
            width:200px;
            height:200px;
            /*使用英文单词来表示颜色*/
            /*background-color:green;*/
            /*使用十六进制的值来表示颜色 以#开始 一共有六位值 前两个数值代表红色r 中间两位值代表绿色g 最后两位置代表蓝色b
                取值范围是0-9  A-F
                #000000 代表黑色 简写#000
                #ffffff 代表白色 简写#fff
            */
            /*background-color:#fff;*/
            /*background-color:#00ff00; !*#0f0*!*/
            /*background-color:#ff0000;  #f00 */
            /*background-color:#0000ff;   #00f */
            /*background-color:#67aaa8;*/

            /*使用rgb()模式 每一个值代表一种颜色 0-255*/
            /*background-color:rgb(0,0,255);*/

            /*
                带透明度rgba() rgb用是金属来表示 取值范围0-255
                最后一个值是透明度 取值范围0-1之间的小数 0代表完全透明 1代表完全不透明
            */
            background-color:rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div class="item1"></div>
</body>
</html>

css文本设置

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

line-height 设置文字的行高，如：line-height:24px;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体文本设置</title>
    <style>
        .fonts{
            /*字体颜色 color*/
            color:red;
            /*color:#369; */
            /*color:rgb(0,255,255);*/
            /*color:rgba(0,255,0,0.5);*/

            /*
                字体大小(设置自字号) font-size
                谷歌浏览器当中默认字体大小为16px
                谷歌浏览器当中字体最小为12px 当设置小于12px时 也是以12px来显示
            */
            font-size:30px;
            /*font-size:16px;*/
            /*font-size:3px;*/

            /*
                设置字体 font-family
                注意:如果你设置的字体用户系统中不存在,会以默认字体显示
               */
            font-family:'楷体';

            /*设置文字是否是斜体 font-style":italic*/
            font-style:italic;

            /*设置粗体 font-weight:bold*/
            font-weight:bold;

            /*设置行高 line-height:*/
            /*line-height:35px;*/

            /*text-indent:首行缩进 */
            text-indent:60px;
            /*text-align: 设置文本水平对齐方式 */
            text-align:center;

        }
        a{
            /*text-decoration:none;去除元素的下划线*/
            text-decoration:none;
        }

        .item2{
            width:500px;
            height:200px;
            background-color:green;
             /*
                利用line-height设置单行文本的垂直居中
               注意:在设置单行文本垂直居中的时候,值给父级元素的高度
               */
            line-height:200px;
            /*text-align:设置文本水平对齐方式 center left right*/
            /*text-align:center;*/
            text-align:right;
        }
    </style>
</head>
<body>
    <div class="fonts">
        pcolor 设置文字的颜色，如： color:red;
        font-size 设置文字的大小，如：font-size:12px;
        font-family 设置文字的字体，如：font-family:'微软雅黑';
        font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
        font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

        line-height 设置文字的行高，如：line-height:24px;
        text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
        text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
        text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
    </div>
    <div class="item2">
        line-height 设置文字的行高，如：line-height:24px;
    </div>
    <a href="http://www.bau.com">百度</a>

</body>
</html>

css边框属性

border:宽度 样式 颜色;
border-color;
border-style; 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
CSS3的样式
border-radius：圆角处理
box-shadow: x轴偏移 y轴偏移 模糊度 扩散成都 颜色 inset内阴影 设置或检索对象阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    <style>
        .item{
            width:200px;
            height:200px;
            /*
                border设置边框
                注意:设置边框的时候 有三个值 一个都不能丢
            */
            /*border:3px solid #000;*/
            /*border:dotted 3px #000;*/
            /*border:#f00 dashed 3px;*/

            /*单独设置上边框 solid实线*/
            border-top:3px solid red;
            /*单独设置下边框 dashed虚线*/
            border-bottom:3px dashed green;
            /*单独设置左侧的边框 dotted点线*/
            border-left:3px dotted blue;
            /*单独设置右侧的边框*/
            border-right:3px solid pink;
        }
    </style>
</head>
<body>
    <div class="item"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的圆角设置</title>
    <style>
        .box{
            width:200px;
            height:200px;
            border:1px solid red;
            /*
                border-radius设置圆角
                给一个值是设置四个角的圆角属性
                如果给四个值:
                    第一个值设置的是左上角
                    第二个值设置的是右上角
                    第三个值设置的是右下角
                    第四个值设置的是左下
                    (顺时针方向)
                 如果给两个值:
                    设置对角
                    第一个只值设置 左上和右下角
                    第二个值设置的是 右上和左下角

             */
            /*border-radius:50%;*/
            /*border-radius:10px 30px 50px 70px;*/
            border-radius:10px 70px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影效果</title>
    <style>
        .box{
            width:200px;
            height:200px;
            border:1px solid red;

            /*
                box-shadow设置阴影
                    第一个值设置水平方向位移 正直往右偏移 负值往左偏移
                    第二个值设置垂直方向位移 正直向下 负值向上
                    第三个值设置模糊程度
                    第四个值设置扩散范围
                    第五个值设置阴影颜色
                    第六个值设置是否为内阴影 如果为内阴影就设置inset
                        如果不设置内阴影可以不写
            */
            box-shadow:-10px -10px 20px 10px red inset;
        }
        .box:hover{
            box-shadow:10px 10px 20px 10px #4cae4c;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

背景属性

*background-color: 背景颜色
*background-image: 背景图片
*background-repeat：是否重复，如何重复?(平铺)
*background-position：定位

css3的属性                
*background-size: 背景大小，如 background-size:100px 140px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        .box{
            width:200px;
            height:200px;
            border:1px solid red;

            /*background-color:设置背景颜色*/
            /*background-color:red;*/
            /*background:green;*/

            /*background-image: 设置背景图片*/
            /*background-image:url(./images/56fcd25dbb4a8.jpg);*/
            /*background:url(./images/56fcd25dbb4a8.jpg);*/
            /*background:url(./images/2018-03-16_214501.gif);*/

            /*background-size:设置背景图片大小*/
            /*background-size:100% 100%;*/
            /*
                background-position:设置背景图片的位置
                    注意: 在网页当中让图片或者元素往上移动或者往做移动 都是负值
            */
            /*background-position:-275px -286px;*/

            /*设置图片是否重复background-repeat*/
            /*background-repeat:no-repeat;*/

            /*背景属性组合写法*/
            background:url(./images/2018-03-16_214501.gif) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：

1.visible 默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3.scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Chains-X ♔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS颜色表示法、CSS文本属性设置、边框属性设置、背景属性、元素溢出

Css颜色,文本字体css颜色表示法1.颜色名表示，比如：red 红色，gold 金色2.16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f003.RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0);4.RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-colo...
复制链接

扫一扫

专栏目录