css中的常用样式(字体、列表、背景)、布局、标签盒子模型

一、css常用样式:

文本:

1
2
3
4
5
6
#dd{
    text-align:center;   注;文本居中
    text-decoration: underline;   注:添加下划线
    text-decoration: none; 注:去掉下划线
    text-indent:50px;    注:首行文本缩进50像素
}

字体类型:

1
2
3
4
5
6
#dd{
    font-family:"Times New Roman";  注:字体类型(微软雅黑)
    font-style:italic;  注:字体类型为倾斜
    font-size:40px;     注:字体大小   网页字体一般为1214
    font-weight: bold;  注:字体加粗
}

列表:

1
2
3
4
5
#dd li{
    list-style-type: none; 注:无序列表
    list-style-image: url('');   注:序号换成图片
    list-style-position:outside;   注:序号在div外面
}

背景:

1
2
3
4
5
6
7
8
9
10
11
#dd div{
    background: url('../1.png') no-repeat center; 注:简写方式
    width: 100%;
    height: 80px;
    background-color:#b0c4de; 注:背景颜色
    background-image:url('../g.jpg'); 注:背景图片(默认为平铺)
    background-repeat:no-repeat;  注:不平铺
    background-position:0% 0%;  注:背景图像的起始位置,第一个值是水平位置,第二个值是垂直。
    background:#ffffff url('img_tree.png') no-repeat center; 注:简写
    line-height:50px;   注:垂直居中,跟高的值一样
}

 特殊:

光标样式:cursor:

隐藏样式:display:none (无本身位置)

                 vibility:hidder(有本身位置)

二、布局:

1、浮动:给要浮动的元素加父标签,设定父标签的宽高,随便在父标签里浮动。

1
2
3
4
5
6
7
.dd{
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
    float: left;  注:从左往右浮动
}

2、定位::position

(1)fixed:相对窗口定位(定死),不在乎嵌套,无本身位置

1
2
3
4
5
6
7
8
#position{
    width: 100px;
    height: 30px;
    background: blue;
    position: fixed;
    right: 0px;
    bottom: 0px;
}

(2)absolute:相对于最近的有position属性的父标签定位,最终标签为body,无本身位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#relative{
    width: 100px;
    height: 30px;
    background: blue;
    position: relative;
}
#absolute{
    width: 100px;
    height: 30px;
    background: blue;
    position: absolute;
    left: 100px;
    top: 200px;
}
注:这个就是相对于relative标签定位

(3)relative:相对自身定位,常用在微调和父标签,有本身位置

三、盒子模型

psdding:内边距 ;     border边框;    margin:外边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#{
    border-width; 注:边框宽度
    border-style;  注:边框类型
    border-color;  注:边框颜色
    border:1px solid red;   注:简写
}
 
 
#{
    border-top-style:dotted;  注:上边框类型
    border-right-style:solid;   注:右边框类型
    border-bottom-style:dotted;   注:底边框类型
    border-left-style:solid;   注:左边框类型
}
注:这是四个边框分别类型,设置两个分别代表:上下;左右   
                                       设置三个分别代表:上;左右;下
                                       单独设置就是设置一个边框

  注:box-sizing::border-box;不管边框怎么加宽,所占大小就是设置大小

 

posted @   大树*  阅读(1293)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示