文档章节

CSS样式详解(二)

o
 osc_257fjof0
发布于 07/01 16:30
字数 768
阅读 19
收藏 0

精选30+云产品,助力企业轻松上云!>>>

这篇让我们继续上篇CSS之旅吧~~~上货~

一.CSS样式

1.边框属性

border:边框

width:宽度

height:高度

background-color:背景颜色

  • 举例使用:
<style>
        #dd{
            /*
            border:边框粗细 边框线类型 边框线颜色
            */
            border:1px solid blue;
            /*
            宽度、高度 : px  百分比
            */
            width:300px;
            height: 300px;
            /*
            颜色:颜色单词
                  颜色编码
            */
            background-color: bisque;
        }
        #dl{
            width:300px;
            height: 300px;
            background-image: url("../img/xxx.png");
        }
    </style>
</head>
<body>
    <div id="dd">今天周日了,明天你是否要继续跟煌sir一起学习呢</div>

    <div id="dl">今天周日了,明天你是否要继续跟煌sir一起学习呢</div>
</body>

 

 

 

2.布局

  •  

         格式:

     选择器{float:属性值;}

常用属性值:

         none:元素不浮动(默认值)

         left:元素向左浮动

         right:元素向右浮动

 

  • 格式:选择器{

clear:属性值;

}

常用属性值:

     left:不允许该元素左侧有浮动元素(清除左侧浮动的影响)

     right:不允许该元素右侧有浮动元素(清除右侧浮动的影响)

     both:同时清除左右两侧浮动的影响(一般用both)

 

  • 举例使用:
<style>
        #d1{
            background-color: red;
            width: 100px;
            height: 100px;
            float: left;
        }
        #d2{
            background-color: green;
            width: 110px;
            height: 110px;
            float: left;
            /*clear:both;*/
        }
        #d3{
            background-color: blue;
            width: 120px;
            height: 120px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>

 

 

3.转换

块元素:会自动换行   

行内元素:不会自动换行

 

  • 常用的属性值:

   block:此元素将显为块元素(块元素默认的display属性值)

   inline:此元素将显示为行内元素(行内元素默认的display属性值)

   none:此元素将被隐藏,不显示,也不占用页面空间。

 

 

 

4.字体

<style>
        span{
            font-size:120px;
            color:red;
        }
    </style>
</head>
<body>
    <span>xxxxx</span>
</body>

 

 

 

二.CSS盒子模型

1.简述

 

 

2.边框(border)

 

  • 举例使用:
  • <style>
            div{
                width: 300px;
                height: 300px;
                border-top:3px double blue;
                border-right:3px double red;
                border-bottom:3px double yellow;
                border-left:3px double green;
                /*
                一次性设置四个边框
                border:3px double green;
                */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    

     

 

3.内边距(padding)

内边距:HTML元素里的内容体  到  HTML元素边框 的距离

 

  • 举例使用:
<style>
        div{
            width: 300px;
            height: 300px;
            border:3px solid red;
            padding-top: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div>这是我的测试内容</div>
</body>

 

 

4.外边距(margin)

 

<style>
        div{
            width: 300px;
            height: 300px;
            border:3px solid red;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

 

 

 

三.引入CSS样式

1.内部样式(写在某个HTML页面上)

修改某一个标签的样式:

<html标签 style=”css样式代码” />

 

修改某个页面上的标签样式:

格式:

<style>

css样式代码

</style>

 

 

2.外部样式

1、创建css文件  (.css)

 

2、为HTML引入css文件

格式:

<link rel="stylesheet" type="text/css" href="css文件路径"/>

  • rel="stylesheet" ,固定值,表示样式表
  • type="text/css",固定值,表示css类型
  • href ,表示css文件位置

举例:


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
</head>

 

 

 

 

 

 

 

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多! 

~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

o
粉丝 0
博文 52
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

switch linux mint 20 apt repository to tsinghua' mirrors

edit file /etc/apt/sources.list.d/cat official-package-repositories.list lwk@qwfys:/etc/apt/sources.list.d$ lltotal 12drwxr-xr-x 2 root root 4096 Jul 5 20:01 ./drwxr-xr-x 7 ......

qwfys
32分钟前
7
0
面试系列之C++的对象布局【建议收藏】

我们都知道C++多态是通过虚函数表来实现的,那具体是什么样的大家清楚吗?开篇依旧提出来几个问题: 普通类对象是什么布局? 带虚函数的类对象是什么布局? 单继承下不含有覆盖函数的类对象是...

伊牙牙嘿哈哈
57分钟前
17
0
OpenCV开发笔记(六十六):红胖子8分钟带你总结形态学操作-膨胀、腐蚀、开运算、闭运算、梯度、顶帽、黑帽(图文并茂+浅显易懂+程序源码)

若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062 本文章博客地址:h...

红模仿_红胖子
今天
12
0
base 64编码用于什么? - What is base 64 encoding used for?

问题: I've heard people talking about "base 64 encoding" here and there. 我听说有人在这里和那里谈论“base 64编码”。 What is it used for? 它是干什么用的? 解决方案: 参考一: ......

技术盛宴
今天
21
0
2020阿里巴巴官方最新Redis开发规范!

本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明。 键值设计 命令使用 客户端使用 相关工具 通过本文的介绍可以减少使用Redis过程带来的问题。 一、键值设计 1、key名设计...

北柠Java
今天
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部