CSS中的常用样式

最新推荐文章于 2022-07-24 15:29:42 发布

少年西西

最新推荐文章于 2022-07-24 15:29:42 发布

阅读量480

点赞数

分类专栏： D_JavaWeb阶段 # D1_HTML与CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45554909/article/details/111463923

版权

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章 2 订阅

订阅专栏

D1_HTML与CSS

16 篇文章 0 订阅

订阅专栏

1、列表样式

列表去除修饰 ul{ list-style:none; }
ul:无序列表
li:有序列表
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

/*
list-style-type:
none:不使用项目符号
disc:默认值。实心圆
circle:空心圆
square:实心方块
 */
ul{
    list-style-type: square;
}
<ul>
    <li>中国</li>
    <ul>
        <li>北京</li>
        <li>长沙</li>
        <li>上海</li>
    </ul>
    <li>韩国</li>
    <li>美国</li>
</ul>

在这里插入图片描述

2、字体颜色

color：颜色
颜色可以写颜色名如：black,blue,red,green 等

3、宽度 width:19px;

宽度可以写像素值：19px；
也可以写百分比值：20%；

4、高度 height:20px;

高度可以写像素值：19px；
也可以写百分比值：20%；

5、背景颜色

background-color:#0F2D4C :no-repeat center 不重复且居中

6、字体样式：

color：#FF0000；字体颜色红色
font-size：20px; 字体大小

7、红色 1 像素实线边框 border：1px solid red;

8、DIV 居中 margin-left:35%; margin-top：18%;

<div style="margin-left: 35%;margin-top:18%;">
        <h2 style="color: black;"> 你暂没有订单哦~快去看看心仪的车辆吧~</h2>
 </div>

在这里插入图片描述

9、文本居中： text-align:center;

div{
    color:red;
    font-size: 20px;
    width: 200px;
    height: 100px;
    background-color: #abff53;
    border:1px solid red;
    margin-left: auto;
    margin-right:auto;
    text-align: center;
}
<div>字体、颜色、背景、边框、位置</div>

在这里插入图片描述

10、超连接去下划线 text-decoration:none;

<a style="text-decoration: none" href="http://www.baidu.com">百度</a>

在这里插入图片描述

11、表格细线

table{ 
  border:1px solid black;/*设置边框*/
 border-collapse:collapse;/*将边框合并*/ 
} 
td,th{ 
border:1px solid black;/*设置边框*/
}
table{
    border:1px solid black;
    border-collapse: collapse;

}
td,th{
    border:1px solid black;
    text-align: center;
}
<table>
    <tr>
        <th>学生姓名</th>
        <th>学生性别</th>
        <th>学生年龄</th>
    </tr>
    <tr>
        <td>张</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>18</td>
    </tr>
</table>

在这里插入图片描述

12、盒子模型

在这里插入图片描述


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


    <style>
        div{
            border: 1px solid red;
            width: 100px;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*外边距*/
           /* margin: 50px; */
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*
                设置盒子的属性，让width和height就是最终盒子的大小
             */
            box-sizing: border-box;
        }

        .div3{
            float: left;
        }

        .div4{
            float: left;
        }

        .div5{
            float: right;
        }

    </style>
</head>
<body>


    <div  class="div2">
            <div class="div1"></div>

    </div>

    <div class="div3">aaaa</div>
    <div class="div4">bbbbb</div>
    <div class="div5">cccc</div>
</body>
</html>

在这里插入图片描述

13、定位

定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。

static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。
relative很像static，但可用top、right、bottom和left属性来偏移原始位置。
absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。
fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。

<style>
#position {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 40px;
	margin: -20px 0 0 -75px;
	padding: 0 10px;
	background: #eee;
	line-height: 2.4;
}
</style>

少年西西

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS中的常用样式

1、列表样式列表去除修饰 ul{ list-style:none; }颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#/*list-style-type:none:不使用项目符号disc:默认值。实心圆circle:空心圆square:实心方块 */ul{ list-style-type: square;}<ul> <li>中国</li> <ul>
复制链接

扫一扫